I have discovered a problem with Google Chrome. When I have elements in <li> tags and style them to give them a background color in google chrome there are thin white lines after each <li> .... </li> But in firefox and IE it doesn't show this.
is there a way to fix this, maybe a special bit of css to add?
A little more info perhaps? A standard list with elements with background color don't show any white lines for me in Chrome: http://jsfiddle.net/senff/pQ9UH/1/
But why use spaces in the first place? Current day CSS can space out items much better/easier. Also, I would suggest two columns placed next to eachother.
You shouldn't be using   for adding margin/padding. Rather, embrace CSS to support this for you - I've added the margin to the UL itself rather than the LI's as ultimately they're your list containers.
I've also added a clearfix in as we're floating the UL elements which means the containing footer div doesn't collapse, so make sure to retain that.
To go a little off-topic here: is this clearfix method still the way to go nowadays? Or perhaps again? Personally, I never preferred the :after thing (big supporter of separating content and layout), and I use overflow:hidden or a float on the container element to make it wrap its contents, but if that is already outdated (again), I'd be happy to hear about it! :)
Clearfixing is the best route to go as otherwise adding in
<div class="clear"></div>
etc is un-semantic. It's all much of a muchness but Clearfixing is IMO the best route to go as adding markup purely for presentation isn't the best way to go.
I know what you mean, I wouldn't use an additional clearing div either. But what I meant, is your method of clearfixing still the preferred/recommended method? I thought it was not needed anymore at all -- by putting overflow:hidden on the containing element, or floating it.
It's details I know, but was just wondering what today's unofficial "standard" is for clearfixing.
Unless I'm mis-understanding what he's written he's actually talking about the trailing . that might appear in legacy versions of Firefox?
When you say "not needed anymore" I assume you mean for newer browsers? Potentially - but it's always best to use a backwards compatible clearfix.
Additionally - I don't know if floating your parent will be an option - for example, unless it's the wrapper div it's also going to need it's parent to clear it (and so on).
Even then, only applying it to the wrapper will not clear children of children.
In this very example, you use the content:"" method on the footer to clear it. Without that clearing, the footer just doesn't wrap around the lists: http://jsfiddle.net/mnFNQ/4/ (gave the footer a border so it's clear that it doesn't have a height and that the lists aren't "in" it).
So to fix this, you could use the clearfix method, but (in my humble opinion) it's a lot simpler to just give the footer the property overflow:hidden: http://jsfiddle.net/mnFNQ/5/
Which is my personal preference to clear floats, over the content:"" method.
You raise a good point so it's definitely worth discussion. I know there are draw backs to using overflow: hidden, such as if you purposefully want to position a div partially outside the element for example. Additionally - I'm under the impression things like drop-shadow in CSS won't work in such a scenario as they'll be clipped if the elements are against the edges.
Whereas both will work with if clearfix:after is used instead.
@Senff There is no one best way to clear, or more correctly - contain, floats. It's best to know the different methods and apply them in the situation that warrants it. I personally still use overflow: hidden; over 90% of the time.
I have discovered a problem with Google Chrome. When I have elements in
<li>tags and style them to give them a background color in google chrome there are thin white lines after each<li> .... </li>But in firefox and IE it doesn't show this.is there a way to fix this, maybe a special bit of css to add?
Take a look at this:
http://jsfiddle.net/mnFNQ/1/
But why use spaces in the first place? Current day CSS can space out items much better/easier. Also, I would suggest two columns placed next to eachother.
http://jsfiddle.net/mnFNQ/2/
You shouldn't be using   for adding margin/padding. Rather, embrace CSS to support this for you - I've added the margin to the UL itself rather than the LI's as ultimately they're your list containers.
I've also added a clearfix in as we're floating the UL elements which means the containing footer div doesn't collapse, so make sure to retain that.
The clearfix I've used is from http://nicolasgallagher.com/micro-clearfix-hack/
It's details I know, but was just wondering what today's unofficial "standard" is for clearfixing.
EDIT: see final paragraph of Nicholas' article ;)
When you say "not needed anymore" I assume you mean for newer browsers? Potentially - but it's always best to use a backwards compatible clearfix.
Additionally - I don't know if floating your parent will be an option - for example, unless it's the wrapper div it's also going to need it's parent to clear it (and so on).
Even then, only applying it to the wrapper will not clear children of children.
In this very example, you use the
content:""method on the footer to clear it. Without that clearing, the footer just doesn't wrap around the lists: http://jsfiddle.net/mnFNQ/4/ (gave the footer a border so it's clear that it doesn't have a height and that the lists aren't "in" it).So to fix this, you could use the clearfix method, but (in my humble opinion) it's a lot simpler to just give the footer the property overflow:hidden: http://jsfiddle.net/mnFNQ/5/
Which is my personal preference to clear floats, over the
content:""method.Anyways, never mind!
Whereas both will work with if clearfix:after is used instead.
Maybe we should start a new thread?