WebKit doesn't paint background-color for entire width of final inline list item

views:

247

answers:

+1 Q:

WebKit doesn't paint background-color for entire width of final inline list item

On our website http://www.dimagi.com, the items in the jQuery menu near the top of the screen gain a background-color on hover. The hover background-color of the rightmost list item ("About Us") is cut off at the very right edge of the text, seemingly only in WebKit (tested Safari and Chrome in Windows XP).

Can anybody see what I might be doing wrong in the CSS? Or is this some obscure WebKit bug?

The background is getting clipped because you have a block element inside an inline element and the box model works quite differently for the two. If you set the display property of #dropmenu > li to inline-block instead of inline it will work, but I don't know how IE handles that. The other option is to set it to display: block and float the lis. Either way, you'll have to do a little reworking for the menu CSS.

I figured it out by playing around with Chrome's Developer Tools until I got it to look right-ish. If you're not familiar with it, it's a very similar tool to FireBug in Firefox. Invaluable for debugging your CSS.

Emily 2010-01-26 17:54:10

Thanks a lot Emily. You're right that Internet Explorer is the reason I avoided using `inline-block`. I've kept floating block `li`s as a last resort.When you say that I have a block element inside an inline element, are you referring to the `ul` s within the `li` s? What I can't figure out is why only the last `li` is affected, when they all have `ul`s in them.

Jay 2010-01-26 18:07:18

I am actually referring to the `a` inside the `li`. I always have trouble wrapping my head around the exact difference in inline vs. block rendering, so I can't really explain the why of it to you. There's some info about a hacky way to get inline-block in IE at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ but I can't verify it's effectiveness.

Emily 2010-01-26 18:32:18

I think `a` is an inline element, isn't it? `display: inline;` is what Chrome's Developer Tools shows for its computed style.

Jay 2010-01-26 18:38:57

You are quite right. I thought I saw a `display:block` on the `a` but I guess I'm making it up. Regardless, margin and padding work quite differently for inline elements. There's a reasonably good illustration at http://css-tricks.com/the-css-box-model/ that shows how the padding expands around the element without actually affecting layout.

Emily 2010-01-26 21:38:50

ansaurus

tags:

views:

answers:

WebKit doesn't paint background-color for entire width of final inline list item

related questions