IE messing with margins and values FTW!

Kosmo

I know all about box model and it's hacks when it comes to IE, but this one problem just doesn't make any sense. I have a #main div that wraps #top #article #sidebar and #bottom in it, now #sidepanel and #article should have 10px margin on opposite side of each other, so that #sidepanel that is on the left has margin-left: 10px and #article that is on the right has margin-right: 10px, the #top and #bottom elements don't have any margin nor padding since they are just holders for pieces of background. Now the problem comes that when I use this, the site displays correctly on every other browser than IE, when I don't have any margin-left on #sidepanel, it goes flush to the side of the #main div like it should, but when I put 10px margin, it goes ahead and takes 20px, but that strange thing is that the #article that is on the opposite side, only takes 10px, but this doesn't leave any space between the #sidebar and #article divs, which when counting the sizes should add to 10px but since the #sidebar takes 20px margin it eats away the space betweenthe two divs. Now, the funky part is that I fixed it by taking away the margin from them and adding padding to them, again, 10px to their respective side, and tadaa, this works perfectly, no extra padding on either div and the site looks the same on all the browsers. I just wanted to write this as a "lecture" for you who don't hack away with CSS that much but might bump in the same kind of problem, but don't have the time to look for solution. I think we should have a CSS help category since these are pretty universal from newbie to the hardcore pro. And articles like this are useful reads to anyone doing any design.

Bergamot

Any of these divs floated?

I ask because it sounds very much like this bug.

Kosmo

Yup, the same one, but the added padding fixes it just fine. I try not to add extra definitions to any class if I can fix it with one parameter that works swell for all the browsers, there is less chance for it to break in future updates.

Bergamot

Yeah I've done both; and neither is ideal.

Kosmo

Yeah I would guess that, but isn't not something that came out of nowhere, you know that when you design a page like this, that you are going to have nightmares everytime new version of IE comes out. So it's no biggie. I'm just wondering what kind of open heart surgery we have to do when the new IE7 comes and fucks things up.

Bergamot

Well you'll be happy to know that this bug is fixed in ie7

nick1presta

I'll take a look at it later today. I'm tired.

crazybat

If you have a sample of the (x)HTML and CSS, I'll have a look for ya.

Kosmo

There is no actual problem, it's a writeup about a problem that I wrestled with and thought that I should make a writeup so anyone wrestling with the same problem might find this helpful.