You may have noticed in your web design process that element spacing isnâ€™t the same between Internet Explorer and the Gecko engine-powered browsers (Netscape, Mozilla, Firefox, etc). Itâ€™s been the cause of so many wrongly positioned elements during my page design process. At first, I could never figure out why Firefox was working fine, but Internet Explorer just really wanted to push a sidebar below the rest of the page content. I knew it had something to do with the margins and the elements encroaching on each otherâ€™s territory; however, it wasnâ€™t until a couple weeks ago that I (think) really discovered the cause.
It would seem as though Internet Explorerâ€™s measurement for margin spacing is not equivalent to the Gecko engineâ€™s interpretation. Internet Explorer tends to space things out quite a bit more than the Gecko engine. As a result, if youâ€™ve just got enough room to fit in â€˜20pxâ€™ of margin in Firefox, youâ€™ll probably find that it messes up in Internet Explorer. Thatâ€™s not so good. If you want those margins to look right in Internet Explorer, youâ€™ll probably end up with a little funky looking thing in Firefox and the rest of the browsers out there. To get around this little, but annoying problem, Iâ€™ve been using a pretty hacky fix.
Padding spacing seems to be measured the same by Internet Explorer as the other browsers. As a result, lining things up for me has been requiring another element (say a div layer) that has as its padding attribute what the inner element wouldâ€™ve needed as a margin. By avoiding those margins, you can be pretty much assured that things will line up properly in all the browsers. (Okay, I lied, I havenâ€™t tested this in Safari, but if anyone would like to send me a Mac, Iâ€™ll gladly look into it. 😉 ) So the only inconvenience is really that everything will be nested one div deeper. Thatâ€™s not too bad.
If anyone can point out what Iâ€™m doing wrong to solve this â€˜problemâ€™ without doing what Iâ€™m doing, feel free to drop me a line. Iâ€™d really appreciate it if thereâ€™s an easier way of getting around it.