PDA

View Full Version : IE6 Issues - ul, li, a



chadsxe
Apr 21st, 2010, 07:49 PM
Hi,

I am having some issues with IE6 and getting my list to work proper. I am using a ul and li to create a few links. Everything is checking out in all my browser test's except for IE6.

Issues...

1) None of my css rollovers are working.
2) When I hover over the first link in my ul I get an unexpected drop with the container directly below it.
3) I am getting an extra bottom margin of about 2-4px when I am hovering over an li in the ul.

Kind of hard to explain in text so this is the direct link...

IE 6 Issues Link (http://chadramos.net/_video/video.php)

Also, this is the relavent css code..
@charset "utf-8";

#mainContent #video {
background-color: #A9B9AE;
width: 640px;
height:385px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 2px solid #241B1E;
}

/*------------------------------------------------------*/
/* Video Styles */
/*------------------------------------------------------*/
#videoThumbs {
margin-left: 30px;
margin-top: 20px;
}
#videoThumbs ul {
float: left;
width: 100%;
}
#videoThumbs li {
height: 194px;
width: 310px;
margin-bottom: 20px;
list-style: none;
float: left;
}
#videoThumbs a {
width: 100%;
height: 100%;
display: block;
}
/*-----------*/
/* colorAdd1 */
/*-----------*/
#videoThumbs #colorAdd1 {
background: url(../_images/_video/colorAdd1Rollover.jpg) top left no-repeat;
display: block;
}
#videoThumbs #colorAdd1:hover {
background-position: bottom left;
}
/*-----------*/
/* colorAdd2 */
/*-----------*/
#videoThumbs #colorAdd2 {
margin-left: 20px;
background: url(../_images/_video/colorAdd2Rollover.jpg) top left no-repeat;
display: block;
}
#videoThumbs #colorAdd2:hover {
background-position: bottom left;
}

/*-----------*/
/* writeOn */
/*-----------*/
#writeOn {
background: url(../_images/_video/writeOnRollover.jpg) top left no-repeat;
display: block;
}
#writeOn:hover {
background-position: bottom left;
}

/*-----------*/
/* polaroid */
/*-----------*/
#polaroid {
margin-left: 20px;
background: url(../_images/_video/polaroidRollover.jpg) top left no-repeat;
display: block;
}
#polaroid:hover {
background-position: bottom left;
}

Any suggestions would be great.

Regards

Chad

SB65
Apr 21st, 2010, 08:21 PM
1. IE6 does not natively support :hover on anything except anchor (a) elements. Google IE6 hover fix or try this widget (http://www.xs4all.nl/~peterned/csshover.html).

2 and 3. You have #videoThumbs li set to 194px high, containing #videoThumbs a which has a height of 100%. When you hover, you're adding a 1px border at the bottom, which means #videoThumbs li isn't big enough to contain #videoThumbs, and in IE6 it expands by 1px pushing everything down. One way of fixing this would be to increase the height of #videoThumbs li to 195px and setting #videoThumbs a to a height of 194px, giving you the space to add the extra border on hover. There are a few other options as well.

chadsxe
Apr 21st, 2010, 08:43 PM
@SB65

Makes sense now that I realize I had to account for that border.

Regards

Chad