...

View Full Version : doctype kills my code, but it validates



simon551
07-20-2007, 10: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, 10: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-21-2007, 12:04 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.

phill_ridout
07-21-2007, 12:05 AM
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, 02: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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum