| 12:05 am on Dec 2, 2011 (gmt 0)|
Have you tried overflow:hidden on the zero width element?
| 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.
| 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.
That should make chrome behave but check it doesn't have adverse effects.
| 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.
| 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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
You should log a bug at the Chrome site or it won't get fixed.
| 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 :)
| 1:23 pm on Dec 6, 2011 (gmt 0)|
Hi luismartin74, welcome to WebmasterWorld :)
And good spotting as usual Paul.