IE6 with css and html worries

**starson** · May 16 '07, 06:24 PM

and here is some markup.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>xcx</title>
<style type="text/css">

</style>




<style type="text/css">
@import url("css/menu.css");
</style>

</head>

<body>

<div align="center">
</div>
<div align="center"> <img src="images/image001.jpg" alt="office image 1" name="Chicago" width="80" height="80" hspace="10" vspace="10" id="Chicago" />
<img src="images/image002.jpg" alt="office image 2" name="London" width="80" height="80" hspace="10" vspace="10" id="London" />
<img src="images/image003.jpg" alt="office image 3" name="LA" width="80" height="80" hspace="10" vspace="10" id="LA" />
<img src="images/image004.jpg" alt="office image 4" name="Munich" width="80" height="80" hspace="10" vspace="10" id="Munich" />
<img src="images/image005.jpg" alt="office image 5" name="NY" width="80" height="80" hspace="10" vspace="10" id="NY" />
<img src="images/image006.jpg" alt="office image 6" name="SF" width="80" height="80" hspace="10" vspace="10" id="SF" />
<img src="images/image007.jpg" alt="office image 7" name="Washingto n" width="80" height="80" hspace="10" vspace="10" id="Washington " />
<img src="images/image008.jpg" alt="office image 8" name="HK" width="80" height="80" hspace="10" vspace="10" id="HK" /></div>
<p align="center" class="style5">  </p>

<div id="menu">
<ul>
<div id="left">I.</div>
<li><a href="I.html" id="I." class="x">SPA</a><ul>
<div id="leftcontent ">1.</div>
<li><a href="documents/I.01.PDF" id="124</a></li>
<div id="leftcontent ">2.</div>
<li><a href="documents/I.02.PDF" id="111</a></li>
<div id="leftcontent ">3.</div>
<li><a href="documents/I.03.PDF" id="122</a></li>
<div id="leftcontent ">4.</div>
<li><a href="documents/I.04.PDF" id="121">121</a></li>
<div id="leftcontent ">5.</div>
<li><a href="documents/I.05.PDF" id="123">123</a></li>
</ul>
</li>

css:
/* CSS Menus - Vertical CSS Menu with Popout and Dropdown Menus - 20050131 */

*{margin:0;padd ing:0;border:no ne;}

body{margin:0.5 em 0.5em 0.5em 1.0em;font-size:100%;font-family:"Times New Roman", Times, serif;}

/* Begin CSS Popout Menu */

#left{
float: left; width: 7%;
top:22em;
font:bold .9em times new roman,arial,hel vetica,sans-serif;
color:#FFFFFF;
background:#666 666;
text-decoration:none ;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 5px;
clear:both;
}

#leftcontent{
float: left; width: 7%;
top:22em;
font:bold .9em times new roman,arial,hel vetica,sans-serif;
color:#FFFFFF;
background:#9A9 A9A;
text-decoration:none ;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 5px;
clear:both;
}

#menu{
float:inherit;
top:22em;
left:0.5em;
z-index:2;
width:37%;
padding-bottom:12em; /* To allow room for bottom dropdown */
clear: both;
}

#menu a, #menu h2{
font:bold .9em times new roman,arial,hel vetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 5px;
overflow:hidden ;
}

#menu h2{
color:#fff;
background:#000 ;
text-transform:upper case;
}

#menu a{
color:#FFFFFF;
background:#9A9 A9A;
text-decoration:none ;
}

#menu a:hover{
color:#FFFFFF;
background:#9A9 A9A;
}

#menu a:active{
color:#FFFFFF;
background:#9A9 A9A;
}

#menu ul{
list-style:none;
margin:0;
padding:0;
width:30em;
}

/* Requirement: Put the element selector name (div)
onto non anchor hover selectors to force IE5 and
5.5 to correctly apply the csshover file. */

div#menu li, div#menu li:hover{
position:relati ve;
}

div#menu li ul{
position:absolu te;
top:0;
left:100.1%;
display:none;}

div#menu ul ul,
div#menu ul ul ul,
div#menu ul li:hover ul ul,
div#menu ul li:hover ul ul ul
{display:none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display:block; }

/* End non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
background:#666 666;
}

#menu a.x:hover{
color:#a00;
background:#ddd ;
}

#menu a.x:active{
color:#060;
background:#ccc ;
}

/* Begin Content Area */

#content{margin :0 0 0 10em;padding:0. 5em;border:1px solid #000;}
#content a:link{color:#a 00;}
#content a:visited{color :#a00;}
#content a:hover{color:# a00;background: #eee;}
#content a:active{color: #060;background :#ddd;}
#content h1, #content h2, #content h3{font:bold 1.0em arial,sans-serif;margin:0. 5em 0.25em;padding: 0;}
#content img{border:none ;}
#content p{font:normal 0.8em/1.5em verdana,sans-serif;margin:1. 0em;}
#content ul, #content ul ul{font:normal 0.9em/1.4em verdana,tahoma, arial,sans-serif;margin:1. 0em 4.0em 1.5em 4.0em;}
#content ul li{font:normal 0.9em/1.4em verdana,tahoma, arial,sans-serif;margin:1. 0em 0;}
#content ul ul li{font:normal 1.1em/1.6em verdana,tahoma, arial,sans-serif;margin:0; }
#content .fr{float:right ;margin:0 0 1.0em 1.0em;}
#content .mod{font:norma l .6em arial,sans-serif;margin:.2 5em;}
div.vv{position :relative;top:0 ;float:right;ma rgin:0 0 15px 15px;}

/* End Content Area */

**drhowarddrfine** · May 16 '07, 06:36 PM

One quick observation, though it's mentioned in the comments about IE5, :hover doesn't work on anything but anchors in IE6, too.

**starson** · May 16 '07, 06:40 PM

ok. is there a fix? anything i can do?

thanks for the first tip...

**drhowarddrfine** · May 16 '07, 09:00 PM

Haven't looked at this and it may be too late for you. We usually get around IEs bug by wrapping the element in an anchor. It isn't always as simple as just putting a <a> at the front of it, though.

IE6 with css and html worries

IE6 with css and html worries

Comment

Comment

Comment

Comment