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

[Luminated]

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?

[Luminated]

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

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

[Luminated]

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.

[Luminated]

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.

[TheDoc]

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

[Luminated]

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/

[Author]

Posts