doctype kills my code, but it validates

simon551

07-20-2007, 09:12 PM

This is my code which validates at w3.org/validator. The problem I am having is that in IE7 the link does not become active unless you point directly at the text. the entire link box should act as a link, which it does in FF and also if I take out the <doctype> declaration. I've tried this in XHTML strict and transitional but nothing except no doctype declaration at all seems to let my menu work the way I want it to. Any idea why?

#menu ul {
margin: 0px;
padding: 0;
list-style: none;
width: 155px;
border-bottom: 1px solid #ccc;
}

#menu ul li {
position: relative;
}

#menu li ul {
position: absolute;
right: 154px;
top: 0;
display: none;
}

#menu ul li a {
display: block;
text-decoration: none;
/* color: #333;
*/
color:#564b47;
background-color: #FFFFFF;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
cursor: pointer;
}
#menu li:hover ul, li.over ul {
display: block;
cursor: pointer;
}
#menu ul a:hover, #menu ul a:focus
{
background-color: #EEE;
cursor: pointer;

}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

simon551

07-20-2007, 09:28 PM

left out the rest of the code on accident.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/* CSS Document */
#menu ul {
margin: 0px;
padding: 0;
list-style: none;
width: 155px;
border-bottom: 1px solid #ccc;
}

#menu ul li {
position: relative;
}

#menu li ul {
position: absolute;
right: 154px;
top: 0;
display: none;
}

#menu ul li a {
display: block;
text-decoration: none;
/* color: #333;
*/
color:#564b47;
background-color: #FFFFFF;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
cursor: pointer;
}
#menu li:hover ul, li.over ul {
display: block;
cursor: pointer;
}
#menu ul a:hover, #menu ul a:focus
{
background-color: #EEE;
cursor: pointer;

}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
</style>
</head>

<body>
<div id="menu">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li>
<a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Menu Item 1, 1</a></li>
<li><a href="#">Menu Item 1, 2</a></li>
<li><a href="#">Menu Item 1, 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>
</div>

</body>
</html>

_Aerospace_Eng_

07-20-2007, 11:04 PM

For display:block to work properly in IE the element needs to have a set width. Add
width:143px
to #menu ul li a.

phill_ridout

07-20-2007, 11:05 PM

it works perfect for me in ie and ff.

The only thing i can think of is that maybe your missing a speachmark sum where or something similar ?!? I cant spot one.

simon551

07-21-2007, 01:23 AM

For display:block to work properly in IE the element needs to have a set width. Add
width:143px
to #menu ul li a.

That works! Thank you very much!