I was up late last night working to make a site functional across browsers. Anyone who does web design knows what those nights are like. I couldn’t sleep until I figured things out. Part of the reason was it took a long time for me to find an answer – which, in the end, I had to reason through myself. Since it isn’t very often that you are able to Google your problem and find the same problem (with a solution) somewhere else, here is my contribution: my problem and my solution.
I had the design tweaked in the CSS and the XHTML offline and working in Firefox. (For anyone who doesn’t already, always get your site working in Firefox first, then IE after. Trust me on that one.) Though I’m using em’s to size throughout, I list the body font size as 12px. Here is the relevant code:
< id="wrapper" >
< id="content" >
< id="maincontent" >
< p >This is where text would go. < / p >
Everything after “maincontent” was the size I wanted in Firefox but not the size I wanted in IE. More specifically, everything (anything sized in ems, which meant the widths of columns, margins, and font sizes) was around 10× the size I wanted it to be. Needless to say it caught my eye.
After about an hour of struggling with it I discovered that IE assigns its own base font size unless something is specified in the parent container. So in Firefox (the correct browser) when no specification is found in the parent element it checks the next highest, the next highest, and finally the body defined font size. Firefox uses the 12px size I specified. To correct for IE, though, I had to duplicate my font specification in the direct container of “p” — that is, “maincontent.”
Everything is working well right now. I’d love to talk about the project this is for (a fairly personal one) but I would rather wait until its ready for release. I hope this post helps someone else with the same problem somewhere down the line — I know it really pissed me off last night.