Treehouse: Grow your CSS skills. Land your dream job.

CSS Div Width Browser Cross-Compatibility Problem

  • # August 27, 2012 at 11:21 am

    My client is having problems viewing this in Firefox and Safari. I don’t have any issue in either.
    The quote and copy in the scrollbar frame inside the box show up misaligned and outside the box (divs – mid, quote, copy).

    Please click on all the other tabs and see what they look like, both in Firefox and Safari.

    The problem seems to be that the width of the “mid” div does not fit in all browsers.
    What’s weird is, we are both using 15″ Macbook Pros, and it shows up fine for me in all browsers.

    Does anyone know the fix for this?

    Thanks so much!

    # August 27, 2012 at 12:01 pm

    The #quote div is floating left but hitting a previous float in the menu. You can either add clear: left; to #quote or probably a better fix is to add overflow:hidden; to #menubar (this would prevent floats in any page from hitting the nav).

    edit// oh, and the reason it would fail in some browsers but not others is because the height of the li was based on the font-size/line-height of the anchor and not every browser displays the same – some where 1px taller than others. This 1px difference caused the problem.

    # August 28, 2012 at 8:53 am

    Thank you wolfcry – That’s a huge help!

    I’m having one more set of issues to wrap things up with the site here –

    The below pages are apparently doing the same thing to her – even though I added the overflow:hidden statement to #menubar in the CSS file and all the other pages changed, except for these:

    Can you see what’s wrong with those?

    Thanks in advance!

    # August 28, 2012 at 9:57 am

    you didn’t add overflow: hidden; to #menubar – you added it to #midwrapper, which does nothing to help the situation. The only reason certain pages work is because you also added clear: left to #quote, but the pages that fail use #quote2.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.