Hi,
I have create a dropdown menu which looks as expected in Safari (Mac).
Viewing it in FF (Mac) or IE6 (Windows) it's a bit messed up.
It also seems that when the top level links are clicked (#nogo) the whole structure collapses.
I'm staring to this code for hours now, but I can't figure out why it is not cross-browser, compatible, valid etc.
Could someone please take a look at the code and provide suggestions how to improve it.
Thank you very much.
Aad
[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>Untitl ed Document</title>
<style type="text/css">
/* ----------------------------- CSS starts here ----------------------------- */
.menu {
width:500px;
height:50px;
position:relati ve;
margin-top: 2em;
margin-right: 0px;
margin-bottom: 0;
margin-left: 225px;
z-index: 1000;
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 20px;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relati ve;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
font-family: verdana, arial, sans-serif;
display:block;
text-decoration:none ;
width:110px;
height:1.5em;
font-weight:bold;
color:#BBBBBB;
border-bottom:8px solid #BBBBBB;
background:#fff ;
padding-left:0px;
line-height:.5m;
margin-right:5px;
list-style-type: none;
list-style-image: none;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collap se;
font-size:1em;
}
/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color: #01A0C7;
border-bottom:8px solid #01A0C7;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolu te;
top:1em;
margin-top:11px;
width:108px;
border:1px solid #01A0C7;
border-top:0;
background-color: #FFFFFF;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background-color: #FFFFFF;
border:0;
margin:0;
color:#BBBBBB;
font-weight:bold;
font-size: 12px;
height:auto;
line-height:1em;
padding:5px;
width:96px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#01A 0C7;
color:#fff;
width: 99px;
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd ;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="drop" href="http://www.samplesite1 23.com" title="Back to Homepage"> Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Pa rts<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><t d>
<ul>
<li><a href="page1.htm l" title="Sample page 1">Page 1</a></li>
<li><a href="page2.htm l" title="Sample page 2">Page 2</a></li>
<li><a href="page3.htm l" title="Sample page 3">Page 3</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Pa rts (2)<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><t d>
<ul>
<li><a href="page4.htm l"title="Sam ple page 4">Page 4</a></li>
<li><a href="page5.htm l" title="Sample page 5">Page 5</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Pa rts (3)<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><t d>
<ul>
<li><a href="page6.htm l" title="Sample Page 6">Page 6</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
[/HTML]
I have create a dropdown menu which looks as expected in Safari (Mac).
Viewing it in FF (Mac) or IE6 (Windows) it's a bit messed up.
It also seems that when the top level links are clicked (#nogo) the whole structure collapses.
I'm staring to this code for hours now, but I can't figure out why it is not cross-browser, compatible, valid etc.
Could someone please take a look at the code and provide suggestions how to improve it.
Thank you very much.
Aad
[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>Untitl ed Document</title>
<style type="text/css">
/* ----------------------------- CSS starts here ----------------------------- */
.menu {
width:500px;
height:50px;
position:relati ve;
margin-top: 2em;
margin-right: 0px;
margin-bottom: 0;
margin-left: 225px;
z-index: 1000;
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 20px;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relati ve;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
font-family: verdana, arial, sans-serif;
display:block;
text-decoration:none ;
width:110px;
height:1.5em;
font-weight:bold;
color:#BBBBBB;
border-bottom:8px solid #BBBBBB;
background:#fff ;
padding-left:0px;
line-height:.5m;
margin-right:5px;
list-style-type: none;
list-style-image: none;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collap se;
font-size:1em;
}
/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color: #01A0C7;
border-bottom:8px solid #01A0C7;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolu te;
top:1em;
margin-top:11px;
width:108px;
border:1px solid #01A0C7;
border-top:0;
background-color: #FFFFFF;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background-color: #FFFFFF;
border:0;
margin:0;
color:#BBBBBB;
font-weight:bold;
font-size: 12px;
height:auto;
line-height:1em;
padding:5px;
width:96px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#01A 0C7;
color:#fff;
width: 99px;
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd ;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="drop" href="http://www.samplesite1 23.com" title="Back to Homepage"> Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Pa rts<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><t d>
<ul>
<li><a href="page1.htm l" title="Sample page 1">Page 1</a></li>
<li><a href="page2.htm l" title="Sample page 2">Page 2</a></li>
<li><a href="page3.htm l" title="Sample page 3">Page 3</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Pa rts (2)<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><t d>
<ul>
<li><a href="page4.htm l"title="Sam ple page 4">Page 4</a></li>
<li><a href="page5.htm l" title="Sample page 5">Page 5</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Pa rts (3)<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><t d>
<ul>
<li><a href="page6.htm l" title="Sample Page 6">Page 6</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
[/HTML]
Comment