Problems with cross browser compatibility

Discussion in 'HTML' started by Sally Thompson, Jun 17, 2004.

  1. I've recently been revamping my first web site and have moved my menu
    to read down the left, using CSS. It all (HTML and CSS) validates,
    and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
    div - <http://www.stonybrook-ludlow.co.uk/styles.css>

    However, I am told that on a Mac using IE5, the menu items are huge
    blocks, obviously oversized in width and height. Would it sort this
    problem to give an explicit height to each <li>? I don't know what to
    do about the width problem, since I have already given a specific
    width to both the <ul> and the <li>. Can any one advise? And would
    this problem be specific to the Mac, or is likely to be the same for
    anyone on a PC using IE5? (I don't have access to a Mac.)

    Secondly, on a Mac using Safari the menu looks fine but on a page
    where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    the thumbnails do not read across the screen from left to right, but
    down in a column. The extra stylesheet for this page is at
    <http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
    changed this style sheet from using {float: left; } to using a
    container with {text-align: center; } to get the thumbs to overflow
    into the centre when they do not fit exactly on a line. How can I
    overcome this problem?

    I know there are ways of hiding style sheets from certain browsers,
    but I'm a bit of a beginner here so not quite sure whether that is
    what I have to do.

    All this and my strawberry jam didn't set - not a good day :-(


    --
    Sally in Shropshire, UK
    bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
    Reply To address is spam trap
     
    Sally Thompson, Jun 17, 2004
    #1
    1. Advertising

  2. Sally Thompson

    SpaceGirl Guest

    "Sally Thompson" <> wrote in message
    news:...
    >
    > I've recently been revamping my first web site and have moved my menu
    > to read down the left, using CSS. It all (HTML and CSS) validates,
    > and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
    > div - <http://www.stonybrook-ludlow.co.uk/styles.css>
    >
    > However, I am told that on a Mac using IE5, the menu items are huge
    > blocks, obviously oversized in width and height. Would it sort this
    > problem to give an explicit height to each <li>? I don't know what to
    > do about the width problem, since I have already given a specific
    > width to both the <ul> and the <li>. Can any one advise? And would
    > this problem be specific to the Mac, or is likely to be the same for
    > anyone on a PC using IE5? (I don't have access to a Mac.)


    Mac IE is just weird - if your site works in IE 6 and Mozilla 1.3, you will
    be okay with almost all other browsers. It is *essential* you test in
    Mozilla tho, as it renders very "standard" markup. IE does *not* render
    pages correctly even on a PC. We tend to write for Mozilla and "fix for IE"
    these days, as the market is slowly sliding away from IE...

    >
    > Secondly, on a Mac using Safari the menu looks fine but on a page
    > where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    > the thumbnails do not read across the screen from left to right, but
    > down in a column. The extra stylesheet for this page is at
    > <http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
    > changed this style sheet from using {float: left; } to using a
    > container with {text-align: center; } to get the thumbs to overflow
    > into the centre when they do not fit exactly on a line. How can I
    > overcome this problem?


    I'll take a wee look at your CSS shortly (no Macs here either btw)

    > I know there are ways of hiding style sheets from certain browsers,
    > but I'm a bit of a beginner here so not quite sure whether that is
    > what I have to do.
    >
    > All this and my strawberry jam didn't set - not a good day :-(


    Awwww :( Well, un-set jam - makes a great filler layer in a trifle or spread
    inside a sponge cake :)

    > --
    > Sally in Shropshire, UK
    > bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
    > Reply To address is spam trap


    Miranda
    (missing her bed, and skipped breakfast, edinburgh!)
     
    SpaceGirl, Jun 17, 2004
    #2
    1. Advertising

  3. Sally Thompson

    Steve Pugh Guest

    (Sally Thompson) wrote:

    >I've recently been revamping my first web site and have moved my menu
    >to read down the left, using CSS. It all (HTML and CSS) validates,
    >and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
    >div - <http://www.stonybrook-ludlow.co.uk/styles.css>


    http://jigsaw.w3.org/css-validator/...ludlow.co.uk/pond.html&warning=1&profile=css2

    >However, I am told that on a Mac using IE5, the menu items are huge
    >blocks, obviously oversized in width and height. Would it sort this
    >problem to give an explicit height to each <li>? I don't know what to
    >do about the width problem, since I have already given a specific
    >width to both the <ul> and the <li>. Can any one advise?


    Hmm, in Mozilla the menu items are the correct width but are much too
    tall.

    This is due to the style
    li a
    {
    [snip]
    display: block; width:100%; height:100%;
    }

    The height: 100%; is being interpreted as 100% of the browser window.

    I would delete the width:100%; and height:100%; as they don't appear
    to be needed.

    In addition I would change the selectors li and li a to
    #navcontainer li and #navcontainer li a. Otherwise what happens when
    you want to include a list in the content of a page?

    >And would
    >this problem be specific to the Mac, or is likely to be the same for
    >anyone on a PC using IE5? (I don't have access to a Mac.)


    Mac IE5 and Win IE5 are totally different beasts.

    You can sign up for a free 8 hour trial account on
    http://www.browsercam.com/ to get screenshots of your page in many
    different browsers.

    >Secondly, on a Mac using Safari the menu looks fine but on a page
    >where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    >the thumbnails do not read across the screen from left to right, but
    >down in a column. The extra stylesheet for this page is at
    ><http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
    >changed this style sheet from using {float: left; } to using a
    >container with {text-align: center; } to get the thumbs to overflow
    >into the centre when they do not fit exactly on a line. How can I
    >overcome this problem?


    Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
    what you want because your page triggers quirks mode wherein those two
    browsers emulate the errors of IE5.

    The problem here is that your images are wrapped in <p> elements and
    <p> is a block element, and hence appears on a new line. Setting
    displau: inline on the parent <div class="thumb"> really shouldn't
    change that (IE is getting it wrong).

    What you really want is display: inline-block; but only Opera and
    Safari support that at present. Tricky, let me have lunch and I'll see
    if I can find a solution.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 17, 2004
    #3
  4. On Thu, 17 Jun 2004 11:57:17 +0100, "SpaceGirl"
    <> wrote:

    >
    >"Sally Thompson" <> wrote in message
    >news:...
    >>

    <snip>
    >>
    >> However, I am told that on a Mac using IE5, the menu items are huge
    >> blocks, obviously oversized in width and height. Would it sort this
    >> problem to give an explicit height to each <li>? I don't know what to
    >> do about the width problem, since I have already given a specific
    >> width to both the <ul> and the <li>. Can any one advise? And would
    >> this problem be specific to the Mac, or is likely to be the same for
    >> anyone on a PC using IE5? (I don't have access to a Mac.)

    >
    >Mac IE is just weird - if your site works in IE 6 and Mozilla 1.3, you will
    >be okay with almost all other browsers. It is *essential* you test in
    >Mozilla tho, as it renders very "standard" markup. IE does *not* render
    >pages correctly even on a PC. We tend to write for Mozilla and "fix for IE"
    >these days, as the market is slowly sliding away from IE...


    OK, SpaceGirl, I have been meaning to download Mozilla for a while -
    will do so.

    >> Secondly, on a Mac using Safari the menu looks fine but on a page
    >> where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    >> the thumbnails do not read across the screen from left to right, but
    >> down in a column. The extra stylesheet for this page is at
    >> <http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
    >> changed this style sheet from using {float: left; } to using a
    >> container with {text-align: center; } to get the thumbs to overflow
    >> into the centre when they do not fit exactly on a line. How can I
    >> overcome this problem?

    >
    >I'll take a wee look at your CSS shortly (no Macs here either btw)


    Will be interested in your comments.

    --
    Sally in Shropshire, UK
    bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
    Reply To address is spam trap
     
    Sally Thompson, Jun 17, 2004
    #4
  5. On Thu, 17 Jun 2004 12:22:22 +0100, Steve Pugh <> wrote:

    > (Sally Thompson) wrote:
    >
    >>I've recently been revamping my first web site and have moved my menu
    >>to read down the left, using CSS. It all (HTML and CSS) validates,
    >>and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
    >>div - <http://www.stonybrook-ludlow.co.uk/styles.css>

    >
    >http://jigsaw.w3.org/css-validator/...ludlow.co.uk/pond.html&warning=1&profile=css2


    Whoops! Well, it did validate at one time but I've obviously changed
    something. However - I don't quite understand the error message which
    says:

    Invalid number : font too few values for the property normal 100% :
    normal 100%

    Can I not write { font: normal 100%; } in my CSS then? What should I
    write instead?

    >>However, I am told that on a Mac using IE5, the menu items are huge
    >>blocks, obviously oversized in width and height. Would it sort this
    >>problem to give an explicit height to each <li>? I don't know what to
    >>do about the width problem, since I have already given a specific
    >>width to both the <ul> and the <li>. Can any one advise?

    >
    >Hmm, in Mozilla the menu items are the correct width but are much too
    >tall.
    >
    >This is due to the style
    >li a
    >{
    >[snip]
    >display: block; width:100%; height:100%;
    >}
    >
    >The height: 100%; is being interpreted as 100% of the browser window.
    >
    >I would delete the width:100%; and height:100%; as they don't appear
    >to be needed.


    I will try this

    >In addition I would change the selectors li and li a to
    >#navcontainer li and #navcontainer li a. Otherwise what happens when
    >you want to include a list in the content of a page?


    And I will change this too

    >>And would
    >>this problem be specific to the Mac, or is likely to be the same for
    >>anyone on a PC using IE5? (I don't have access to a Mac.)

    >
    >Mac IE5 and Win IE5 are totally different beasts.
    >
    >You can sign up for a free 8 hour trial account on
    >http://www.browsercam.com/ to get screenshots of your page in many
    >different browsers.


    Thanks - hadn't realised that I could get a free trial.

    >>Secondly, on a Mac using Safari the menu looks fine but on a page
    >>where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    >>the thumbnails do not read across the screen from left to right, but
    >>down in a column. The extra stylesheet for this page is at
    >><http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
    >>changed this style sheet from using {float: left; } to using a
    >>container with {text-align: center; } to get the thumbs to overflow
    >>into the centre when they do not fit exactly on a line. How can I
    >>overcome this problem?

    >
    >Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
    >what you want because your page triggers quirks mode wherein those two
    >browsers emulate the errors of IE5.
    >
    >The problem here is that your images are wrapped in <p> elements and
    ><p> is a block element, and hence appears on a new line. Setting
    >displau: inline on the parent <div class="thumb"> really shouldn't
    >change that (IE is getting it wrong).
    >
    >What you really want is display: inline-block; but only Opera and
    >Safari support that at present. Tricky, let me have lunch and I'll see
    >if I can find a solution.


    Thanks, Steve - would be grateful for any input.

    --
    Sally in Shropshire, UK
    bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
    Reply To address is spam trap
     
    Sally Thompson, Jun 17, 2004
    #5
  6. Sally Thompson

    Steve Pugh Guest

    (Sally Thompson) wrote:
    >On Thu, 17 Jun 2004 12:22:22 +0100, Steve Pugh <> wrote:
    >> (Sally Thompson) wrote:
    >>
    >>>I've recently been revamping my first web site and have moved my menu
    >>>to read down the left, using CSS. It all (HTML and CSS) validates,
    >>>and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
    >>>div - <http://www.stonybrook-ludlow.co.uk/styles.css>

    >>
    >>http://jigsaw.w3.org/css-validator/...ludlow.co.uk/pond.html&warning=1&profile=css2

    >
    >Whoops! Well, it did validate at one time but I've obviously changed
    >something. However - I don't quite understand the error message which
    >says:
    >
    > Invalid number : font too few values for the property normal 100% :
    >normal 100%
    >
    >Can I not write { font: normal 100%; } in my CSS then? What should I
    >write instead?


    When you use the font shorthand you have several options, but if you
    specify the font-size you must also specify the font-family.

    The spec reads:
    Value: [ [ <'font-style'> || <'font-variant'> ||
    <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]?
    <'font-family'> ] | caption | icon | menu | message-box |
    small-caption | status-bar | inherit

    Which means
    Either:
    None or more of font-style, font-variant, font-weight
    plus font-size
    plus optionally / line-height
    plus font-family
    Or:
    one of caption, icon, menu, message-box, small-caption, status-bar,
    inherit

    >>>Secondly, on a Mac using Safari the menu looks fine but on a page
    >>>where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    >>>the thumbnails do not read across the screen from left to right, but
    >>>down in a column. The extra stylesheet for this page is at
    >>><http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
    >>>changed this style sheet from using {float: left; } to using a
    >>>container with {text-align: center; } to get the thumbs to overflow
    >>>into the centre when they do not fit exactly on a line. How can I
    >>>overcome this problem?

    >>
    >>Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
    >>what you want because your page triggers quirks mode wherein those two
    >>browsers emulate the errors of IE5.
    >>
    >>The problem here is that your images are wrapped in <p> elements and
    >><p> is a block element, and hence appears on a new line. Setting
    >>displau: inline on the parent <div class="thumb"> really shouldn't
    >>change that (IE is getting it wrong).
    >>
    >>What you really want is display: inline-block; but only Opera and
    >>Safari support that at present. Tricky, let me have lunch and I'll see
    >>if I can find a solution.

    >
    >Thanks, Steve - would be grateful for any input.


    Well, I've had my lunch and I'm about to have my dinner, but I still
    can't think of a way to do what you want in Mozilla.

    Win IE5, IE6 (quirks mode), Opera 7 (quirks mode) - display: inline;
    "works"
    Opera 7 (standards mode), Safari, Mac IE5 (question mark on the last
    two) - display: inline-block works.
    Mozilla, IE6 (standards mode) - neither works. Best you could hope for
    would be to degrade to left floated blocks.

    Now, let's assume that you'll stick with quirks mode as that gives you
    a working solution in Win IE6 and hence covers the largest group of
    users.

    So we do this:
    div.thumb { display: inline; }
    div[class="thumb"] {float: left;}

    Win IE doesn't understand the second line so only sees the code as it
    is at present. Better browsers understand the second line and left
    float the divs which automatically sets them back to display: block;
    (which we want as display: inline; means that the height and width
    will be ignored).

    The only problem is that Opera and Safari which can display the blocks
    centered will now float them to the left. It is very difficult to
    apply different styles in the latest versions of Mozilla, Opera and
    Safari without resorting to nastiness such as javascript browser
    sniffing.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 17, 2004
    #6
  7. Toby A Inkster, Jun 17, 2004
    #7
  8. Sally Thompson

    SpaceGirl Guest

    <snip a really good reply>

    > The only problem is that Opera and Safari which can display the blocks
    > centered will now float them to the left. It is very difficult to
    > apply different styles in the latest versions of Mozilla, Opera and
    > Safari without resorting to nastiness such as javascript browser
    > sniffing.
    >
    > Steve


    You could make an educated guess using a server side script to read the HTTP
    header - I wrote a little script that looks in the header and pulls out the
    browser string and will alter *some* stylesheets depending on what it find.
    Now, some browsers do lie about what they are, but it's "mostly accurate".
     
    SpaceGirl, Jun 18, 2004
    #8
  9. On Thu, 17 Jun 2004 12:22:22 +0100, Steve Pugh <> wrote:

    > (Sally Thompson) wrote:
    >
    >>I've recently been revamping my first web site

    <snip>
    >>However, I am told that on a Mac using IE5, the menu items are huge
    >>blocks, obviously oversized in width and height. Would it sort this
    >>problem to give an explicit height to each <li>? I don't know what to
    >>do about the width problem, since I have already given a specific
    >>width to both the <ul> and the <li>. Can any one advise?

    >
    >Hmm, in Mozilla the menu items are the correct width but are much too
    >tall.

    <snip>
    Steve, thanks so much for your advice on this. I have made the
    changes you suggested here and below.

    >>Secondly, on a Mac using Safari the menu looks fine but on a page
    >>where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
    >>the thumbnails do not read across the screen from left to right, but
    >>down in a column.

    <snip>

    >Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
    >what you want because your page triggers quirks mode wherein those two
    >browsers emulate the errors of IE5.
    >
    >The problem here is that your images are wrapped in <p> elements and
    ><p> is a block element, and hence appears on a new line. Setting
    >displau: inline on the parent <div class="thumb"> really shouldn't
    >change that (IE is getting it wrong).


    In fact, the need for the <p> (the captions under each thumbnail) has
    now reduced with the revised layout, so I have removed them
    altogether. I have now also downloaded Mozilla (thanks, SpaceGirl)
    and the pages look fine in that now. Thanks again to you both, and
    also, I should say, to Els, whose good advice I have also taken on
    board.


    --
    Sally in Shropshire, UK
    bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
    Reply To address is spam trap
     
    Sally Thompson, Jun 19, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    7
    Views:
    11,922
    Juan T. Llibre
    Mar 15, 2006
  2. =?Utf-8?B?cHJvZl9tYXJ0aW4=?=

    Cross-browser compatibility of Asp.net v.1.1 & 2.0

    =?Utf-8?B?cHJvZl9tYXJ0aW4=?=, Apr 25, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    3,608
    Juan T. Llibre
    Apr 25, 2006
  3. jb
    Replies:
    16
    Views:
    708
    Toby A Inkster
    Dec 8, 2003
  4. tom
    Replies:
    46
    Views:
    1,285
  5. =?ISO-8859-1?Q?L=FCpher_Cypher?=

    Cross-browser compatibility

    =?ISO-8859-1?Q?L=FCpher_Cypher?=, Jan 5, 2006, in forum: HTML
    Replies:
    2
    Views:
    463
    kchayka
    Jan 5, 2006
Loading...

Share This Page