Forum Moderators: not2easy
I have a quick question to all you CSS gurus.
I'm having issue with transparency images in both IE7 and Opera.
I've created a menu and used PNG image for the heading. Once you move the mouse over the heading, the whole image fills with the color of the actual drop down menu. I'm trying to get rid of that.
It looks like it's the transparency issue, because if I use transparent GIF or PNG issue appears. If JPG is used, no issue.
I don't really want to use JPG (if I don't have to) because I have gradient going on in the part portion, it will take too much time to redo everything.
Screenshot:
<snip>
Code:
**************index.html******************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/suckerfish.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/suckerfish.js"></script>
</head>
<body>
<div class="top_menu">
<ul class="suckerfish">
<li>
<a href="/login.php"><img src="images/top_menu/top_menu_01.png" alt="Sign In" width="42" height="28" border="0" /></a>
</li>
<li>
<a href=""><img src="images/top_menu/top_menu_02.png" alt="Products" width="71" height="28" border="0" /></a>
<ul >
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
and etc....
*******************************CSS*********************
/* --------------------------------------------------------------
* Website: <snip>
-------------------------------------------------------------- */
.suckerfish, .suckerfish ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
background-color: none;}
.suckerfish a {
display: block;
color: #272B2F;
border-style: none;
text-decoration: none;
}
.suckerfish li {
float: left;
padding: 0;}
.suckerfish li ul {
position: absolute;
left: -999em;
height: auto;
width:auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
margin: 0;}
.suckerfish li li {
width:14em;
display:block;
background-color:#F9F9F8;
border-color:#CCC;
border-style:solid;
border-width:0 1px 1px 1px;
padding:0;
margin:0; }
.suckerfish li ul a {
padding: .5em 0em .5em 1em ;
margin:0; }
.suckerfish li:hover ul ul, .suckerfish li:hover ul ul ul, .suckerfish li.sfhover ul ul, .suckerfish li.sfhover ul ul ul {
left: -999em; }
.suckerfish li:hover ul, .suckerfish li li:hover ul, .suckerfish li li li:hover ul, .suckerfish li.sfhover ul, .suckerfish li li.sfhover ul, .suckerfish li li li.sfhover ul {
left: auto;
z-index: 6000; }
.suckerfish li:hover, .suckerfish li.sfhover {
background:#F0F0ED; }
/* -------------------------------------------------------------- */
.dropdown, .dropdown ul {
float: right;
list-style: none;
/* ie hover hack (background) */
background:url(../images/top_menu/trans.gif);
padding: 0;
margin: 0; }
.dropdown a {
display: block;
color: #272B2F;
text-decoration: none; }
.dropdown li {
float: left;
padding: 0; }
.dropdown li ul {
position: absolute;
left: -999em;
height: auto;
width:auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
margin: 0 50px 0 0; }
.dropdown li li {
width:14em;
display:block;
background-color:#F9F9F8;
border-color:#CCC;
border-style:solid;
border-width:0 1px 1px 1px;
padding:0;
margin:0; }
.dropdown li ul a {
padding: .5em 0em .5em 1em ;
margin:0; }
.dropdown li:hover ul ul, .dropdown li:hover ul ul ul, .dropdown li.sfhover ul ul, .dropdown li.sfhover ul ul ul {
left: -999em; }
.dropdown li:hover ul, .dropdown li li:hover ul, .dropdown li li li:hover ul, .dropdown li.sfhover ul, .dropdown li li.sfhover ul, .dropdown li li li.sfhover ul {
left: auto;
z-index: 6000; }
.dropdown li:hover, .dropdown li.sfhover {
background:#F0F0ED; }
What do you think this issue could be? Anyone has a clue?
Any feedback would be appreciated!
Thank you!
[edited by: swa66 at 8:51 am (utc) on Oct. 9, 2009]
[edit reason] No links, please see ToS and forum charter [/edit]
Settings like
background:url(../images/top_menu/trans.gif);
background:#F0F0ED;
Aside of that transparent background images never work well in legacy IE versions, there is some help in a proprietary filter setting or in scripting, but I've yet to see something foolproof.
