PDA

View Full Version : Fix & Question - White spaces in IE6 Nav


newtonian
06-11-2011, 04:54 PM
I recently uploaded my first site based on a standard DW TwoColLtHdr CSS template, despite it having tested OK in IE6 in Browserlab it was adding extra space between the items on the Ul Li Navigation sidebar in early versions of IE6. Unfortunately I wanted it to be viewable for members of an organisation that is still using an early build of IE6.
The www.netdragon.co.uk (http://www.netdragon.co.uk/) site is a project to display the stuff I learnt on a Dreamweaver college evening course, we used MX on the course and Iím converting myself to CS5 and learning more CSS as I go, and I intend to do a further course later this year.
Having researched it the below solution was found to work which is passed on for others in case they have the same problem. The fix involved deleting the spaces after the closing </li> and then dropping the end > down to the start of the next <Li> . (As below)
But Iím a bit confused as to how it worked as I had thought that un-coded spaces in a code page had no effect on the design, but thatís obviously not the case when they are between list items? Can anybody explain how it works please as I like to understand if I can?
Oh, and please go easy on the site and CSS, I know itís messy in places but it genuinely is my first attempt. Thanks :confused:

<div class="sidebar1">
<ul class="nav">
<li><a href="../index.htm">Home</a></li
><li><a href="../about.htm">About us</a></li
><li><a href="../web basics.htm">Web basics</a></li
><li><a href="../domain names.htm">Domain names</a></li
><li><a href="../website design.htm">Web design</a></li
><li><a href="../seo.html">Search engines</a></li
><li><a href="../hosting.htm">Web hosting</a></li
><li><a href="../links.htm">Free stuff & links</a></li
><li><a href="mailto:contact@netdragon.co.uk">Contact</a></li></ul>
CSS
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}

ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus
background: #ADB96E;
color: #FFF;
}

DWcourse
06-11-2011, 07:47 PM
When you're talking about IE6, there is no explanation of why things work. That's just the way the program does things. In my experience, with a list in IE6, you just need to make sure everything is formatted the same for each list item,

domedia
06-11-2011, 10:34 PM
Try changing the doctype. I know for 4.01 strict, this is not an issue.

newtonian
06-11-2011, 11:13 PM
Thanks for the replies, clearly IE6 does some odd things and I'll try the doctypes in future.

domedia
06-11-2011, 11:23 PM
The few issues I've had with lists in IE6, has been easily fixable.