Title does not appear in front of the floated element
From http://tesselaar.com/gallery/ I have a title (level 1) at the top of the Photo Gallery page, t in IE7 and I can't figure out why.
It follows the same CSS page and page structure as the rest of the site, the only difference is that immediately after that, the element is moved to the right.
Any insight would be appreciated.
source to share
This certainly strikes me as buggy, but only with the IE dev tools installed here I can tell it is not HTML itself, it is definitely an IE CSS bug. One of the many things IE jerks around is float, so on that basis, I suggest you try two things.
First, to change the doctype to strict is a stronger foundation to move forward and change IE's behavior. You can fix it on your own.
The second suggestion is to remove the float and width from the div and instead rely on text-align: right;
which one you applied to the form. This will give you the same layout as in FF without using floats. However, it seems that what you are trying to achieve is a floating dropdown menu to the right and right of the title? If you want to keep a centered header that's pretty messy tbh.
source to share
I suspect the issue is with floats and italics. IE hates italicizing content around floats.
I suspect that as you drag in some other css you are putting some kind of overflow in there and unintentionally fixing two problems ...
Here is a small article about it: http://www.positioniseverything.net/explorer/italicbug-ie.html
source to share