Question

I was inspecting code on this page with firebug:

http://www.phppennyauctiondemo.com/

On the top right corner, there is a “Register” button and a link within it.

When i select the link with firebug, in the “Style” section of firebug, I can’t find the display:block attribute even though I know it’s there (it can be found on “Computed” part of firebug where it clearly says, display: block).

So if links have a default inline display, and it hasn’t been changed with css, how come this element has a display:block? What am i missing here?

Answer 1

If you scroll down the Style section for that element, you’ll notice this second rule:

#header .top-menu li a {
    color: #FFFFFF;
    float: left;
    font-weight: 700;
    padding: 0.35em 0;
}

The float declaration is what turns the link into a block element, as floated elements are implicitly display: block (as computed).