Help with CSS for images in IE6

9/06/2010 11:40 am | #1 iainmacdonald331081

I've managed to adapt a menu to use images in a menu, using the following CSS and HTML :

CSS :

ul#cssmw li a.home {
background-image:url(../../images/navbar/home1.jpg);
background-repeat:no-repeat;
width:164px;
}
ul#cssmw > li:hover > a.home {
background-image:url(../../images/navbar/home2.jpg);
background-repeat:no-repeat;
width:164px;
}
ul#cssmw > li > a.about {
background-image:url(../../images/navbar/about1.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li:hover > a.about {
background-image:url(../../images/navbar/about2.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li > a.publications {
background-image:url(../../images/navbar/publications1.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li:hover > a.publications {
background-image:url(../../images/navbar/publications2.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li > a.awards {
background-image:url(../../images/navbar/awards1.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li:hover > a.awards {
background-image:url(../../images/navbar/awards2.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li > a.trade {
background-image:url(../../images/navbar/trade1.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li:hover > a.trade {
background-image:url(../../images/navbar/trade2.jpg);
background-repeat:no-repeat;
width:163px;
}
ul#cssmw > li > a.contact {
background-image:url(../../images/navbar/contact1.jpg);
background-repeat:no-repeat;
width:164px;
}
ul#cssmw > li:hover > a.contact {
background-image:url(../../images/navbar/contact2.jpg);
background-repeat:no-repeat;
width:164px;
}

HTML :

<ul class="level-0" id="cssmw">
<li class="parent"><a class="home" href="#">&nbsp;</a></li>
<li><a class="about" href="#">&nbsp;</a>
<ul class="level-1">
	<li><a href="#">The Team</a></li>
	<li><a href="#">The Awards Judges</a></li>
	<li><a href="#">Preferred Tour Operators</a></li>
	</ul>	
</li>
<li><a class="publications" href="#">&nbsp;</a>
	<ul class="level-1">
	<li><a href="#">View the Trade Directory</a></li>
	<li><a href="#">Order the Trade Directory</a></li>
	<li><a href="#">View the Consumer Directory</a></li>
    <li><a href="#">View the 2009 Directory</a></li>
	<li><a href="#">Inclusion Options</a></li>
	</ul>	
</li>
<li><a class="awards" href="#">&nbsp;</a>
	<ul class="level-1">
	<li><a href="#">The Voting Process</a></li>
	<li><a href="#">Voting Guidelines</a></li>
	<li><a href="#">Winners and Finalists</a></li>
    <li><a href="#">Nominees</a></li>
    <li><a href="#">Travel Professionals Vote</a></li>
    <li><a href="#">Travellers Vote</a></li>
    <li><a href="#">The Awards Judges</a></li>
    <li><a href="#">The Awards Sponsors</a></li>
    <li><a href="#">The Awards Gala Ceremony</a></li>
    <li><a href="#">The Awards Photo Gallery</a></li>
	</ul>	
</li>
<li><a class="trade" href="#">&nbsp;</a></li>
<li><a class="contact" href="#">&nbsp;</a></li>
</ul>

index.php

So good that that's all working OK.

I can't quite seem to get it right in IE6 though - any pointers on what the IE6 CSS needs to be would be much appreciated.

Also not quite sure why the two <divs> in my header <div> are sitting on top of each other, rather than side by side in IE6.

Thanks.

9/07/2010 11:06 am | #2 Jason ByrnesWebAssist

the path to the menuie.css file is wrong:

<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw/menu_ie.css");
</style>

<![endif]-->

should be changed to:

<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("../CSSMenuWriter/cssmw/menu_ie.css");
</style>

<![endif]-->

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Help with CSS for images in IE6

9/06/2010 11:40 am | #1 iainmacdonald331081