While I was re-designing my whole site (which I am still working on in many other sections), I ran into several CSS issues where things just did NOT look the same on Internet Explorer and Firefox. And of course it has been, and will be, a never-ending struggle as long as all these browsers are slightly different from each other, and over all this time I came to come up with some general rules of thumb in order to ensure cross-browser compatibility. So I’ll list a few of them here.
- When positioning DIVs within DIVs to structure elements, use margins on the inner-nested DIV instead of using padding on the surrounding DIV.
<div id=”header”>
<div id=”menubar”>menu menu menu</div>
</div>When you want to put some indentation of the #menubar so that it does not touch the edge of the #header DIV, avoid putting padding-left:20p; on the #header – instead use margin-left:20px; on #menubar.
The reason being is that Firefox will often add the padding value to the width. So even if the #header is set to width:800px;, with the padding it will stretch to 820 px. But if you use a margin on the #menubar, it will not do that. Also a great alternative is to use position:relative;, and then put left:20px; on #menubar.
- Remember that on IE6, the > constructor in CSS does not work. I see a lot of people using it (even the default WordPress theme had it) but if often does not work. Maybe it might work under different CSS mode settings (transitional, strict etc) but to avoid trouble, you may as well avoid it. When you want to designate style to all the A tags within the #menubar DIV, do this :
#menubar a {color:#cccccc;}
instead of
#menubar>a {color:#cccccc;}
- And the Vancouver Canucks JUST won the hockey game against the Dallas Stars, in Overtime, thanks to a 1-timer shot by Taylor Pyatt, who, by the way, is my favorite person tonight. And I lost my train of thought so you guys only get the above 2 pointers.. I’ll add more when I can think of some! Good night!
