By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,276 Members | 1,312 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,276 IT Pros & Developers. It's quick & easy.

Dropdown list not so crossbrowser

P: 1
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* ----------------------------- CSS starts here ----------------------------- */
.menu {
width:500px;
height:50px;
position:relative;
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:relative;
}

/* 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:collapse;
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:absolute;
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:#01A0C7;
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.samplesite123.com" title="Back to Homepage"> Home<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="#nogo">Parts<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="page1.html" title="Sample page 1">Page 1</a></li>
<li><a href="page2.html" title="Sample page 2">Page 2</a></li>
<li><a href="page3.html" title="Sample page 3">Page 3</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="#nogo">Parts (2)<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="page4.html"title="Sample page 4">Page 4</a></li>
<li><a href="page5.html" title="Sample page 5">Page 5</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="#nogo">Parts (3)<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="page6.html" 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]
Jul 16 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Validate your html and css for your list of errors to correct.
Jul 16 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.