Member Avatar for 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);
}
Edited by RanoSarah because: n/a
  • 3 Contributors
  • 8 Replies
  • 83 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by logoonlinepros

Dani AI

Generated

A few targeted steps that often fix the IE7/old-IE symptoms described by and noted by and .

Start small: confirm a standards DOCTYPE so IE does not fall into quirks mode. Then check HTML structure (every <li> inside a single <ul>, no stray IMG wrappers). If structure is correct but IE still shows a displaced tab or a thin white gap above the nav, try forcing layout and changing how the floats render in IE — those two things fix many mysterious gaps and placement problems.

/* small, non-invasive fixes for IE6/7 float/layout bugs */
#navig {
  zoom: 1;        /* gives the element "hasLayout" in old IE */
  overflow: hidden; /* contains floated children */
}

#navig ul li {
  display: inline; /* prevents some IE float-placement bugs on list items */
}

If that does not resolve it, use the IE Developer Tools (F12) or an IE7 virtual test to inspect computed margins/padding and element boxes. Apply temporary outlines or background colors to visualize spacing. For per-browser tweaks, place the few rules above inside an IE-only conditional stylesheet so modern browsers are unaffected.

Recommended Answers

All 8 Replies

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for teedoff

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

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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 :)

Member Avatar for 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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.