Problems in IE6 & IE7

Here’s my page I’m having trouble with:

martcol.co.uk/brightontherapyservice/news/

The Sidebar does not float properly in IE6 or IE7 and I can’t work out why.

I know some people say don’t bother with IE6 especially but this is important to me here because our local authority/government sites are still using IE6 or 7.

I would really appreciate any suggestions. Right now, I can’t even think what to do next.

Thanks

martin

May be you need to create IE 6 and 7 specific CSS.

<!–[if lte IE 7]>
<link rel=“stylesheet” type=“text/css” href=“ie7-and-down.css” />
<![endif]–>

In ie7-and-down.css

#sidebar { margin-top: -525px; }

I am not able to find any other solution. May be others can help you out.

Many thanks tamilsuresh

I’m perplexed by this because the problem only exists in this page which is the blog page. I was wondering if the loop is doing something that is throwing the page out.

Still, maybe there is a CSS fix but whatever, I’m still chipping away at it.

Martin

Try clear:right; either on the following existing rule or .post

section article {
    width: 625px;
    float: right
    clear:right;
}

Wow!

I don’t know what to say! That seems to have fixed it. I understand what clear does but I don’t understand what was happening there.

Still, if feels good that it is fixed and I am grateful.

Regards

martin

Hi,

The problem is that you have floated multiple article elements to the right and then you expect the last bit of static text to wrap all the way up to the top of all the floats but IE7 and under will only wrap the text in line with the very last float.

That is a bad design flaw anyway and you should float two columns only. One for the left content and one for the right content and then statically contain the content inside each. This will be more robust and work cross browser.

Just throw a div around those article sections and float it right with the correct width. The float the sidebar to the right with no margins and it will all line up nicely. Never use negative top margins to line things up when you have fluid content as that is a recipe for disaster and only works for the single case you see and indeed will be misplaced n all browsers due to the way that fluid content wraps and fits differently depending on browser.

That’s a massive amount of code for such a small effect though but I guess you are bound by wordpress although I see no need for all the html5 bloat.

Edit:

The clear:right that Victor suggests will fix the problem but is basically using another IE bug to squash an IE bug and the best way to go is still to create two floated columns as mentioned already.

Many thanks Paul O’B

I see that exactly now and had actually started trying to fix it probably, as you were posting!

I’m pretty new to WP and now HTML5 but I thought that I would have a go. I can see that HTML5 for a site like mine was not really necessary but hey, I had a go nonetheless. I’m also using a Boilerplate theme based on Starkers which has also had me tied up in knots a bit. Adding a <div> is not so easy as with a static site but now I think I have it and my sidebar is behaving itself.

thanks again

Martin

Well we can’t blame you for trying and you probably learned a lot in the process anyway :slight_smile: