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 Thompson, Jun 17, 2004
    #1
    1. Advertisements

  2. Sally Thompson

    SpaceGirl Guest

    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...
    I'll take a wee look at your CSS shortly (no Macs here either btw)
    Awwww :( Well, un-set jam - makes a great filler layer in a trifle or spread
    inside a sponge cake :)

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

  3. Sally Thompson

    Steve Pugh Guest

    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?
    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.
    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
     
    Steve Pugh, Jun 17, 2004
    #3
  4. OK, SpaceGirl, I have been meaning to download Mozilla for a while -
    will do so.
    Will be interested in your comments.
     
    Sally Thompson, Jun 17, 2004
    #4
  5. 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?
    I will try this
    And I will change this too
    Thanks - hadn't realised that I could get a free trial.
    Thanks, Steve - would be grateful for any input.
     
    Sally Thompson, Jun 17, 2004
    #5
  6. Sally Thompson

    Steve Pugh Guest

    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
    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
     
    Steve Pugh, Jun 17, 2004
    #6
  7. not "even", but "especially".
     
    Toby A Inkster, Jun 17, 2004
    #7
  8. Sally Thompson

    SpaceGirl Guest

    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. <snip>
    Steve, thanks so much for your advice on this. I have made the
    changes you suggested here and below.
    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 Thompson, Jun 19, 2004
    #9
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.