After two days reading all I could on the way Firefox and Internet Explorer render CSS differently, I've finally discovered the CSS hack. It has to do with using the html>body. Apparently, IE doesn't recognise this CSS code and so ignores it.
Trenton Moss
Since my Gallery looks perfect in Firefox with no CSS hacks, the browser I'm fooling is Internet Explorer. And it looks like you can use html>body as many times as you like throughout the stylesheet. I validated the CSS to find out, and it's valid!.
I applied the hack first to the banner, since the height and text were way out. It worked!! Next I applied the hack to the tabbed navigation, since it was out too. The problems were with height, padding, and font sizes. So my first style was for IE with smaller fonts and taller heights, and I added the html>body tag before each #banner and #tab-nav tags I wanted changed.
I didn't need javascript sniffers or multiple stylesheets, much to my relief. The only stylesheet I changed was the embedded-style.css in Gallery. For anyone interested in having Gallery integrated with Movable Type, Dlugosz.net has an excellent tutorial.
Leave a comment