Tuesday, August 24, 2004
Fixed Style-Sheet for IE
After a bit of looking and playing for another method, I decided to give up and use my first CSS-hack for IE. Ugh. Basically, IE doesn't support position: fixed, so instead of falling back to position: absolute, it falls back to position:static, placing my navigation bar at the bottom of the page, as that's where it falls in the source.
IE also doesn't understand the child selector: >. So, I changed the style on the navigation section to use position:absolute, then I add another style rule that IE doesn't understand to add position:fixed back:
body > #navigation_section { position: fixed;}
It's unfortunate to have to resort to such hacks, but it gets the job done. And now my site looks decent in IE, and exactly how I like it in Firefox. Opera still has an issue, but it's clearly a bug: if you zoom-out and zoom back in, the page will display correctly. If anybody wants to check out how my site looks in Safari or Konqueror, I'd appreciate it (I haven't got my Linux box hooked up, and won't for a while).
Labels: meta
Comments:
The child operator? Hmm... I had no idea that existed. I didn't think it was necessary to have any operator between two elements (other than a space) to indicate the parent child relationship with IE.
I haven't ever looked into how it was supposed to work, since it seems that it works in IE and Mozilla the same way with just the space. Is this something different?
Using just a space is a descendant selector. So any elements that match the selector (#navigation_section, for instance) that are anywhere under the body would match if I used a space.
The > is the child selector. It only applies to an element directly below it. So a div with id navigation_section under the body would match, but a div inside a div that had the id navigation_section would not match.
Child Selectors from the Selectutorial at CSS Max Design.
I just found that site, but it seems very good.
