CSS and IE bugs *sigh*

[jessnoonyes]

I don't understand why it's not working in IE. I have a CSS photogallery that enlarges thumbnails when you hover the mouse over them, and it looks great in FireFox. But the whole thing is wrecked in IE. Anyone have any idea why? I can post the code if you need

[jessnoonyes]

Ha. Sorry, forgot to link to my site. It's http://www.oregonblackbook.com/farms/gallery1.htm

The CSS code is:
.menu2 {
font-family: verdana, arial, sans-serif;
width:601px;
height:401px;
background:#636563 url(picts/urn1.gif);
background-repeat: no-repeat;
margin:0 auto;
position:relative;
z-index:1;
border:1px solid #bd8d5e;
}
.menu2 dl {
font-family:verdana, arial, sans-serif;
font-size:0.9em;
position:absolute;
width:400px;
top:60px;
left:80px;
}
.menu2 dl dt {font-size:1.2em; margin-bottom:2em; font-weight:bold; color:#fff;}

.menu2 dl dc {font-size:1em; margin-bottom:2em; font-weight:normal; color:#fff;}
.menu2 dl dd { padding:0; margin:0; line-height:1.7em; margin-bottom:2em;}
.menu2 dl dd:first-letter {font-weight:bold;}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu2 ul {
padding:0;
margin:0;
list-style-type: none;
border:0;
}
/* float the list so that the items are in a line */
.menu2 ul li {
float:left;
}
/* style the links to be 233px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu2 ul li a, .menu2 ul li a:visited {
display:block;
float:left;
text-align:center;
text-decoration:none;
width:199px;
height:31px;
color:#fff;
border-right:1px solid #bd8d5e;
background:#BDBE8C;
line-height:30px;
font-size:11px;
}
.menu2 ul li a.last, .menu2 ul li a.last:visited {
border-width:0;
}

/* make the dropdown ul invisible */
.menu2 ul li ul {
display: none;
}
/* clear the link floats at the end of each line so that IE gets it right */
span.clr {display:block; clear:both; width:0; height:0; font-size:0; line-height:1px;}



/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu2 ul li:hover a{
color:#fff;
background:#B52021;
}
/* make the sub menu ul visible and position it beneath the first list item */
.menu2 ul li:hover ul {
text-align:left;
display:block;
position:absolute;
top:31px;
left:0;
}
/* make the sub menu ul li the full width with padding and border. */
.menu2 ul li:hover ul li {
width:400px;
height:230px;
border:0px solid #dfc184;
background:#636563 url(../lbox/click.gif) top center no-repeat;
color:#000;
position:relative;
padding:50px 90px;
cursor:pointer;
}

/* style the initial image size 100px x 75px no border and 5pixel padding */
.menu2 ul li:hover ul li a img {
width:100px; height:80px;
border:0; margin:5px;
}

/* style the size, background color, border and margin of the submenu links */
.menu2 ul li:hover ul li a {
float:left;
width:110px;
height:90px;
background:#eee;
border:1px solid #888;
margin:6px;
}
/* style position of the links on hover */
.menu2 ul li:hover ul li a:hover {
position:relative;
}
/* keep the large image hidden with a position absolute to take it out of the page flow */
.menu2 ul li:hover ul li a img.bigger {
visibility:hidden; position:absolute; z-index:0;}

/* style the 2x size image on hover with an absolute position to place it centrally over the original image */
.menu2 ul li:hover li a:hover img {
width:300px; height:250px;
position:absolute;
left:-50px; top:-38px;
border:0;
border:1px solid #888;
padding:5px;
background:#ccc;
}
/* give the link focus/active state a relative position and remove the focus/active border so that it doesn't spoil the large image */
/* active img for Opera (and Safari thanks to Anonymous Coward) and focus for Firefox */
.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {
background:#aaa;
position:relative;
outline:none;
}

/* make the large image visible and give it an absolute position, set the padding and margin, use the default pointer */
.menu2 ul li:hover ul li a:active img.bigger, .menu2 ul li:hover ul li a:focus img.bigger {
visibility:visible;
background:#ddd;
position:absolute;
width:640px;
height:480px;
z-index:200;
padding:5px;
border:1px solid #888;
cursor:default;
}

[TDPSS]

O'Reilly has a new book titled "CSS - The Missing Manual" by David McFarland. The book contains a lot of IE workarounds. Apparently CSS has a lot of issues with IE. I use Firefox myself, but I know one has to accommodate the major browsers in use.

Anyway, check out the following site for details on the book.

www.sawmac.com/missing/css/tutorials/index.php

-Dennis:)

[pentace]

Css yay. Ie boo. Think its due to the lack of hover support for ie. Try searching for hover.htc. Or a js for it but htc if a better choice has full support.

[itrana123]

This issue is ever irritating and disgusting. I am really bother of this. I love CSS and I hate IE.

[jessnoonyes]

Thanks guys, I'll try to find a work around for it. Just hoped someone might have the answer off the top of their head. I agree, IE sucks and I don't know why anyone even uses it.

[Ferret]

I agree, IE sucks and I don't know why anyone even uses it.

Those who don't know any better use whatever comes on their computers. They might upgrade their programs from time to time, but most IE users just don't know any better.

[WebJoel]

There are some errors. :o