Forum Moderators: not2easy
I'm new here and for the most part new to web, especially css.
I'm developing a horizontal menu bar which works fine in FF and 5 other browsers on my Mac. It is also fine in IE7 in Windows. In IE6 though, it all goes haywire, not even sure how to give a descriptive; it just falls apart. Anyone have any suggestions as to what's going on and how to remedy it? Your help is appreciated!
Here's the code (both html and css validated):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php //PHP ADODB document - made with PHAkt 3.6.0?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigation Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
border-collapse: collapse;
empty-cells: show;
margin: 0;
padding: 0;
}
body {
color: #666666;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
}
/* ---------------------- Navigation ---------------------- */
#navcontainer
{
background:#143D55 url(images/nav_und.gif) repeat-x;
color:#E0E0E0;
font-family:Helvetica,Arial,Verdana,sans-serif;
height:56px;
margin: 0 auto;
position:relative;
width:100%;
}
#nav
{
background:#fff url(images/nav_bg2.gif) repeat-x bottom left;
border-top: 5px solid #003381;
font-size:12px;
font-weight:bold;
height:29px;
margin: 0 auto;
width: 800px;
}
#nav ul
{
list-style-type:none;
margin:0 auto;
position: relative;
}
#nav ul li{
float:left;
height: 100%;
margin:0 auto;
width:90px;
}
#nav ul li a{
color:#003381;
text-decoration:none;
}
#nav ul li a span{
border-right:thin #006666 groove;
float:left;
height: 13px;
padding:8px 0 8px 0;
text-align:center;
width:100%;
}
#nav ul li a:hover{color:#fff;
}
#nav ul li a:hover span{
background:transparent url(images/nav_ON2.gif) no-repeat top left;
color:#003381;
cursor:pointer;
display:block;
height: 25px;
padding:8px 0px 8px 0px;
text-align:center;
}
#nav ul li a:hover.current span{
color: #CCCCCC;
}
#nav ul li a.current,
#nav ul li a.current:hover{
background:transparent url(images/nav_ON.gif) no-repeat top left;
color:#003381;
line-height:275%;
}
#nav ul li a.current span
{
background: #000 url(images/nav_ON.gif) no-repeat top left;
height: 40px;
padding: 0;
}
/* ---------------------- END nav nav ---------------------- */
</style>
</head><body>
<div id="navcontainer">
<div id="nav">
<ul>
<li><a href="" class="current"><span>Home</span></a></li>
<li><a href=""><span>Profile</span></a></li>
<li><a href=""><span>Expertise</span></a></li>
<li><a href=""><span>Showroom</span></a></li>
<li><a href=""><span>Support</span></a></li>
<li><a href=""><span>Pricebook</span></a></li>
<li><a href=""><span>Newsletter</span></a></li>
<li><a href=""><span>Careers</span></a></li>
</ul>
</div>
</div>
</body>
</html>
eg. instead of doing
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>do
<li>blah blah blah</li><li>blah blah blah</li><li>blah blah blah</li>
I put EVERYTHING in one continuous string but it changed nothing in IE6.
I'll try and explain what's going wrong.
The buttons are all identical ht. and wt. across the screen. They total 800px wide and do NOT adjust width. Only the 'extenders' of the bar expand with wider browsers.
When you hover over a button it alters the look of it both in color and by extending the ht. downward.
Everything is good on Mac and it works in FF, Safari and IE7 on Win-Dohs! But in IE6 the buttons all have the hover ht. to begin with and a mysterious white bar above those buttons which seems to be what is pushing those buttons down.
Like I said above, hard to describe.
thoughts?
Marshall
#top_nav_bar {
width: 900px;
height: 50px;
margin: 5px 0;
padding: 0;
font-size: 15px;
line-height: 50px;
color: #FFF;
text-align: center;
background-color: #FFF;
}
ul#top_nav {
width: 900px;
margin: 0;
padding: 0;
list-style-type: none;
}
ul#top_nav li {
font-size: 15px;
line-height: 50px;
text-align: center;
display: block;
float: left;
}
ul#top_nav li a, ul#top_nav li a:visited {
width: 149px;
height: 50px;
margin-left: 1px;
color: #FFF;
text-decoration: none;
background-color: #EC0034;
display: block;
}
ul#top_nav li a:hover {
color: #FFF;
background-color: #F8B208;
}
HTML
<div id="top_nav_bar"><ul id="top_nav"><li><a href="">LINK</a></li><li><a href="">LINK</a></li><li><a href="">LINK</a></li><li><a href="">LINK</a></li><li><a href="">LINK</a></li><li><a href="">LINK</a></li></ul></div>
Marshall
Inexperience, expectations, brain dead, not sure, but I'm not seeing how what you wrote is helping me. I can't figure out how to take your approach and make it work in my context.
any thoughts? bueller? anyone?
"it might just be your spaces. IE doesn't like gaps between things, so if you close them up it will probably sort itself out."
does that apply just from the 'body' tag on? or is it for every last little bit from the doctype declaration to the very end?
and on a totally random note.....
what is this little dot that leads my cursor sometimes?
it's sits where a 'squared' or 'to the nth power' mathematical notation would but it's just a tiny little dot that my cursor pushes around when I'm typing in a form like this or in email. I never used to see this but I've noticed it recently both at home and at work.
Anyone far-miliar with this phenomenon? Pretty soon, I might take a knife and carve it out of my monitor.
Through some tedious troubleshooting, I've managed to solve one problem, though I still have two other IE6 issues.
In these two CSS parts, I moved the background .gif from #nav to #nav ul
#nav
{
border-top: 5px solid #003381;
font-size:12px;
font-weight:bold;
height:29px;
margin: 0 auto;
width: 800px;
}
#nav ul
{
background:#fff url(images/nav_bg2.gif) repeat-x bottom left;
list-style-type:none;
margin:0 auto;
}
That solved the problem of the initial view and everything looking proper.
Now what I could use some input on is:
- When I hover, the buttons do switch appearance as they should, however, they are supposed to stretch downward to the same ht. as 'home' and they do not.
- When I move the cursor away the button should return to its initial appearance but it does not.
works everywhere but IE6 [snip], thoughts?
[edited by: SuzyUK at 11:15 pm (utc) on Oct. 26, 2007]
I simply put height:25px; in "#nav ul li a:hover" just like it is in "#nav ul li a:hover span" and it was fixed.
truth is that IE (pre7) needs a lot of extra 'spelling out' so apart from the fact you used a hasLayout [webmasterworld.com] solution which would likely have sorted it anyway, you have also covered the other 'first rule of IE'
First Rule (IMHO)
- Do not attempt to give any 'hover span' rule without first giving a 'hover' rule - IE can't cope with step a>b if a is not in place..
IE may well need these baby steps for a wee while yet...
