Forum Moderators: not2easy
Here is my code for the navigation layer.
<div id="navigation" style="position:absolute; left:89px; top:303px; width:193px; height:307px; z-index:3; overflow:visible">
<p class="f-lp"><ul>
<li><a href="index.html">HOME</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="galleries.html">GALLERIES</a></li>
<li><a href="timeline.html">TIMELINE</a></li>
<li><a href="contact.html">CONTACT INFO</a></li>
</ul>
<p class="address f-lp">To234JA</p></p>
</div>
And here is my css code
/* navigation */
#navigation {
font-family: Tahoma;
font-size: 14px;
color : #ffffff;
border: 1px solid #fff;
border-width:0px 0px 1px 1px;
}
#navigation ul {
list-style: none;
margin: 0px;
padding: 0;
}#navigation a {
display: block;
color: #FFFFFF;
width: 178px;
padding: 5px 5px 5px 10px;
border: 1px solid #fff;
border-width:0px 0px 1px 0px;
text-decoration: none;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #000000;
padding: 5px 5px 5px 10px;
}
/* END OF Navigation */
it's because of the absolute positioning of the navigation div, and it's not a regular hasLayout bug that I can see, so if you can't position that div in another way, (are you source ordering?) then can you add a background color to the Navigation div - the same as the background color of the page will do, but "transparent" won't work so this will depend on if there are any background images.
If that's not an option and changing the positioning method is not an option then shout back or do tell a solution if you've found one
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
/* navigation */
#navigation {
font-family: Tahoma;
font-size: 14px;
color : #ffffff;
border: 1px solid #fff;
border-width:0px 0px 1px 1px;
}
#navigation ul {
list-style: none;
margin: 0px;
padding: 0;
}#navigation a {
display: block;
color: #FFFFFF;
width: 178px;
padding: 5px 5px 5px 10px;
border: 1px solid #fff;
border-width:0px 0px 1px 0px;
text-decoration: none;
}
#navigation a:hover {
color: #00FFFF;
background-color: #FF0000;
padding: 5px 5px 5px 10px;
}
</style>
</head>
<body bgcolor="#000000">
<div id="navigation" style="position:absolute; left:89px; top:303px; width:193px; height:307px; z-index:3; overflow:visible">
<p><ul>
<li><a href="index.html">HOME</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="galleries.html">GALLERIES</a></li>
<li><a href="timeline.html">TIMELINE</a></li>
<li><a href="contact.html">CONTACT INFO</a></li>
</ul>
<p>To234JA</p></p>
</div>
</body>
</html>
Quirks Mode it does work in, and your code does indeed work, because your Doctype is triggering quirks mode, which I wouldn't really recommend because of the other IE back compat problems it causes
try you code replacing the first line with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Here is the code that I changed and seems to be ok with IE6,IE7, FF, Opera, Safari.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">
/* navigation */
#navigation {
font-family: Tahoma;
font-size: 14px;
color : #ffffff;
border: 1px solid #fff;
border-width:0px 0px 1px 1px;position:relative;
margin: 303px 0px 0px 89px;
z-index:3;
overflow:visible;
height: 307px;
width:193px;
}
#navigation ul {
list-style: none;
margin: 0px;
padding: 0;
}
#navigation a {
display: block;
color: #FFFFFF;
width: 178px;
padding: 5px 5px 5px 10px;
border: 1px solid #fff;
border-width:0px 0px 1px 0px;
text-decoration: none;
}
#navigation a:hover {
color: #00FFFF;
background-color: #FF0000;
padding: 5px 5px 5px 10px;
}
</style>
</head>
<body bgcolor="#000000">
<div id="navigation">
<p><ul>
<li><a href="index.html">HOME</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="galleries.html">GALLERIES</a></li>
<li><a href="timeline.html">TIMELINE</a></li>
<li><a href="contact.html">CONTACT INFO</a></li>
</ul>
<p>To234JA</p></p>
</div>
</body>
</html>
you cannot nest <p>'s and a <ul> does not suit as a child of a <p> ...
please use valid code to start from.
<p class="f-lp"><ul>
Aside of that a <p> inside another </p> is also not allowed. Now the first one most likely will get closed by the browser already, still ... why take the risk.
zimmo, yes the code I gave enigma was the one which showed your problem, I suggest you stick with this correct Doctype too despite this problem as to go with a "Quirks Mode" triggering one, although fixing this issue, will bring you many more.
I have a feeling that nesting divs would solve the problem, as enigma says so their suggestion might well work (I've not had a chance to look any more at it yet). I've have a very strong feeling that this is one of those IE things that only happens under a very precise set of circumstances so changing them will work and is possibly why your other sites are fine with their sub navs etc..
As I too suggested earlier if you don't have to use Absolute Positioning (AP) on that nav that should fix it, enigmas suggestion to AP a wrapper then put the nav inside it might just be one way to differentiate the circumstances?
The easiest "solution" I found was to add a background color to the nav div, are you not able to do that? images?
..and don't ask me why that works it just does! - IE problems are often related to background color changes on hover, but why it works here I don't know! :o)
Yes that code works too, but it may not be so easy for the OP to use relative positioning directly on the nav div, it depends where in the source code the nav is - remember Relative Positioning with co-ordinates only offsets the element, i.e. it still leaves a "space" where the original element would've appeared so if the nav is early in the source the rest of the following elements would need to either negatively margined or relatively positioned too in order to fill the "gap"
@zimmo, I think we need to know what the rest of your template is so we can see if there's "Source Ordering" involved, and/or if there's background images involved to try and nail down your best solution in this case..
