IE6 CSS Issue

HTML & CSS
1

On the website: Cape English Language School | Learn To Speak English at a international level

Everything works fine up until I looked at it in IE6.

The Right Column is moving below main content.

Wordpress & thematic Website

Thanks

2

Hi.

These wordpress sites are horrible to debug :slight_smile: Miles of code for only a small effect.

It looks like the problem is that your right column is only 334px wide yet inside it you have nested this element.


#qtranslate-6 {
    background: url(images/lang.png) no-repeat;
  [B] width:314px;[/B]
    height:54px;
    padding: 20px 0 0 [B]60px;[/B]
}

314 = 60 = 374px wide which is much too big to fit on the available space so the column must drop.

Remove the width and test again.


#qtranslate-6 {
    background: url(images/lang.png) no-repeat;
    /*width:314px;*/
    height:54px;
    padding: 20px 0 0 60px;
}

Your navigation is likely to be broken in many browsers as you have squeezed that text into a tight space and used padding to make it all fit. In some browsers the text will be much wider than others and the text will wrap or drop to another line. Indeed if the user resizes the text then it will break out of your nav.

The only solution without redesigning is to remove the horizontal padding and then give each anchor it’s appropriate width. Use text-align:center to center the text in the available space.

Then I would create a deeper background image for the nav that can expand vertically and reveal more when text is zoomed or wraps.

3

Thank you will give this a try soon.

PeacD