Forums

keithybhoy

Hi,

I'm having difficulty getting the following to work in IE6.

Here's a link to the sample page: http://www.keithlogan.co.uk/howard/

I'm using transparent PNG files to give the appearance of rollerovers in the list below. IE6 seems to be the only browser that doesn't support that. What is the best solution to get this working in IE6?

Thanks

=======
Sample code:

<div class=\"leftcol\">
      <ul>
        <li><a href=\"carsales.htm\">Used Car Sales</a></li>
        <li><a href=\"services.htm\">Servicing &amp; Repairs</a></li>
        <li><a href=\"services.htm\">Air Conditioning &amp; Diagnostics</a></li>
        <li><a href=\"services.htm\">MOT Testing</a></li>
        <li><a href=\"services.htm\">Clutch, Brake, Exhausts &amp; Tyres</a></li>
        <li><a href=\"services.htm\">All parts &amp; accessories</a></li>
        <li><a href=\"services.htm\">Recovery</a></li>
        <li><a href=\"services.htm\">Car Valeting</a></li>
        <li><a href=\"services.htm\">Friendly Service &amp; Advice</a></li>
      </ul>
      
    </div>

and my CSS:

.leftcol {
	width:280px;
	min-height: 260px;
	float:left;
	margin-top: 40px;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
	line-height: 18px;
	background-image: url(../images/services_bg.jpg);
	background-repeat: repeat-x;
	padding-top: 35px;
	display: inline;
} 
.leftcol ul {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	color: #2E3192;
}
.leftcol li {
	height: auto;
	list-style-type: none;
	margin-bottom: 5px;
	margin-left: 5px;
}
.leftcol li a {
	text-decoration: none;
	background-image: url(../images/rect_trans.png);
	background-repeat: no-repeat;
	display: block;
	height: 20px;
	color: #2E3192;
	padding-left: 5px;
}
.leftcol a:hover {
	background-image: url(../images/rect_trans_over.png);
	background-repeat: no-repeat;
	color: #FFFFFF;
	height: 20px;
}

keithybhoy

Sorry, forgot to mention that I've tried using the following but with no success: http://www.xs4all.nl/~peterned/csshover.html

Sure there is an obvious fix for this but I'm new to this so kind of struggling.

Thanks

Robskiwarrior

firstly - transparent 32bit and 24bit PNGs arnt supported in IE6 - 8bit are though (I think - yes im sure) but they dont render very well... Also IE6 wont support :hover on anything other than a link by default...

ANYWAY

There is an option here:

http://code.google.com/p/ie7-js/

This will fix the hover and the transparency issues. just rename your transparent pngs with "-trans.png" at the end and they will be picked up by the script.

All the instructions are on the page just give it a read through and see how you get on :)

keithybhoy

Hi Rob,

Issue solved, thanks very much :D

Keith

treehouse : what would you like to learn today?

Forums

Transparent PNG a:hover issues in IE6