View Full Version : image rollover messed up in IE, OK in FF

05-02-2006, 04:49 AM
Heya guys, I'm kinda baffled by this...everything's working ok on FF but it screws up the menu on IE. I tried adding "no-repeat" to the images but no change there, as it seems that each image per link is being repeated. Any apparent solutions to this? Your help is greatly appreciated!!!

Cat :)


/* CSS - coded by Catalina Villegas @ www.unapluma.net and www.darcywretzky.org */

/* --HTML and BODY Information-- */

body {
font-family: verdana; font-size: 10px;
background: #FFFFFF url("images/header.jpg") no-repeat right top fixed;
height: 540px; width: 822px;

/* --Menu and Links-- */

#menu a { position: absolute; text-decoration: none; top: 407px; height: 83px; }

#menu a i { visibility: hidden; }

a#home { background-image: url("images/menu/white/w_home.jpg"); right: 394px; width: 18px; }
a#info { background-image: url("images/menu/white/w_info.jpg"); right: 412px; width: 14px; }
a#www { background-image: url("images/menu/white/w_www.jpg"); right: 426px; width: 13px; }
a#community { background-image: url("images/menu/white/w_community.jpg"); right: 439px; width: 15px; }
a#gallery { background-image: url("images/menu/white/w_gallery.jpg"); right: 454px; width: 15px; }
a#darcy { background-image: url("images/menu/white/w_darcy.jpg"); right: 469px; width: 14px; }

a#home:hover { background-image: url("images/menu/color/color_home.jpg");}
a#info:hover { background-image: url("images/menu/color/color_info.jpg"); }
a#www:hover { background-image: url("images/menu/color/color_www.jpg"); }
a#community:hover { background-image: url("images/menu/color/color_community.jpg"); }
a#gallery:hover { background-image: url("images/menu/color/color_gallery.jpg"); }
a#darcy:hover { background-image: url("images/menu/color/color_darcy.jpg"); }

a#darcy:hover { border: none; }

05-02-2006, 05:01 AM
Get rid of this line

<?xml version="1.0" encoding="iso-8859-1"?>
its messing up IE. Then instead of visiblity:hidden; for your <i> tag use display:none

#menu a i { display: none; }

05-02-2006, 05:06 AM
oh wow that did the trick! thanks so much. mind explaining to me why this worked? you're good!

05-02-2006, 05:14 AM
okay now i'm noticing something else. in IE the rollovers aren't showing up, and the images seem to be moving when i hover over them. in FF it's perfect.
do you notice this as well?

05-02-2006, 05:18 AM
They show up. They just have to load first. I don't recommend using absolute positioning to position them though. Search for flicker free CSS rollovers. Changing it from visibility to display works because visibility still allows the <i> tags to take up space where as display:none; doesn't even display them.

05-02-2006, 05:37 AM
ok...i added a little preloading script and that solved the problem :)