PDA

View Full Version : CSS navigation bar invisible in IE



tonyfurnell
Mar 11th, 2008, 05:33 PM
I found a fairly nice way of creating a navigation menu using CSS and the UL/LI tag in HTML, but for some reason the entire layer is invisible in IE7. All fine in FF -- I've uploaded a tester here: http://quis.qub.ac.uk/caving/tonys

I've tried changing the L/R position of the #navBar layer in case it's being hidden underneath the background or something, but it just won't show up in IE as long as it has position:absolute.

Can anyone see what I'm doing wrong?

6108 - the way it's meant to look -- Firefox 2.0.0.12
6109 - invisible navBar -- IE7

jcdevelopment
Mar 11th, 2008, 05:43 PM
<!--[if IE 7]>
<style type="text/css">
#navBar{
position:relative;
float:right;
top:116px;
right:0px;
border-top:1px solid black;
}
</style>
<![endif]-->

does that help any?

tonyfurnell
Mar 11th, 2008, 05:59 PM
Hmm, thanks I'll give it a go (laptop with code on it has just run out of battery power at the wrong moment) -- but I'm sure IE should be able to cope with it in absolute positioning.... :confused:

abduraooft
Mar 11th, 2008, 06:47 PM
To apply float:right; effectively to a sibling, AFAIK, it should be placed first in the markup inside its parent, like

<div id="navBar">
<ul>
<li class="first"><a href="index.php">About</a></li>
<li><a href="history.php">History</a></li>
<li><a href="listing.php">Content Listing</a></li>
<li><a href="location.php">Location</a></li>
<li class="last"><a href="links.php">Links</a></li>
</ul>
<span class="navclear"> </span></div>

<div id="content">
<div class="bodyText">The <a href="http://www.nimusicarchive.com/">Northern
Ireland Music Archive</a> is an archive of music from Northern Ireland.</div>
</div>
And you have wrapped your menubar inside a div and applied float to both. No need to apply float to ul. (or you can also remove that div and keep float on ul, but you may have to adjust your CSS)

But I'd go with another solution. Since your header's height is fixed, and you'd like to position your menubar at a fixed position, I think the best option is position:absolute;. Apply this to your menu and remove all floats (except from lis). Then apply top and right to it (with respect to your relatively positioned container). Then apply a proper padding-top to the container.

tonyfurnell
Mar 12th, 2008, 05:05 PM
Thanks for the reply abduraooft -- point taken about the nested float statements, now tweaked.

However I still can't get the menu to appear in IE, the method I've used is essentially the same as what you mentioned -- I've now commented out all float statements (apart from in the UL LI code) so the position is just being set with top and right, under position:absolute. But still no show....



/* navigation bar */
#navBar{
/*position:relative; /** IE6 needs this to display the div **/
/*float:right;*/
position:absolute;
top:116px;
right:0px;
border-top:1px solid black;
}

/* Hide from IE5-mac \*/
* html #navBar {height: 1%; }
/* end hide */ /** makes IE5-win display the background color for nav **/

#navBar ul{
/*float:right;*/
display: block;
list-style: none;
text-align: center;
line-height: 1.1em;
}
#navBar ul li{
display:block;
float: left;
position: relative; /** IE6 needs this to display the links **/
padding: 2px;
border-left:1px solid black;
border-bottom:1px solid gray;
padding: 4px;
}

abduraooft
Mar 12th, 2008, 05:30 PM
No, I can't see the changes in your code
Try

#navBar {
border-top:1px solid black;

position:absolute;
right:0px;
top:116px;
}

<div id="container">
<div id="header">
<h1>Northern Ireland Music Archive</h1>
</div>
<div id="navBar">
<ul>
<li class="first"><a href="index.php">About</a></li>
<li><a href="history.php">History</a></li>
<li><a href="listing.php">Content Listing</a></li>
<li><a href="location.php">Location</a></li>
<li class="last"><a href="links.php">Links</a></li>
</ul>
<span class="navclear"> </span></div>
<div id="content">

<div class="bodyText">The <a href="http://www.nimusicarchive.com/">Northern
Ireland Music Archive</a> is an archive of music from Northern Ireland.</div>
</div>

<div id="footer"><a title="Check the validity of this XHTML" href="http://validator.w3.org/check/referer">xhtml</a> <a title="Check the validity of this CSS" href="http://jigsaw.w3.org/css-validator/check/referer">css</a></div>
</div>

effpeetee
Mar 12th, 2008, 05:42 PM
I just added the code below to your css and the screen looks identical in IE7 and in FFox 2.

Frank


* {
margin: 0;
padding: 0;
border: none;
}
html, body {
height:100&#37;;
width:100%;
}
body { /* center all divs in the body */
text-align:center;
padding-top:20px;
}

tonyfurnell
Mar 12th, 2008, 06:13 PM
@abduraooft: That's what I had in the CSS code in the previous post...? (plus a couple of commented out lines)

I've decided to bite the bullet for now and make the div position:relative, it's not quite as nice as the menu HTML has to come before the content in my HTML page (not quite so screen-reader friendly) so that it displays in the right place, but hey, it works.


/* navigation bar */
#navBar{
position:relative; /** IE6 needs this to display the div **/
width:100%;
/* position:absolute;
top:116px;
right:0px;*/
}

/* Hide from IE5-mac \*/
* html #navBar {height: 1%; }
/* end hide */ /** makes IE5-win display the background color for nav **/

#navBar ul{
float:right;
display: block;
list-style: none;
text-align: center;
line-height: 1.1em;
}
#navBar ul li{
display:block;
float: left;
position: relative; /** IE6 needs this to display the links **/
padding: 2px;
border-left:1px solid black;
border-bottom:1px solid gray;
padding: 4px;
}
<div id="container">
<div id="header">
<h1>Northern Ireland Music Archive</h1>
</div>
<div id="navBar">
<ul>
<li class="first"><a href='index.php'>About</a></li>
<li><a href="history.php">History</a></li>
<li><a href="listing.php">Content Listing</a></li>
<li><a href="location.php">Location</a></li>
<li class="last"><a href="links.php">Links</a></li>
</ul>
<span class="navclear"></span> </div>
<div id="content">
<div class="bodyText">The <a href="http://www.nimusicarchive.com/">Northern
Ireland Music Archive</a> is an archive of music from Northern Ireland.</div>
</div>

<div id='footer'><a href="http://validator.w3.org/check/referer" title="Check the validity of this XHTML">xhtml</a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this CSS">css</a></div>
</div>
Hence it displays properly in both now! :thumbsup: Not quite the way I'd prefer it but it'll do if needs be.