It seems I am having a strange issue in Chrome, with "width: 0px". I am setting the width to 0, in order to partially hide a link. On mouseover I am displaying the link, with a simple animation. While Firefox and Opera behave nicely, in Chrome I see the link's text displayed, even though the width is set to 0. (in IE and Safari I cannot test right now)

For your convenience, I added the code in a fiddle, here: /

QUESTION: How can I make Chrome display the same thing as Firefox, CSS only, if possible.

NOTE: the menu should respect the CSS: "position: fixed; right: 0px".

Any help will be greatly appreciated.

Thank you.

It seems I am having a strange issue in Chrome, with "width: 0px". I am setting the width to 0, in order to partially hide a link. On mouseover I am displaying the link, with a simple animation. While Firefox and Opera behave nicely, in Chrome I see the link's text displayed, even though the width is set to 0. (in IE and Safari I cannot test right now)

For your convenience, I added the code in a fiddle, here: http://jsfiddle/mihaidoru/yNzSH/

QUESTION: How can I make Chrome display the same thing as Firefox, CSS only, if possible.

NOTE: the menu should respect the CSS: "position: fixed; right: 0px".

Any help will be greatly appreciated.

Thank you.

• javascript
• css
• google-chrome
• width

Share Improve this question Follow edited Mar 6, 2012 at 14:36 mihaidoru asked Mar 6, 2012 at 14:18 mihaidorumihaidoru 32722 silver badges1010 bronze badges 3

• 1 Wouldn't it be "cleaner" to hide the element rather than setting the width to 0px? using either display:none; – Dave Hogan Commented Mar 6, 2012 at 14:19
• @DaveHogan — Then the slide animation wouldn't work. – Quentin Commented Mar 6, 2012 at 14:20
• I also have a padding on the right for each link, where an icon should be. For simplicity, I didn't add the images too. – mihaidoru Commented Mar 6, 2012 at 14:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Set the links to be overflow: hidden.

I have set the width to 1px instead of 0px. It makes it so that the green background appears and when you hover over it it expands as expected. I also changed it to 1px in your jQuery.

updated fiddle

You can use the css overflow property

overflow: hidden;

overflow: hidden does not work for me, try display:none; javascript reads ok.