rsrwebs Posted November 26, 2009 Report Share Posted November 26, 2009 Hello, I have a navigation bar that is almost exactly the same as one I've used (and had no problem with), just a different hover image, and an added text underline. Of course, it displays fine in FF, but when I open it in IE, it seemed like it was cut off, but as it turns out, it's just not displaying the text. I found that there is approx. 2px worth of space that will still react when hovered over. I tried changing it from display:inline; to display:block; and the text comes back! But it does this weird thing where the buttons are distanced properly, but are below each other by a line, kind of making a staircase shape. I'm at a loss, I have no idea what I did wrong, and I always am having some sort of problem with IE, it never ends... Here is the CSS for the navbar: ul#list-nav li{ display:inline; } ul#list-nav li a{ float: left; color: #993300; padding: 9px 7px; text-decoration: underline; border-right: none; } ul#list-nav li a:visited{ color: #993300; } ul#list-nav li a:hover, ul#list-nav li .current{ color: #003399; background: transparent url(../images/blockactive.gif) center center repeat-x; } ul#list-nav{ display:block; margin: 0; padding: 0; float:left; font: bold 15px Verdana; width: 100%; border: none; background: transparent; list-style: none; } This whole thing is apart of a header file, that displays in an iframe. The header and navbar are in containers: div#container { width:840 px; } div#navcontainer { margin-left:35px; margin-top:-50; } I really appreciate the help, and sorry that I haven't gotten around to giving back and answering some questions myself. I'll try doing that tonight. -Raven Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 26, 2009 Report Share Posted November 26, 2009 But it does this weird thing where the buttons are distanced properly, but are below each other by a line, kind of making a staircase shape. That's a common problem with IE; you need to add float: left; to the li tag (not the "a" tag):- ul#list-nav li{ float: left; display:inline; } float: left is the important style and should make a style into display: block so it will probably work without display: block. There are situations where IE6 needs display: inline so I've left that in there although you should check without it in IE6. Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted November 26, 2009 Author Report Share Posted November 26, 2009 But it does this weird thing where the buttons are distanced properly, but are below each other by a line, kind of making a staircase shape. That's a common problem with IE; you need to add float: left; to the li tag (not the "a" tag):- ul#list-nav li{ float: left; display:inline; } float: left is the important style and should make a style into display: block so it will probably work without display: block. There are situations where IE6 needs display: inline so I've left that in there although you should check without it in IE6. Okay, it's not doing the staircase thing, but it's doing the other problem that I couldn't fix; the text is nowhere to be seen, yet there still is a 2 pixels tall area where the buttons light up as they usually would. Would you mind looking at it in IE too? I don't feel like I'm describing this very well. http://www.laurendragon.com/aware/index.htm Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 27, 2009 Report Share Posted November 27, 2009 (edited) I loaded all your files, css files and the iframe and the navbar items showed perfectly in my IE7 where they don't with your page. Then I remembered that the first thing I did was to correct your doctype in index.htm and header.htm from to /p> "http://www.w3.org/TR/html4/loose.dtd"> Edit: doctypes are here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html Edited November 27, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.