homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
IE not displaying navigation correctly
Reichan



 
Msg#: 4032443 posted 10:58 pm on Nov 26, 2009 (gmt 0)

Hello everyone,

I'm quite new to CSS and HTML so please forgive me if my error is just plain stupid on my part, haha.

I tried to make one of those navigation menus that will change to a different colour when that page is active. It works perfectly fine in Firefox, but it shows up as a weird bulleted list in IE.

I am using XHTML 1.0 Transitional :)

Here is my HTML and CSS respectively:

HTML
----------

<div id="navigation">
<ul>
<li class="home"><a href="../index.html">Home</a></li>
<li class="about"><a href="../about.html">About Me</a></li>
<li class="gallery"><a href="../gallery.html">Gallery</a></li>
<li class="contact"><a href="../contact.html">Contact</a></li>
</ul>
</div>

CSS
----------

#navigation{
width: 955px;
height: 50px;
background:url(images/menu%20copy.gif);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
}

#navigation li {
display: block;
float: left;
margin: 0 0 0 5px;
}

#navigation li a {
height: 43px;
color: #FFF;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 8px 10px 0;
}

#navigation li a:hover {
color: #B40097;
}

#about .about,
#contact .contact,
#home .home,
#gallery .gallery {
background: url(images/menu%20current.gif);
}

----------

Could anybody give me some tips on what I could do? Thanks in advance! :(

 

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4032443 posted 11:17 pm on Nov 26, 2009 (gmt 0)

What version IE?

I would not, though it works, put the list-style-type: property in #navigation. I would move it to #navigation li {

More 'correct', IMO.

Reichan



 
Msg#: 4032443 posted 2:00 am on Nov 27, 2009 (gmt 0)

Ummmm.... I have IE 8 on my laptop, my university library has 6 or 7 I believe and they don't work.

Okay, I'll keep in mind to put the list-style in #navigation li { from now on :D

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4032443 posted 2:16 am on Nov 27, 2009 (gmt 0)

I don't test for IE6 here anymore, but the markup sample validates and renders fine in IE7. Haven't checked IE8.

What could be coming into play from elsewhere that would cause "weird bulleted list in IE."?

Reichan



 
Msg#: 4032443 posted 11:51 pm on Nov 29, 2009 (gmt 0)

I don't really know what to do, I've tried looking it up on google, but no luck...

They're just supposed to be one of those "tabbed" boxy navigations, but in IE it shows up as a bulleted list. Stupid thing...

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4032443 posted 12:28 am on Nov 30, 2009 (gmt 0)

I've tested the mark-up you supplied above in IE 5, 5.5, 6, 7 and 8. It works in all of them, so something else is coming into play and interfering with the rendering of your final page.

Have you validated both the HTML and the CSS? (W3C Validator - HTML [validator.w3.org] and W3C Validator - CSS [jigsaw.w3.org])
Do you use any IE conditional comments?
Are your CSS rules in the <head> section or an external file?

Reichan



 
Msg#: 4032443 posted 2:20 am on Nov 30, 2009 (gmt 0)

My CSS is attached on an external file.... I'll try to do that validation thing and see if I can fix it up myself.

I don't have any IE conditional comments, I don't know how to do those, sorry :(

Thanks for the reply, I'll try to fix it up :D

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4032443 posted 2:38 am on Nov 30, 2009 (gmt 0)

My CSS is attached on an external file.... I'll try to do that validation thing

"Do, or do not. There is no 'try.'"
-- Jedi Master Yoda
........................

Chances are it will validate or easily be made to do so. The next step is to see where the over-ride is coming from. Comment sections of markup in and out until you can identity where. It seems clear that there is a conflict. Once commented out, your intended rendering should work. Then you will need to fix it without breaking something else as a side effect; a real possibility depending upon the issue. Should be easy enough to fix, but you will want to be aware that fixing one area could break another and that that could be needed.

CSS_Kidd

5+ Year Member



 
Msg#: 4032443 posted 4:02 pm on Nov 30, 2009 (gmt 0)

Try this:

Remove the display: block; from the #navigation li a
and create a #navigation ul to apply your list style to.

If you block the #navigation li a, IE will want a width. so leave the block out. You may wonder about the width of #navigation li with it having a display: block... Well... The #navigation li will have a width (the content of #navigation li a) :)

This always works in my horizontal navigation menus. There are many ways of getting this to work in IE, this is the method that works for me.

CSS_Kidd

5+ Year Member



 
Msg#: 4032443 posted 4:19 pm on Nov 30, 2009 (gmt 0)

Sorry I just noticed this:

#navigation li a {
height: 43px;
color: #FFF;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 8px 10px 0;
}

You have a line-height of 200%. IE also has issues with %. Try using something like 2em or 20px.

Using what I posted early and this response as well you should be fine. Plus you won't have to use an IE conditional version of of your css. AND it validates!

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4032443 posted 5:03 pm on Nov 30, 2009 (gmt 0)

put the list-style-type: property in #navigation. I would move it to #navigation li {}

while this is good advice as the list-style property applies to elements with display: list-item, it should be handled with care

Source [w3.org]
Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.

list-style is an inheritable property, so if some other CSS is setting or resetting the list-style on the <ul> or <ol> and the CSS selector for that is more specific, it just might not give the expected results, I know of one CMS that does this in reverse so.. generally in a case like this I would advise using the specificity of that #navigation ID and setting the list style on the <ul> itself to be inherited by the <li> just in case, or if you really want to make sure you're targetting it use both, so a rule like this at the start of your tabbed lists might look like this, as it's common to also zero out any default padding and margin (which I think might be causing your IE problem?) then reset one or the other as required.

#navigation ul, #navigation li {
margin: 0; padding: 0; list-style: none;
}

this should then give you a blank canvas to work with without seeing if there is any other conflicting CSS.

added: re: removing the display: block; off the li a, that may become a choice, if you remove it the link will no longer fill the whole of the li, and that might also may mean you will not get the desired effect. It's true that IE6 has problems with it without a width, but if the width is set on the li then use width 100% on the a. or there are other ways if a width still doesn't work for you because of borders/padding etc.

CSS_Kidd

5+ Year Member



 
Msg#: 4032443 posted 6:13 pm on Nov 30, 2009 (gmt 0)

SuzyUK:
Now I am questioning my method. Even though it works for me I am wondering if the following is the right approach. Here is the most common way I set up a horizonal menu:

CSS:
#nav-menu {
height: 24px;
background: #663;
position: relative;
border-bottom: solid 1px #552
}
#nav-menu ul {
list-style: none;
padding: 0 13px;
}
#nav-menu ul li {
float: left;
display: block;
}
#nav-menu ul li a {
height: 23px;
padding:0 1em;
text-align: center;
font-weight:bold;
text-decoration: none;
border-top: solid 1px #663;
color: #cc9;
line-height: 2em;
}
#nav-menu ul li a:hover {
color: #fff;
}

HTML:
<div id="nav-menu">
<ul>
<li><a href="foo.htm">Foo</a></li>
</ul>
</div>

So I think this works for me because I apply padding with-in the #nav-menu ul li a. When it comes to a blank canvas I have this at the top of my css:

* {
margin: 0px;
padding: 0px;
border: none;
}

While this will cancel out a list's margins/padding, I happen to use a lot of list in my clients sites so I usually don't cancel out list-style.

So in a round about way I think I applied what you are talking about, but in a different approach, Right?

Or is this one of those things where "as long as it works, It's clean, and it validates... It's fine"?

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4032443 posted 7:30 pm on Nov 30, 2009 (gmt 0)

Yes CSS_Kidd, (to all ;))

the universal reset you are using is replacing where I've zero'd it out on the UL, I just don't like the universal reset because of what it can do to form elements, and I also happen to like the defaults on header elements, but that's just a choice we all make which one is our favourite. Safe to use as long as you understand what it does to absolutely everything ;)

I wouldn't put list-style in a universal reset either, but would try to target it with the most specific selector hence using the ID closest to the list itself.

In the original code, float:left is doing the same as display: block for the <a> element so, yes display block is not required, BUT I *think* that it is this float left without explicitly zeroing the default padding and margin that causes the older IE's to go funky with the bullets, I just don't remember any more why we do what we do sometimes hehe.. except that making sure to zero them does avoid the original problem.

I also would not apply heights (never like to!) as they, in the first example are causing a bit of a pixel difference in the overall menu height and the link height.

here just for reference is how I changed the code for the first example, (this is only one way!) and this example did not need display block as the link size is controlled by left/right padding and an explicit line-height.

#navigation {
width: 100%;
background:#000; /* black */
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
list-style: none;
margin: 0; padding: 0; /* zero the default explicitly */
float: left; /* so the parent ul expands to contain child floats */
}

#navigation li {float: left;}

#navigation li a {
color: #FFF;
text-decoration: none;
/*display: block;*/ /* this is not required in this case as height and width are controlled by rules below */
line-height: 50px /* height of overall nav is now controlled by the <a> and line height has the advantage of vertically centering the text */;
padding: 0 20px; /* left and right padding only */
}

#navigation li a:hover {color: #B40097;}

.about .about,
.contact .contact,
.home .home,
.gallery .gallery {
background: #f00;
}

HTML:
<div class="navbar gallery">
<ul id="navigation">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About Me</a></li>
<li class="gallery"><a href="#">Gallery</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
<div>

You'll see I also moved the #navigation ID directly onto the <ul> itself, this avoids a bit of divitis, however I then did re-input a div wrapper on the <ul> itself, to contradict myself, just to show how classnames can be reused for the targeting of the "active" link, i.e. the first class navbar is not in use, but is there in case there would be any other navbars which might share common properties, then the second class name on that div would be programatically changed to allow the "selected" menu to work the same as the first example

using float:left on li elements even for vertical menus is another IE "whitespace" avoiding fix, so I think I'm just to working with it that way!

Or is this one of those things where "as long as it works, It's clean, and it validates... It's fine"?

YEP! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved