Wordpress Tip: CSS trick for Firefox and IE, using the underscore
March 8th, 2008 - Posted in Wordpress Tips |Designing Wordpress themes can be a lot of fun when working with one browser, but nothing is more aggravating then looking at your theme in Firefox, then IE and finding the CSS is not formatting properly. I personally use Firefox for all browsing and when I design, I design for Firefox first then IE. I should probably design for IE, and then Firefox, since Firefox can handle formatting much better then IE6/7.
There is a little CSS hack you can use when your themes have formatting issues. It’s called the underscore hack and it involves adding an underscore before the CSS attribute so IE will interpret it but Firefox will not.
Example:
1 2 3 4 5 | .navigation { margin-bottom: 0px; _margin-bottom:10px; /* IE Fix */ } |
I often run into this problem working with the navigation menu. Most recently the navigation bar was about 10px lower in IE then Firefox. The above code fixed the formatting issue for both browsers.
It is better to use conditional comments to future proof your code. In fact, that is what the IE team recommends, http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
Thanks for the link, I checked it out. Funny how many hacks there are for IE. That should definitely tell you something about how aggravating programming for IE 6-7 (soon 8 ) is.
I was facing this this issue while making html compatible to IE and firefox…This hack work very good for IE
Thanks for this! It really helped a lot!