List/Link Problem

[thorton]

I am doing my first site using CSS and Divs. I am currently having a problem with a list incline.

I have a title section in the CSS

#titlebar {
clear:right;
background:#6600FF;
text-align:left;}

In the div for this section I have two lists

<ul>
<li class="inline"><h3><a href="#">Menu</a></h3></li>
<li class="inline"><h3><a href="#">Contact</a></h3></li>
<li class="inline"><h3><a href="#">Fundraising Companies</a></h3></li>
<li class="last"><h3><a href="#">Forums</a></h3></li>
</ul>
<ul>
<li class="inline">test</li>
<li class="inline">test</li>
<li class="inline">test</li>
<li class="last">test</li>
</div>

The code for the li classes are

li.inline {
display: inline;
padding-left: 3px;
padding-right: 7px;
border-right: 1px dotted #066;}
li.last {
display: inline;
padding-left: 3px;
padding-right: 3px;
border-right: 0px;}

I got this code from a website that used it, and it worked beautifully on that site. For some reason when I implement it.

The first list does not work in either IE or FF
The second list workes in IE but not in FF.

The site url is www.sonz70.com/layout.html

Any help would be appreciated. :)

[thorton]

Ok, I fixed it.

Now, the problem is it works in IE and not FF at all

The code I have is this in the style

.nav ul {
display: inline;
padding:3px;
margin: 2px;}
.nav ul li {
display:inline;
padding:4px;
margin:0px;
list-style:none;
background-color:#CCCCCC;
border-bottom-color:#000099;}
.nav ul li h3 {
font-size:12px;
display:inline;
padding:0PX;
margin:0px;

And this for the links

<div class="nav">
<ul>

<li><h3><a href="#">Menu</a></h3></li>
<li><h3><a href="#">Contact</a></h3></li>
<li><h3><a href="#">Fundraising Companies</a></h3></li>
<li><h3><a href="#">Forums</a></h3></li>
</ul>

</div>

www.sonz70.com/layout.html

In IE it works..in FF it doesn't. Any ideas now?

[zackattack]

Hi Thornton

I guess from what you have there you want a tab navigation. Start simple, forget the h3 you dont need it in there, all you need for this to work in FF and IE is the following

CSS:

ul.nav {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
ul.nav li {
display: inline;
margin: 0;
padding: 4px;
background-color:#CCCCCC;
border-bottom: solid 1px #000099;
}

<ul class="nav">
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Fundraising Companies</a></li>
<li><a href="#">Forums</a></li>
</ul>

Now if you want the tabs to look like tabs with the hover properties working as well, this is how I would do it:

CSS:

ul.nav {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
ul.nav li {
display: inline;
margin: 0;
padding: 0;
border-bottom: solid 1px #009;
}
ul.nav li a {
margin: 0 2px;
padding: 4px 6px;
text-decoration: none;
background-color:#ccc;
}
ul.nav li a:hover {
background-color:#eee;
}

Styling lists for navigation is the right way to go for sure, and there are numerous tutorials out there to help - try searching for styling lists using CSS you will find lots of info. You can copy what someone else has done on their site but bear in mind they may have copied it from someone else and so on...

ZA

[thorton]

The code you used did the same thing. It makes the list in IE appear as such

item 1 item 2 item 3 item 4

In FF though the list appears as

item1
item2
item3
item4

After researching what you mentioned, and trying numeroud different codes, and ways to code it, the same problem continues to appear. Is there a FF bug I am missing?

[thorton]

Ok..I sort of fixed it, but perhaps someone could make it better?

It seemed the <li> tag was causing the issue, though this might have been obvious.

After removing the li tag I had this code

.nav ul {
display: inline;
padding:6px;
margin: 4px;}

With this in the body

<div class="nav">

<ul>

<a href="#">Menu</a>
<a href="#">Contact</a>
<a href="#">Fundraising Companies</a>
<a href="#">Forums</a>

</ul>

</div>

After doing that, in both IE and FF the links appeared as

Item 1 Item 2 Item 3 Item 4

I thank added a ¦ to the end of every link, so got this

<div class="nav">

<ul>

<a href="#">Menu</a>¦
<a href="#">Contact</a>¦
<a href="#">Fundraising Companies</a>¦
<a href="#">Forums</a>¦

</ul>

</div>

this make the link menu appear as

Item 1¦ Item 2¦ Item 3¦ Item 4¦

For the H3 title, I had to add it in like this

<div class="nav">

<ul><h3>

<a href="#">Menu</a>¦
<a href="#">Contact</a>¦
<a href="#">Fundraising Companies</a>¦
<a href="#">Forums</a>¦

</h3></ul>

</div>

Any other way would break up the format in FF again.

This is how I wanted it originally, can anyone see an issue with this code in some browsers ect?

[Fotiman]

That is invalid HTML.
You need the <li>. If it's got display:inline, then both Firefox and IE should be displaying the list items inline. Otherwise, perhaps one browser or the other has a cached version of the stylesheet. Try refreshing.

Also, be sure to validate both your HTML and stylesheets. Perhaps there is a typo or error that is causing your styles to not get parsed properly:

[validator.w3.org...]
[jigsaw.w3.org...]

[edited by: Fotiman at 7:11 pm (utc) on Mar. 28, 2006]

[thorton]

<ul><h3>

<a href="#">Menu¦</a>
<a href="#">Contact¦</a>
<a href="#">Fundraising Companies¦</a>
<a href="#">Forums¦</a>

</h3></ul>

</div>

Would that be better?

[Fotiman]

I think your problem is that <h3> is a block level element. So even though your <li> is inline, it contains a block, thus forcing it to it's own line. Try adding this:

li.inline h3 {display: inline;}

[zackattack]

Thorton hi again

This should have worked in both FF and IE - Like Fotiman says you must check to see if you are using valid HTML and CSS also check what DOCTYPE are you using ..?

There is another way to achive the same result which uses floats:

<ul class="nav">
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Fundraising Companies</a></li>
<li><a href="#">Forums</a></li>
</ul>

CSS:

ul.nav {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
ul.nav li {
float: left;
margin: 0;
padding: 0;
border-bottom: solid 1px #009;
display: inline; /*keep this in for ie float bug */
}
ul.nav li a {
float: left;
margin: 0 2px;
padding: 4px 6px;
text-decoration: none;
background-color:#ccc;
}
ul.nav li a:hover {
background-color:#eee;
}

Can you post up some more code for your page so we can see exactly what the issue is, if we can see all the page/code we can see what the problem is - clearly there is something causing this to not work - Firefox has always displayed these two methods correctly as far as I am aware

ZA

PS: (Fotiman - is using the h3 inside the the ul tag also invalid..?)