Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
IE messing with margins and values FTW!
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.
This discussion has been closed.