Hi all, I just launched a new design for my blog today, and while it works in most recent versions of all browsers, there is one render problem with IE7. The page buttons on the top right of the site “fall down” below the header.
The wordpress theme is based on “new york”, but I’ve modified the original design significantly. Any ideas on how I can correct this? It renders as it should in IE8.
The problem is that you have floated your navigation to the right but it is following a couple of inline elements. IE will always start a float on a new line and therefeore is below the header images.
As a general rule you should always have your floated content before any content that you want it to wrap around. In fact floats must come first if there is block content that needs to wrap.
The rule is that a float on the same single line as inline content can move that inline content out of the way - but only on that single line. Only good browsers do this. Ie7 and under do not as they need floats to always come first in the html before the content that needs to wrap.
A solution for your page would be to float the anchor to the left instead rather than moving the navigation html upwards.