Forum Moderators: not2easy
everything works fine except in IE on my work laptop. I load the page, the buttons are there and when I mouseover they disappear.
What can I do to persuade IE to play fair? This is my button code.
a.button, a.buttonDis {
background-color: transparent;
background-image: url(cssButtonsFiles/buttonBackground.gif);
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
a.button:link, a.button:visited {
color: #002577;
}
a.button:hover, a.button:active {
background-position: 0 -36px;
color: #ff7200;
}
a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {
background-position: 0 -72px;
color: #5f5f5f;
}
.icon {
padding: 0 1em;
}
a.button:hover .icon, a.button:active .icon {
background-position: 0 -28px;
}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {
background-position: 0 -56px;
}
#buttonOK .icon {
background-image: url(ok.gif);
}
#buttonCancel .icon {
background-image: url(cancel.gif);
}
#buttonImport .icon {
background-image: url(import.gif);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="navBar">
<a href="index.html" class="buttonDis" id="buttonImport" title="This is the current page"><span class="icon">Home</span></a>
<a href="gettingHere.htm" class="button" id="buttonOK"><span class="icon">Getting Here</span></a>
<a href="availabilityPrice.htm" class="button" id="buttonOK"><span class="icon">Availability</span></a>
<!-- <a href="gallery.htm" class="button" id="buttonOK"><span class="icon">Gallery</span></a> -->
<a href="contact.htm" class="button" id="buttonOK"><span class="icon">Contact</span></a>
<a href="thingsToDo.htm" class="button" id="buttonOK"><span class="icon">Things to do</span></a>
</div><!--end navBar div-->
But, you have a number of Anchors with the same Id (id="buttonOK") causing the code not to validate, this may be throwing a spanner in the works.
which IE version, is this a temporary "flicker" or does the background image disappear completely, does the text stay?
it could be a the IE conflict with background positions, or you could try and put the
#buttonOK .icon {
background-image: url(ok.gif);
}
#buttonCancel .icon {
background-image: url(cancel.gif);
}
#buttonImport .icon {
background-image: url(import.gif);
}
code before the
.button:hover .iconwhen you do change them to classes you would put the two classes in the one attribute
e.g.
<a href="#" class="button" id="buttonOK">
would become:
<a href="#" class="button buttonOK">
that way the buttonOK class would still be more specific that the button as per the cascade.
anyway if you can strip the code and provide an example with background color that might help, although I suspect that a background color might actually fix the problem as that's a common IE problem too :o
It all works well in linux & windows, IE7, a 'standalone version of ie6, opera, firefox and safari. I could get to like this! Now for the 'acid test' - loading it up to the web and trying it on my works outdated and miserable version of ie6. If it works there, it will work anywhere.
maxie
