main
side
curve
  1. In Memory of LAJ_FETT: Please share your remembrances and condolences HERE

CSS browser compatibility problems

Discussion in 'Archive: Fan Sites' started by dark42, Dec 8, 2003.

Thread Status:
Not open for further replies.
  1. dark42

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    So my site, http://benjaminchait.net/, works fine in MSIE/6 on my system (WinXP). It's also valid XHTML/Strict http://validator.w3.org/ and has valid CSS2 http://jigsaw.w3.org/. Yet it does not appear correctly in Netscape 7.1, nor Mozilla. There are quite a few oddities in my CSS code that I copied over from http://alistapart.com, but they're not helping (supposedly they "trick" different browsers so it works correctly in everything, since no one is fully standard-compliant).

    Any ideas?
     
  2. Defiance

    Defiance Jedi Grand Master star 3

    Registered:
    Jul 16, 1999
    Even though the W3C checks for syntax correctness, it does not check for proper usage of CSS. I looked at it under Mozilla and it looks like the menu is causing the problem. The last link, "About" is set to a width of 139px. Your entirepage is set to a width of 695px. Div content is set to a width of 693px, with border width of 1px on each side. Now, let's do this: 138+138+138+138+139 = 691px. Seems to fit, right? After all, the div content is 693px wide, with 1 px on each side, leaving a total of 691px for content. Well, this isn't right. The problem here is that Microsoft failed to adhere to W3C standards, and you, in developing for IE, fell into the trap. IE implements borders like this: whatever you set the width of a block to be, the borders will be inside that width.

    However...

    W3C standards say that a user agent (browser) must render according to the following constraint for non-replaced block level elements:

    'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

    You see, the borders actually take up room outside the box.

    So let's work this again, this time, using Mozilla's correct behaviour:

    You have div content with 693 px width. That width is actually the inside, how much width you have for content. On each side, it has a 1px border, so the space that div content takes up is 695px. So far so good. Now, each of your links in your menu are block elements, set to float. You set the first 4 to have 138 px width, with a 1 px border on the left. This means each one takes up 139 px. The last one is 139 wide, with 1 px border on the left. That's 140 px wide. Adding them up, your menu takes up 696 px, which is 3 px more than what you have. Thus, the last item, the About link, has to wrap to the next line.

    So you know you now must take off 3 extra pixels. Setting the last menu item, the "about" link, to 136 px fixes it.

    But wait, because you are now doing the widths correctly, the obviously wrong implementation in IE strikes again and you have a little gap between the end of your last link and the page border.

    Only you can decide what you want to do: be correct and live with a gap for IE, or look good while swimming in Bill Gates' cess pool.
     
  3. dark42

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    Thanks a bunch. One more question - alistapart.com (where I stole the menu code from) works fine in both browsers. What's the difference in their code versus mine (slightly modified)?
     
  4. Defiance

    Defiance Jedi Grand Master star 3

    Registered:
    Jul 16, 1999
    Remove the line:

    <?xml version="1.0" encoding="UTF-8"?>

    from your HTML file. IE will then behave as Mozilla does.

    This is what's happening: the line above instructs IE6 to enter into "Quirks Mode", in which it emulates IE5 rendering (IE5 is the version that has the bug). I forgot that IE6 has fixed the border bug, so if it is running in "Standards Mode", it will display borders correctly (i.e. the border takes up space outside the box). By removing this line, and keeping the doctype as XHTML 1.1 Strict, you will be able to maintain compatibility with Mozilla. On AListApart, they don't have the line, so IE is running in standards mode.
     
  5. dark42

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    Thank you so much for your help, it's working great, now!
     
Thread Status:
Not open for further replies.