homepage Welcome to WebmasterWorld Guest from 54.196.120.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Width problem in Chrome
Chrome incorrectly expands 0-width elements
luismartin




msg:4393143
 8:59 pm on Dec 1, 2011 (gmt 0)

I'm coding an accordion with Javascript, but I'm having a problem with CSS in Chrome.

This is a collapsed tab in the accordion:

<div class="tab">

<div class="tab-button" style="cursor: pointer;">
<span>2011</span>
</div>

<div class="tab-content" style="width: 0px; opacity: 0;">
.... // content with a fixed width of 400px
</div>

</div>


I've checked with Firebug that in Firefox the container div (div.tab) has the width of div.tab-button, since div.tab-content has zero width and no opacity.

However this doesn't happen in Chrome. The width of div.tab keeps having the internal width (400px) despite the width and opacity of div.tab-content are forced to zero.

What could I do to fix this? I tried by adding visibility:hidden too, but no way.

Any help would be appreciated.

 

Paul_o_b




msg:4393215
 12:05 am on Dec 2, 2011 (gmt 0)

Have you tried overflow:hidden on the zero width element?

luismartin




msg:4393418
 1:04 pm on Dec 2, 2011 (gmt 0)

Yes, I've tried overflow:hidden with this element (div.tab-content) and even with all the descendants and ancestors (div.tab and div.accordion), and the inner contents are still forcing the zero width container to remain the same width as its children.

I'm not sure which behaviour (Firefox or Chrome) is responding properly to the standards, but I need to have it fixed for all of them.

Paul_o_b




msg:4393545
 7:06 pm on Dec 2, 2011 (gmt 0)

Ok, I can see an issue in webkit and it certainly looks like a bug as the width should not expand if the element has zero width.

If you are trying to hide the element then display:none or position absolute and position offscreen will make the elements behave as normal.

Otherwise if you must have that width:0 for some reason then you could offset the width with a negative margin.

e.g.

.tab-content{width:0;margin-right:-400px;}


That should make chrome behave but check it doesn't have adverse effects.

luismartin




msg:4393782
 10:41 am on Dec 3, 2011 (gmt 0)

Hello Paul, and thanks for helping! How did you figure out it is a bug in Chrome?

Your solution would work in my case if I didn't have to use a gradual slide effect when a tab is opened/closed. I've also tried with the negative margins, and it statically works, but not during the slide effect.

My final solution, or at least temporal, until I get something better, was to apply a similar width animation to the parent (div.tab) besides the one I made for div.tab-content. In this case the collapsed width wouldn't be 0, but the width of div.tab-button which is always visible.

In addition, I had to do this only if the browser was Chrome, so I had to filter it with a condition.

I get it working. This doesn't affect FF/IE, and Chrome displays the accordion correctly.

However there is an ugly flicker in Chrome during the slide effect. So I'm yet not satisfied with my solution.

Paul_o_b




msg:4393857
 6:23 pm on Dec 3, 2011 (gmt 0)

It's certainly a bug because an element with zero width that has content of 400px width should still remain at zero width. The content should overflow the container as per the default (overflow:visible) and have no effect on surrounding content (except to overlap).

It looks like chrome has forgotten that the overflowing content was contained inside an element of zero width.

Actually, on testing again the bug is actually the zero width itself. If you change it to width:1px then chrome shrinks the parent to match. Change it to zero and the element expands.

Definately a bug :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.tab{float:left;background:red;}
</style>
</head>

<body>
<div class="tab">
<div class="tab-button" style="cursor: pointer;"> <span>2011</span> </div>
<div class="tab-content" style="width: 1px;">
<p style="width:400px"> .... // content with a fixed width of 400px</p>
</div>
</div>
</body>
</html>



You should log a bug at the Chrome site or it won't get fixed.

luismartin74




msg:4394503
 7:31 pm on Dec 5, 2011 (gmt 0)

Thanks a lot Paul! You've been very helpful.

Maybe the 1 pixel width will work temporarily, as all the affected backgrounds are white. I'll test it.

And yes, I'm going to report the bug right now :)

Best regards!

Luis.

alt131




msg:4394742
 1:23 pm on Dec 6, 2011 (gmt 0)

Hi luismartin74, welcome to WebmasterWorld :)

And good spotting as usual Paul.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved