Solved various IE mishaps, but got stuck on one IE8-specific issue

[guggles2004]

I've created a website based on Wordpress theme, with adjusted styles in css. The header contains a logo floated to the left with centered text. The navigation bar should have rounded corners and a gradient color with white fonts.

Everything works fine in Firefox, Safari, Chrome and IE-09/IE-10 (I don't really care that the rounded corners do not display in earlier IE versions). But when viewed in IE08, the following two issues appear:

1. The menu bar has the green gradient color, but the fonts are greyish and hardly visible. In IE07, IE09 and IE10 the fonts display white as they should. So what causes this erratic behavior in IE08???

2. The centered header text in IE08 is unintentionally forced to the left and behind the logo. When I try with floating the image left, the green border of the menu expands and the header text disappears. I've worked around this issue playing with margins in ems, to make the text visible at least. But not a desirable result.

I've searched the net to find proper hacks or other clues, but I found nothing useful. I'm not too proficient on CSS to figure it out myself, so I hope anyone on the forum is able to help me out.

website: http://wijkraaddeblaak.nl

[Shoxt3r]

Hi there,

I've taken a look at the site in IE compatibility mode and managed to track the first error down to the selector ".main-navigation li a" within the stylesheet "ie.css". I looked at the navigation using the IE Developer Toolbar and found that you have an overriding setting for this selector which has the colour "#636363" (dark grey) set to it which is cancelling out the white which also seems to be set within ie.css?

Without looking through your CSS I should imagine it's simply a duplicate or overriding problem

As for problem number 2 I've found that text-align isn't supported by IE8 but other than that I can't really help you any. Hopefully someone else will be able to pick this up shortly.

[ronpat]

Welcome to the forums, guggles2004.

These seem to be causing the issues:

On the lt IE 9 specific style sheet, Line 64, text-align is set to left.

.site-header h1,
.site-header h2 {
	text-align: left;
}

Line 93 the color of the anchors is set to gray.

.main-navigation li a {
	border-bottom: 0;
	color: #6a6a6a;
	line-height: 3.692307692;
	text-transform: uppercase;
}

Line 139 the color of the active menu item is also set to gray.

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
	color: #636363;
	font-weight: bold;
}

all behaving "as designed"

I will hazard a guess that you could delete these (or comment them out) from the lt IE 9 stylesheet to fix the problem.

[guggles2004]

@ Shoxst3r and ronpat: thanks a lot for your effort, your answers are spot on. Everything is OK now.

Apparently, when fiddling with plugins etc., this ie.css has been created outside of my scope. Therefore I focused mainly on my own style.css to troubleshoot.

I'll give this IE developer toolbar a go, sounds like a handy gadget..

[ronpat]

Glad to hear that it's under control now. Thanks very much for the feedback. Drop in any time