CSS overflow: hidden

Question

I have this HTML & CSS and the 'overflow: hidden' tag is not working in firefox. This is stumping me... anyone know why it's not working? Is it just because overflow tag isn't support on the A tag?

#page_sidebar_tabs A {
    float: left;
    border: 1px solid #0F0;
    display: block;
    line-height: normal;
    padding-top: 18px !important;
    height: 18px !important;
    overflow: hidden !important;
    border-bottom: 2px solid #EEB31D;
}

#page_sidebar_tabs A:hover, .sidebar_active_tab {
    background-position: 0 -18px !important;
}

a#sidebar1 {
    background: url(../sidebar/tab1.gif) top left transparent no-repeat;
    width: 76px;
}

a#sidebar2 {
    background: url(../sidebar/tab2.gif) top left transparent no-repeat;
    width: 55px;
}

a#sidebar3 {
    background: url(../sidebar/tab3.gif) top left transparent no-repeat;
    width: 55px;
}

HTML:

<div id="page_sidebar_tabs">
    <a href="#" id="sidebar1" onClick="return SidebarTabOnClick('1');">ABC</a>
    <a href="#" id="sidebar2" onClick="return SidebarTabOnClick('2');">DEF</a>
    <a href="#" id="sidebar3" onClick="return SidebarTabOnClick('3');">GHI</a>
</div>

EDIT:

i just wanted to update/clarify:

This is to implement CSS rollovers, the A block is supposed to be 18px high, the background image is 36 px high, and the rollover would push up/down the background image to achieve the roll over.

The text in in place to gracefully (hopefully) degrade if they don't have CSS or whatever. the padding-top ideally pushed the text BELOW the visible block of the A tag, hence the overflow hidden.

The overflow should hide the text that is vertically pushed down (leaving only the background image visible), however, it's still showing in firefox.

Answer 1

In order for overflow: hidden; to make a differerence, you need to set the width of the object to a fixed value.

#page_sidebar_tabs A {
    float: left;
    border: 1px solid #0F0;
    display: block;
    line-height: normal;
    padding-top: 18px !important;
    height: 18px !important;
    width: 30px;                /* <--- note this line */
    overflow: hidden !important;
    border-bottom: 2px solid #EEB31D;
}

If you need to have different widths on objects with this css id, just create different classes for them and set the width in the classes. You can apply any number of css classes to an object by separating them with a space:

<div class="oneclass anotherclass">this div will apply both the .oneclass
    and the .anotherclass css style classes.</div>

Answer 2

It does work. The only reason it doesn't appear to be is that your content isn't long enough to cause an overflow... If your html looked like this you would see it work just fine:

<div id="page_sidebar_tabs">
    <a href="#" id="sidebar1" onClick="return SidebarTabOnClick('1');">ABCABCABCABCABCABCABC</a>
    <a href="#" id="sidebar2" onClick="return SidebarTabOnClick('2');">DEFDEFDEFDEFDEFDEFDEF</a>
    <a href="#" id="sidebar3" onClick="return SidebarTabOnClick('3');">GHIGHIGHIGHIGHIGHIGHI</a>
</div>

Answer 3

It's working just fine.

If you see a difference in Firefox from Internet Explorer, it's because it's displayed incorrectly in Internet Explorer.

If you don't have a proper doctype on your page it will be rendered in quirks mode in IE, which means that it uses an incorrect box model where the padding is not added to the size of the element. This makes the links 18 pixels high instead of the correct 36 pixels.

W3C: recommended list of doctypes

Wikipedia: IE box model bug

Answer 4

What Alconja said, but also to be pedantic you should really define your rules for the a element with a lowercase a and not an uppercase A.

Answer 5

The overflow should hide the text that is vertically pushed down (leaving only the background image visible), however, it's still showing in firefox.

Padding is added to the element's content height (which is what the height property specifies in the default box model), it isn't subtracted from it. Try height: 0 to see the text disappear and the box remain as tall as the padding-top.

---

CSS 2.1 Specification: Box model