View Full Version : css nav bar problem with IE

07-29-2007, 03:38 PM
Hi guys,

I'm not a developer and could do with some much needed advice/help.

I've managed to put a site together on my Mac and have tested it on most browsers and have run into a formatting problem on IE6 Win2k/XP.

Here's the problem


the nav bar on the left is adding an extra blank line indiscriminently and no matter how much i trim down my css i can't seem to fathom it out.

Any help at all would be much appreciated.

Here's the relevant css section :-


.nav {
text-align: left;
color: #333333;
padding: 0px 0 0 2px;
width: 176px;

.nav li {
/* margin: 5px 0 5px 0px; */
/* margin: 0px 0px 0px 0px; */
background: #CCCCCC;
padding: 5px 0 0 5px;
/* border-bottom: 0px solid #CCCCCC; */
list-style: none;

.nav li a {
text-decoration: none;
/* padding: 5px 0 1px 5px; */
padding: 5px 0px 1px 5px;
/* background: #ffffff; */
background: #CCCCCC;
/* border-top: 0px solid #CCCCCC; */
/* border-bottom: 0px solid #CCCCCC; */
border-left: 4px solid #40cb25;
display: block;
/* margin-bottom: 0px; */

.nav li a:hover {
color: #999999;
text-decoration: none;
/* border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff; */
border-left: 4px solid #4fb6e5;
display: block;
/* margin-bottom: 0px; */

#main {
background: #666666;
width: 800px;
margin: 0 ;
color: #808080;

#main .left {
float: left;
width: 160px;
/* padding: 0px 0px 0px px;
margin: 0px; */

#main .left .hitems {
margin: 0px;
padding: 0px;

#main .left .hitems ul {
/* margin: 0px 0px 0px 0px;
padding : 0px; */
color: #333333;

#main .left .hitems li {
/* margin: 0 0 2px 2px; */
/* padding: 0 0 0 0px; */
color: #FFFFFF;

07-29-2007, 04:24 PM
I came across this same problem with IE6 as well. I cound't find a solution. I remydied by collapsing all the navigational code. Heres an cutting:

<DIV class=nav><!-- <h2>left Column</h2>
<div class="text">
You could use this space to display the

latest news, a calendar, random photos, the choice is yours, its here if you need it.
</div> --><!-- <h2>The Courses</h2> -->
<UL><!-- <li><p class="style1">blop</p> -->
<LI><A href="http://www.red9media.com/courses/hocdsr450.html">Hands on Camera DSR450</A><LI><A

href="http://www.red9media.com/courses/hoc-locam01.html">Location camera skills</A><LI><A href="http://www.red9media.com/courses/hoc-sonyz1.html">Hands on

Camera Sony Z1</A><LI><A href="http://www.red9media.com/courses/lighting-wshop01.html">Lighting workshop #1</A><LI><A

href="http://www.red9media.com/courses/creative-wshop01.html">Concept development and creativity workshop</A><LI><A

href="http://www.red9media.com/courses/director-mv01.html">Music Video Director #1 </A><LI><A

href="http://www.red9media.com/courses/director-mv02.html">Music Video Director #2</A><LI><A

href="http://www.red9media.com/courses/director-comm01.html">Commercials Director #1</A><LI><A

href="http://www.red9media.com/courses/director-comm02.html">Commercials Director #2</A><LI><A

href="http://www.red9media.com/courses/freelance-pd01.html">Freelance Producer Director</A><LI><A

href="http://www.red9media.com/courses/director-viral.html">Viral Director workshop</A><LI><A

href="http://www.red9media.com/courses/director-actor-workshops01.html">Directing Actors #1</A><LI><A
href="http://www.red9media.com/courses/director-actor-workshops02.html">Directing Actors #2</A><LI><A

href="http://www.red9media.com/courses/actor-workshops01.html">Actors workshops</A> <LI><A
href="http://www.red9media.com/courses/screenwriting01.html">Screenwriting #1 - The short</A> <LI><A
href="http://www.red9media.com/courses/screenwriting02.html">Screenwriting #2 - The feature length screenplay</A> <LI><A
href="http://www.red9media.com/courses/filmmaker-intro.html">Introduction to filmmaking</A> <LI><A href="http://www.red9media.com/intern01.html">The

production Internship</A><LI><A href="http://www.red9media.com/courses/edit-avid01.html">Desktop Editing for Avid Xpress pro #1 </A><LI><A

href="http://www.red9media.com/courses/edit-fcp01.html">Desktop Editing
for Final Cut Pro #1</A>

You could try IE6 specific comments - haven't tried that

07-29-2007, 04:33 PM
IE = S**t basically

Yeah there is a solution... and it might seem incredibly stupid but then again we are dealing with the worst browser EVER.

Go through all the links in the nav bar (in the HTML) and add a space after the text (before </a>)
For example:

<li><a href="courses/freelance-pd01.html">Freelance Producer Director</a></li>


<li><a href="courses/freelance-pd01.html">Freelance Producer Director </a></li>

Notice the space after Director.

Simple as!


07-29-2007, 04:45 PM

If that's it then a) wicked and b) that's crap

Ah well never mind 'ay

But cheers a million


07-30-2007, 05:26 AM
/*hide from IE Mac\*/
* html .nav li, * html .nav li a {
/*end hide*/
That should work and IMO is a more elegant solution.