homepage Welcome to WebmasterWorld Guest from 54.166.148.189
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Problem with CSS navigation in IE.
Ivan




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

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]

 

Ivan




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

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

SuzyUK




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

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" ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved