Gaps in nav include IE6

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

Avick -> Gaps in nav include IE6 (9/15/2005 7:25:35)
I am having a problem that I just can’t seem to resolve no matter how hard I try. I am running a page include for my sites navigation structure. It is formatted using an external style sheet. All the styles are working as expected; colours and so on. My problem is spacing in Internet Explorer. While the nav menu looks exactly as expected in FireFox; there are big gaps between the links when I view it in Internet Explorer. I have tried margin setting, padding and god knows what else but I can’t get rid of the gaps in Internet Explorer. This is driving me nuts.[:@] Link: www.hairways.ie I am using lists (ul li) for my nave menu.

Tailslide -> RE: Gaps in nav include IE6 (9/15/2005 7:44:01)

Hi Alan

This appears to be the IE whitespace bug.

There are a couple of clever ways round it - none of which I can recall off the top of my head at the moment.

So in the absence of a really smart cure - he's a not so smart one that still works!

Do this in your HTML:

<ul class="leftlist1">
		<li><a href="http://www.hairways.ie/" class="navlink">Home Page</a></li><!-- 
		--><li><a href="http://www.hairways.ie/shophistory.htm" class="navlink">Barber History</a></li><!-- 
		--><li><a href="http://www.hairways.ie/pricelist.htm" class="navLink">Price List</a></li><!-- 
		--><li><a href="http://www.hairways.ie/map.htm" class="navLink">Map to Shop</a></li><!-- 
		--><li><a href="http://www.hairways.ie/photos.htm" class="navLink">Shop Photos</a></li><!-- 
		--><li><a href="http://www.hairways.ie/profile.htm" class="navLink">Profile</a></li><!-- 
		--><li><a href="http://www.hairways.ie/contactus.htm" class="navLink">Contact us</a></li><!-- 
		--><li><p class="navtitle">Other Links</p></li><!-- 
		--><li><a href="http://www.hairways.ie/airlines.htm">Airline Links</a></li><!-- 
		--><li><a href="http://www.hairways.ie/fslinks.htm">Flight Sim Links</a></li><!-- 
		--><li><a href="http://www.hairways.ie/fun/">Fun Photos</a></li><!-- 
		--><li><p class="navtitle">My flight Sim</p></li><!-- 
		--><li><a href="http://www.hairways.ie/flights/index.htm">My Flight Plans </a></li>
		</ul>

What you've added is a comment start tag after the end of one <li> and a comment end tag before the start of the next <li> Basically you're getting rid of the whitespace - IE will think it's all on one line. Of course you could just put all the <li>s on one line but it makes it hard to edit doing it that way.

I tried this locally and it works on my PC.

Edit: Here's a link to the smartypants solution (which I'm too lazy to use!): Whitespace Bug Fix

PS: What happens if someone doesn't like their haircut - do they file a Hair Accident Report with the Hair Accident Investigation Branch?

womble -> RE: Gaps in nav include IE6 (9/15/2005 8:23:22)
quote: PS: What happens if someone doesn't like their haircut - do they file a Hair Accident Report with the Hair Accident Investigation Branch? No smart answers to the problem from me I'm afraid; but is a near-miss a close shave? [sm=lol.gif]

Tailslide -> RE: Gaps in nav include IE6 (9/15/2005 8:31:07)
If you're standing in a strong wind with your hair billowing behind you - is that a Hair Speed Indicator? Are splint ends the same thing as Hair Brakes?

Avick -> RE: Gaps in nav include IE6 (9/15/2005 9:21:07)
[:D][:D][:D][:D][:D][:D][:D] You may not belive this but I haven't heard them before. Top quality Have a look at the fun page: http://www.hairways.ie/fun/ As for my problem. I will give it a go and get back to you chaps.

Avick -> RE: Gaps in nav include IE6 (9/15/2005 9:40:04)
Thanks for the help Tailslide I put the following hack in and its sorted. /* Hide this from IE-Mac \/ html #hacked-li li { height: 1px; } /* End the hiding */ Not as good as FireFox but better then before. Thanks again

Page: [1]

0.09375