What element is preventing my width attribute being applied to my tabs?

Question

I'm completely new to HTML, CSS and Javascript but drawing on previous knowledge of typical programming from Java and C along with numerous tutorials and google searches I've been piecing together a very rough image of how this all works.

Now something that is driving me crazy is I recently added a tabbed content box into my website, one that is on the main page that allows you to select one of 4 different paragraphs by clicking on the appropriate tab. I pulled it off of a tutorial and have a basic understanding of how its working.. but for some reason I cannon get it to let me adjust the width of each of these tabs..

Here is the html for the tabs:

<div id="feature-tabs">
    <ul id="tabs">
        <li><a href="#What We Do">What We Do</a></li>
        <li><a href="#What Makes Us Different">What Makes Us Different</a></li>
        <li><a href="#Our Background">Our Background</a></li>
        <li><a href="#Why We Do It">Why We Do It</a></li>
    </ul>
</div>`

And here is the associated CSS that styles it.

#feature-tabs {
    height: 16px;
    width: 150px;
}

ul#tabs {
     list-style-type: none; 
     margin: 0 0 2 0; 
}
    ul#tabs li {
        float: left;
    }
        ul#tabs li a {
            color: #42454a; 
            background-color: #dedbde; 
            border: 1px solid #c9c3ba; 
            border-bottom: none; 
            text-decoration: none;
            width: 150px;
        }
            ul#tabs li a:hover {
                background-color: #f1f0ee;
            }
            ul#tabs li a.selected {
                color: #000; 
                background-color: #f1f0ee; 
                font-weight: bold;
            }

I need this very much so for the look I'm going for but I simply cannot find out why no matter where I put width: ___px; it just won't apply.

I am wondering if there is something I'm doing which prevents width from being an applicable trait or what have you.

Thanks in advance.

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

Try adding this style:

ul#tabs li a {
    // ..
    display: block;
}

DEMO

This happens because a is an inline element by default. Inline elements don't react to height/width.

edited May 23 '17 at 12:11

Community

1
1

answered Jan 31 '12 at 19:13

calebds

25,670
9
46
74

Okay it actually works combining your answer, Joseph Silber's along with adding an additional width constraint to the ul#tabs li a {} tag to fill the box out completely. Much Appreciated – Alex Jan 31 '12 at 19:23

score 1 · Answer 2 · answered Jan 31 '12 at 19:13

1

Add the following rule to your link :

ul#tabs li a { display: inline-block; }

answered Jan 31 '12 at 19:13

Derik Nel

423
2
10

Tested in IE 7, can't get hold of an IE 6 copy though... IE7 works though... The tags for this question is HTML5 and CSS3 which kinda throws the older browsers out of the ball game (fort his question) – Derik Nel Jan 31 '12 at 19:19

What element is preventing my width attribute being applied to my tabs?

2 Answers2