Browser Compatability in IE

[RanoSarah]

Hi

Could someone please help me by telling me what I am doing wrong or not doing - my website http://www.stwconsult.com/ shows fine in FireFox but the menu seems messed up in IE.

You can view my CSS for that particular section below:

body {
margin:0;
padding:0;
font-size:12px;
color:#000000;
background:url(images/bkgrnd.png);
background-color:#fefefe;
background-image:url(../images/bkgrnd.png);
background-repeat:repeat-x;
font-family:arial, cambria, georgia;
}

div, h1, h2, h3, h4, h5, h6, h7, h8, p, img, ul, li, span {
		margin:0; padding:0; border:0;
}

#wrapper {
margin-left:auto;
margin-right:auto;
margin-top:0;
width:900px;
background-color:#FFFFFF;
}

#topholder {
width:900px;
height:180px;
background-image:url(../images/banner.gif);
}

#navig {
width:900px;
height:30px;
border-bottom:1px solid #CCCCCC;
background-image:url(../images/navig_bkgrnd1.png);
}

#navig ul {
list-style-type:none;
}

#navig ul li {
float:right;
width:auto;
height:30px;
text-align:center;
display:block;
line-height:30px;
}

#navig ul li a {
display:block;
text-decoration:none;
width:auto;
height:30px;
padding-left:20px;
padding-right:20px;
font-family: arial, cambria, georgia;
font-size:12px;
color:#FFFFFF;
font-weight:500;
background-image:url(../images/navig_bkgrnd.png);
}

#navig ul li a:hover {
display:block;
width:auto;
height:30px;
color:#ffffff;
font-weight:500;
background-image:url(../images/navig_bkgrnd_hover.png);
}

[teedoff]

Well without you saying specifically what issues you see are a problem, I dont know. I dont see any issues in IE8. However, if you validate your code here, you will see you have some errors in your code. Many of which are it seems you have created a list without having a <ul> or <ol> tag wrapping the <li> tags. This will pose some problems like you might be seeing, since your navigation menu IS a list. Fix those errors and then see if that fixes things.

[RanoSarah]

Well without you saying specifically what issues you see are a problem, I dont know. I dont see any issues in IE8. However, if you validate your code here, you will see you have some errors in your code. Many of which are it seems you have created a list without having a <ul> or <ol> tag wrapping the <li> tags. This will pose some problems like you might be seeing, since your navigation menu IS a list. Fix those errors and then see if that fixes things.

Thanks for the reply.

Yes I did notice that in the validator before. Its because in the top navigation i have two images either end that were not in li tags. When I put these in li tags the validation errors were fixed however in IE the whole menu dissappeared.

The only issue that is a problem in IE in the top navigation the first tab 'home' is stuck over to the left.

[teedoff]

You still cant expect browsers to behave right if you dont create good semantic code. You MUST nest list items in <ul> or <ol> tags.

Do you have firebug? its a free plugin for firefox, and is a great tool for debugging potential errors in coding.

[teedoff]

Again, I dont see any issues. Your home tab seems to be in the correct position. what version of IE are you using?

[RanoSarah]

Again, I dont see any issues. Your home tab seems to be in the correct position. what version of IE are you using?

I'm running version 7, I just managed to fix the tab showing i the wrong place, now i have a little problem of a white gap above the top navigation.

I'm just about to download the firebug plugin you suggested.

[teedoff]

I think you also need to take the img code OUT of your lists. Specifying a background image for a tab should be done using CSS not inserting it in the html code.

There's a great free software called CSS Tabs Designer. Not only will it create tabs abd codes for you, but its a great way to learn how tabs are created, styled, and used. Google it and try it out.

[RanoSarah]

I think you also need to take the img code OUT of your lists. Specifying a background image for a tab should be done using CSS not inserting it in the html code.

There's a great free software called CSS Tabs Designer. Not only will it create tabs abd codes for you, but its a great way to learn how tabs are created, styled, and used. Google it and try it out.

Brilliant thanks very much for your advice teedoff :)

[logoonlinepros]

But i note that sometime code is correct but IE can't show site perfect and other browser have no problem with that code.
I thinks IE has to much bugs on its browser. Can you check your site on other browser?