Forum Moderators: open
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! :(
I would not, though it works, put the list-style-type: property in #navigation. I would move it to #navigation li {
More 'correct', IMO.
Okay, I'll keep in mind to put the list-style in #navigation li { from now on :D
What could be coming into play from elsewhere that would cause "weird bulleted list in IE."?
They're just supposed to be one of those "tabbed" boxy navigations, but in IE it shows up as a bulleted list. Stupid thing...
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?
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
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.
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.
#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!
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:
#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"?
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! :)
