Horizontal list menu - problem with FF and IE7 - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Horizontal list menu - problem with FF and IE7

fanduy

3:16 am on Feb 15, 2008 (gmt 0)

10+ Year Member

Hi guys,

I encountered a problem while setting up a navigation bar for my site. I used css with html (by the link method) and the bar appeared nicely in Dreamweaver. However, it appeared as list (block) in Firefox and IE7 although I coded it to be appeared inline. Could somebody please tell me how to fix this? I'm fairly new with html and css.

CSS Code:

body {background-color: #AC8DC4;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
}

ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:792px
}

ul#list-nav li {
display: inline;
}

ul#list-nav li a {
text-decoration:none;
padding-top:5px;
padding-bottom:5px;
width:155px;
background:#8867A3;
color:#D0BEDE;
font-weight:bold;
float:left;
text-align:center;
font-size:16px;
}

ul#list-nav li a:hover {
background:#008000;
color:#000
}

HTML:

<center>
<ul id="list-nav">
<li><a href="www.example.org">1</a></li>
<li><a href="www.example.org">2</a></li>
<li><a href="/phpBB3/">3</a></li>
<li><a href="/wiki/">Wiki</a></li>
</ul>
</center>

Thanks a lot!

Best,
fanduy

tedster

4:41 am on Feb 15, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

That code works for me. There may be a problem in how you are bringing in the CSS rules. There are two possibilities:

1. Place the rules in the <head> section, within a <style> element:

<style type="text/css">[your css rules go here]</style>

2. Link to an external stylesheet from within the <head> section:

<link href="mystyles.css" rel="stylesheet" type="text/css">

If you're using the second approach, then make sure you have nothing in the mystyles.css file but your rules. So check for errors in how you bring in the CSS rules - the CSS itself does work for me with that HTML - in IE, FF, Opera and Safari.

The two links below can be your best friends. If you make sure that your html and css validate before you go troubleshooting, then you've eliminated a source of many potential rendering problems. Some types of problems are literally impossible to fix if the mark-up doesn't validate.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

fanduy

5:24 am on Feb 15, 2008 (gmt 0)

10+ Year Member

Thanks a lot tedster! I used the second approach for my stylesheet and there is no error as confirmed by the CSS Validator. However, the Validator said there was no stylesheet for my html page. Is that because I used an external stylesheet or because the page could not link to the external stylesheet? And my html also passed the HTML Validator. Both of the html and css codes worked perfectly within Dreamweaver too. So could you please give a suggestion?

Thanks!

tedster

6:54 am on Feb 15, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You can double check the filepath in the link to your stylesheet. Check for whether it's in a different directory than the html file, for example, and also check whether there are any typos.

When you are validating an external stylesheet, you should submit that css file directly to the CSS Validator. However, I already checked your CSS rules -- the external stylesheet I built using them did validate.

Marcia

7:32 am on Feb 15, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

When you're validating HTML, unless the CSS is imbedded in the page they'll say there's none. Running the external stylesheet itself through the W3's CSS validator is separate, and Firefox with the developer's extension makes that real easy, as well as checking for page file sizes and more.

ul#list-nav {display: inline;

That works on my horizontal lists, using either id= or class=.

[edited by: Marcia at 7:35 am (utc) on Feb. 15, 2008]

fanduy

4:24 am on Feb 16, 2008 (gmt 0)

10+ Year Member

I got it fixed, thanks so much!