3

So, check out this screenshot of a page I'm working on in Chrome Developer Tools:

The top rule in 'Matched CSS Rules' suggests that the width of the element should be 160px.

But in 'Computed Style' the width is actually 0px.

If you click on the '0px', it again shows the rule suggesting that the width should be 160px. But it's not.

What's going on? What is setting the width to 0px that is invisble to Chrome Developer Tools?

And how can I debug this?

Community
  • 1
  • 1
AP257
  • 89,519
  • 86
  • 202
  • 261

3 Answers3

8

the link uses display: inline;. You want either display: inline-block; or display: block; (if you need IE6-7 support).

You may want to read the spec on the display property.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
4

Since this is a display: inline element you can't set it's width. Try display: inline-block.

orlp
  • 112,504
  • 36
  • 218
  • 315
  • Thanks. Any idea what tools I can use to help me work this kind of stuff out for myself? – AP257 Jan 17 '11 at 20:46
  • Hmm, not really, [google](http://google.com/) is the way to go for me. You could read every specification but that will cost you a __lot__ of time. – orlp Jan 17 '11 at 20:47
  • @nightcracker, @AP257, the [CSS Spec](http://www.w3.org/TR/CSS21/) isn't *that* hard to read. – zzzzBov Jan 17 '11 at 23:13
  • True, but the CSS spec is not the only spec :) – orlp Jan 17 '11 at 23:15
  • This is why CSS is frustrating. I've been using it on and off for about eight years; I've read CSS books. But a little rule like this can still trip me up, and there's no way to find out why it's behaving so oddly other than to ask StackOverflow... – AP257 Jan 18 '11 at 11:54
  • Hmm, I think experience is the only thing that teaches you. Just FYI, I'm 16. – orlp Jan 18 '11 at 13:18
  • If you've been using it for more than 1 year, you should have read the **entire** CSS2 and 3 spec by now. They're not difficult to read, provide inline examples, and tell you most of the case scenarios. Additionally, [quirksmode](http://www.quirksmode.org/) is a wonderful reference of browser compatibility. – zzzzBov Jan 18 '11 at 15:54
1

It has display: inline property, which makes the element ignore your width,height values, even if they are marked !important

Cronco
  • 590
  • 6
  • 18