IE6 list nav problem

grahamor

Hi,

I have a left nav list of items that displays inside a div. The items are
being translated into numerous languages which causes problems in ie6 when there is a long word with no spaces

Here is my html

<div class="subnav">
    		   
<ul>
 <li id="hilight_main"><a href="main.asp?code=LON">Overview</a></li>
 <li id="hilight_courses"><a href="courses.asp?code=LON">Kurstyper</a></li>
 <li id="hilight_activities"><a href="activities.asp?code=LON">Sport och evenemang</a></li>
 <li id="hilight_accommodation"><a href="accommodation.asp?code=LON">Boende</a></li>
 <li id="hilight_prices"><a href="prices.asp?code=LON">Priser och datum</a></li>

</ul>

</div>

Here is my css

.subnav {
	padding: 0 0 10px 0;
	margin:0 0 22px 0;
	text-transform:uppercase;
	width:155px;
}

.subnav ul 
{
	padding:10px 0 0 0;
	margin:0;
	list-style:none;
	background: transparent bottom left repeat-y;
}

.subnav li
{
	border-bottom:1px solid #b9b8aa;
}

.subnav li a {
	display: block;
	text-decoration: none;
	padding:10px 20px;
	color:#735228;
	text-transform:uppercase;
}

.subnav li a:hover 
{
	background:#c9c8b8;
	text-decoration:none;
}

I have attached an image of what happens in IE6. The 'Der 'richtige kurs' text should be displayed at the top beside the menu but it's getting knocked down by the left nav.

Is there anyway to force the word onto a new line so this doesnt happen ?

Thanks

DJB

can you show us what it should look like also?

grahamor

Sure, see attached

DJB

Not sure if this will work but try adding overflow: hidden onto the subnav class. Also, is there a need to have padding right on .subnav li a ?

colm_c

There's no pure CSS way around this in IE without using some overflow: hidden or breaking the word up with a space or something.

You could probably do some javascript/DOM to calculate the width and add in space automatically if the word is too long.