Forums

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

Home Forums CSS Head scratcher….box model behaving differently on Chrome vs. Firefox?!?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33692
    Luminated
    Member

    I’m sure I’m missing something simple here, but check this out.

    I’m using absolute positioning (bottom:0) inside a relative div, want to append these links to the bottom of the div which has a 3px border on the bottom. If I understand the box model correctly, the border is APPENDED to the OUTSIDE of the div. This is what I expect and Firefox shows; my links snug nice and cozy to the line:

    http://goodchee.com/firefox.jpg

    In Chrome however, it seems it INCLUDES the border as part of the div itself! This causes the links to overlap the line, since it think the bottom of the div is at the bottom of the 3px border:

    http://goodchee.com/chrome.jpg

    This is quite confusing to me as it seems to violate the box model. I expect that the border would be appended to the outside of the content area which Firefox behaved the way I expected. Chrome seems to include it within the content area and this is not at all what I thought would happen.

    I’m using a great reset.css as well, so that compounds my confusion. Any takers on this one?

    #84165
    Luminated
    Member

    Actually, you can look at the page if you’d like to see the CSS/HTML as well…

    http://goodchee.com/portfolio-temp/

    #84166
    Luminated
    Member

    And now I just checked my lady’s computer and her Firefox (running the same version as me, 5.0), is doing what Chrome is!

    Chrome and Firefox on her PC are showing the tabs slightly off, per the second image. This would entail that for some reason, my install is causing this. But what is really confusing is mine is behaving like I would expect it to…so weird.

    #84167
    Luminated
    Member

    On closer inspection, it seems the tabs on my Firefox also overlap the border, just by not as much (4px difference). So, perhaps I misunderstand the box model. But still not sure why only my install of Firefox does this. I disabled all plugins and add ons, same thing.

    #84168
    TheDoc
    Member

    If you kill the padding from the links, you’ll see it’s lined up perfectly… is that a clue? I hope?

    #84169
    Luminated
    Member

    Yes yes…I was just trying that actually and came to the realization just as I read this…eery!

    Well, that does steer me in the right direction. But regardless, that means there is still a 1-2px difference between Chrome’s padding and Firefox’s padding. Guess I will have to deal with that fact.

    Besides….

    http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.