Grow your CSS skills. Land your dream job.

< li > with a backgroud color (problem Google Chrome)

  • # March 24, 2012 at 5:58 pm

    Hi everyone,

    I have discovered a problem with Google Chrome. When I have elements in

  • tags and style them to give them a background color in google chrome there are thin white lines after each

  • ....
  • 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?

# March 24, 2012 at 6:22 pm

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/

# March 24, 2012 at 7:44 pm

I think it might me when using  
Take a look at this:

http://jsfiddle.net/mnFNQ/1/

# March 24, 2012 at 9:27 pm

Still don’t see any white lines there, sorry….

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.

# March 24, 2012 at 9:42 pm

Here it is in a much better format.

http://jsfiddle.net/mnFNQ/2/

You shouldn’t be using &nbsp 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.

# March 24, 2012 at 10:00 pm

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! :)

# March 24, 2012 at 10:02 pm

Clearfixing is the best route to go as otherwise adding in

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.

The clearfix I’ve used is from http://nicolasgallagher.com/micro-clearfix-hack/

# March 24, 2012 at 10:09 pm

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.

EDIT: see final paragraph of Nicholas’ article ;)

# March 24, 2012 at 10:16 pm

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.

# March 24, 2012 at 10:22 pm

I think you misunderstand me. ;)

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!

# March 24, 2012 at 10:33 pm

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.

Maybe we should start a new thread?

# March 25, 2012 at 8:25 am

@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.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".