Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Div Width Browser Cross-Compatibility Problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #39528
    smithaa99
    Member

    adamanthonysmith.com/Sykes_GC_New/ourstory.html

    adamanthonysmith.com/Sykes_GC_New/styleALT.css

    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!
    Adam

    #108533
    wolfcry911
    Participant

    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.

    #108602
    smithaa99
    Member

    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:

    adamanthonysmith.com/Sykes_GC_New/creativedesign.html
    adamanthonysmith.com/Sykes_GC_New/casestudies.html
    adamanthonysmith.com/Sykes_GC_New/media.html

    Can you see what’s wrong with those?

    Thanks in advance!
    Adam

    #108608
    wolfcry911
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.