Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: not2easy

Problem with CSS navigation in IE.

   
2:04 pm on Jul 18, 2008 (gmt 0)

5+ Year Member



Hello. I'm doing a navigation for the site and have a problem.

I'm not very good with coding, but know the basics.

The problem is with CSS navigation in IE, being rendered improperly. Would appreciate if some code gurus could help :D

Firefox works fine, but IE is being an ass!

The navigation in IE is indented all the way to the right and that is bad.

I attached images so you can see Good(firefox) and Bad(IE).

<no screenshot links please, see posting guidelines>

Here's How the CODE looks like.

HTML:

<div id="lower">

<div id="wrap1">
<div id="corners1"></div>
<ul id="rightnav">
<li>
<a href="subitem1.html">Level 1 </a>
<ul>
<li>
<a href="" class="level2active">Level 2 </a>
<ul>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="" class="active">Level 3 </a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="sublev"><a href="subitem2.html">Level 2</a></li>
<li><a href="subitem3.html">Level 2 </a></li>
<li><a href="subitem4.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
</ul>
<div id="corners2"></div>
</div>

-----------------------------------------------------------

CSS

#lower{
clear:both;
border-left:1px solid #605f5d;
border-right:1px solid #605f5d;
width: 750px;
background-color:#fff;
}
#wrap1{
position:relative;
height:5px;
color:#fff;
background:url(../img/footerBg.jpg) no-repeat;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: bold;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
width: 200px;
}
#corners1{
width:200px;
height:10px;
background-image: url(../images/topcorners.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin-top: 10px;
}
#corners2{
width:200px;
height:10px;
background-image: url(../images/bottomcorners.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#rightnav{
padding:0;
margin:0;
font-family:Helvetica,Arial,Geneva,Verdana,sans-serif;
font-size:8pt;
list-style: none;
width:200px;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
position: relative;
}
#rightnav ul {
padding-left: 15px;
}

#rightnav li a {
border-bottom:1px solid #E8E7DB;
display:block;
position:relative;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 5px;
color: #003366;
}
#rightnav li a:hover,#rightnav li a:active {
text-decoration:underline;
}
#rightnav a:link, #rightnav a:visited {
text-decoration:none;
}
#rightnav li.active a {
background:#E8E7DB none repeat scroll 0% 0%;
font-weight:bold;
border: none;
position: relative;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 5px;
}
#rightnav li {
display: block;
margin: 0;
position: relative;
padding-top: 6;
padding-right: 10;
padding-bottom: 6;
padding-left: 5;
}
#rightnav li.sublev {
border-top:1px solid #E8E7DB;
}

#rightnav li ul li ul li.sublev3 {
border: none;
}
#rightnav li ul li ul li.sublev3 a {
border: none;
color: #666666;
font-weight: normal;
}

#rightnav li ul li ul li.sublev3 a.active {
border: none;
color: #3499CC;
padding-left: 12px;
text-decoration: underline;
font-weight: bold;
}

#rightnav li ul li a.level2active {
background-color: #E8FFFF;
}

[edited by: encyclo at 6:39 pm (utc) on July 18, 2008]

4:51 am on Jul 19, 2008 (gmt 0)

5+ Year Member



Fixed the problem. Not sure what it was, but I married two codes of navigation, one that worked and one that didn't. Probably a bloat in terms of validation but it works

PS
Sorry for profanity :D

7:11 am on Jul 19, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Ivan, glad you got it fixed..

as you said you don't know what fixed it..

the problem is that in your nested lists you didn't zero the default margins, some browsers use margin to create the default indent and some use padding, on your child lists you have set the padding but not the margin, so IE was applying both

#rightnav ul {
padding: 0; margin: 0; /* add this */
padding-left: 15px;
}

when doing this type of nested navigation list it's always better to start off zeroing out the defaults and the list style (bullets)

so something to take care of all lists in the nav section is often seen at the start of code like..

#rightnav, #rightnav ul {
margin: 0; padding: 0;
list-style: none;
}

another unrelated thing..


padding-top: 6;
padding-right: 10;
padding-bottom: 6;
padding-left: 5;

those values should all have units attached or there could be some confusion if a browser decided to presume you meant "cm" or "em" instead of "px" ;)

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month