...

View Full Version : Fire fox: How do I float a list?



spc1029
08-19-2010, 07:53 PM
I have only been coding for a little less than a year, but throughout my learning process I have only been testing in chrome. I got my first free client job and just realized that I never taught myself anything about browser compatibility lol. I want the site to work across all browsers so I am dedicating the next few days to browser issues.

does anyone here know a good resource on common compatibility issues?

The problem I am having right now is with making a horizontal navigation list in fire fox.

mark up:
<ul class= "list_test">
<a href="#"><li>Hello World</li></a>
<a href="#"><li>Hello World</li></a>
<a href="#"><li>Hello World</li></a>
<a href="#"><li>Hello World</li></a>
</ul>

css:

.list_test a li {
float:left;
}

The list goes horizontal in all of the other browsers except for firefox. Does anyone know what is going on?

SB65
08-19-2010, 08:25 PM
Your html is invalid - the <a> should be within the <li>, not the other way around:


<ul class= "list_test">
<li><a href="#">Hello World</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">Hello World</a></li>
</ul>


with css:


.list_test li {
float:left;
}


I think you'll find that works a bit better in Firefox...

Some general points on browser compatibility here (http://www.simonbattersby.com/blog/cross-browser-consistency-a-beginners-guide/).

met
08-19-2010, 08:27 PM
that would be invalid markup

an anchor cannot stricly contain a list element - you want a list of links, not a link of lists.

the correct mark up is



<ul class= "list_test">
<li><a href="#">Hello World</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">Hello World</a></li>
</ul>
</ul>

css ~ ul.list_test li { float:left; }


rule of thumb - if it doesn't display right in firefox, it's wrong.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum