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.

What do you mean when you are saying that it's "not working"? What happens when you use it, and how does that differ from what you expect? — Guffa
– Guffa, Commented May 1, 2009 at 0:43

Alconja · Accepted Answer · 2009-05-01 00:44:28Z

3

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>

answered May 1, 2009 at 0:44

Alconja

14.9k3 gold badges62 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anonymous · Accepted Answer · 2009-05-01 09:04:34Z

2

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

answered May 1, 2009 at 9:04

Anonymous

50.6k1 gold badge27 silver badges19 bronze badges

1 Comment

Roy Rico Over a year ago

thanks, this was correct. I know this too, just didn't think of it.

Tomas Aschan · Accepted Answer · 2009-05-01 00:44:27Z

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>

answered May 1, 2009 at 0:44

Tomas Aschan

61.2k62 gold badges267 silver badges424 bronze badges

1 Comment

Alconja Over a year ago

He does have widths, in the a#sidebarX styles.

Guffa · Accepted Answer · 2009-05-01 00:56:41Z

1

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

answered May 1, 2009 at 0:56

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Darko · Accepted Answer · 2009-05-01 03:38:04Z

1

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.

answered May 1, 2009 at 3:38

Darko

39k15 gold badges85 silver badges107 bronze badges

Collectives™ on Stack Overflow

CSS overflow: hidden

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related