Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Cross browser menu border problem 2

Status
Not open for further replies.
k4ghg

k4ghg

Technical User
Dec 25, 2001
191
US
Hi - I am working on a menu and have incountered a prblem with the border. The code works fine in FF, but not in IE 6. Any suggestions would be appreciated. Thanks...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns=" xml:lang="en" lang="en">
<head>
<title>Test Menu</title>

<style type="text/css">
* {
padding: 0;
margin: 0;
}

#menu {
display:block;
font-weight: bold;
top:8em;
left:1em;
position:fixed;
border:1px solid #888;
width:99px;
text-align:center;
font-size: 80%;
font-weight:bold;
text-decoration:none;
list-style: none;
padding:0;
}

* html #menu {
position:absolute;
}

#menu a:visited, #menu a {
display:block;
width:100px;
height:20px;
margin:0 auto;
border-top:1px solid #fff;
border-bottom:1px solid #000;
text-align:center;
text-decoration:none;
line-height:20px;
color:#000;
padding:0;
}

#menu a:hover {
background:#aaa;
color:#fff;
}

</style>

</head>

<body>


<div id="menu">
<li><a href=" title="Home">Test 1</a></li>
<li><a href=" title="Home">Test 2</a></li>
<li><a href=" title="Home">Test 3</a></li>
<li><a href=" title="Home">Test 4</a></li>
<li><a href=" title="Home">Test 5</a></li>
<li><a href=" title="Home">Test 6</a></li>
</div>



</body>

</html>
 
Sort by date Sort by votes
Try putting your <li>s inside a <ul></ul> pair

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
Ah - hit 'submit' too early. For any display oddities it's always worth using first - it picks up lots of problems. Once they are solved, most of the display issues remaining are fairly easily sorted

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
change:
Code: 
<div id="menu">
</div>
to:
Code: 
<ul id="menu">
</ul>

This should take both browsers out of quirks mode. Also, you have menu set to be both absolute and fixed. The absolute in the lower rule should over ride the fixed in the higher rule, so the rule:
Code: 
position: fixed
shouldn't have any effect.


[plug=shameless]
[/plug]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
745
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
597
PeDa
PeDa
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
634
PeDa
PeDa
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
174
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top