Email conversation
| From | Sarah Neville |
|---|
| To | Me |
|---|
| Subject | Firefox bug with floating collapsing nested list |
|---|
| Date | 22 February 2009 19:02 |
|---|
Hi,
Thanks so much for your scripts, they're awesome. I'm using your
Nested List Collapsing Script on this page: [URL] I
want to make a simple collapsing navigation list to the right of the
content, but it doesn't work right in Firefox.
I'm on Windows XP. The doctype is XHTML Transitional. It's completely
fine in IE 7, Opera 9.63, Safari 3.2.2, and Google Chrome.
But in Firefox 3.0.6, when you expand a list, it doesn't push back the
other text, but overlaps it.
Here is a screencap of the problem, since I don't describe it well:
[URL]
Also the first list, called "[sample text]" works okay, although
the others don't.
Do you know how to fix this or why it's happening?
Thank you so, so much for reading this email!
Sarah Neville
| From | Me |
|---|
| To | Sarah Neville |
|---|
| Subject | Re: Firefox bug with floating collapsing nested list |
|---|
| Date | 23 February 2009 09:45 |
|---|
Sarah,
> it doesn't work right in Firefox.
> ...
> Do you know how to fix this or why it's happening?
Thanks for the very professional bug report.
The overlap problem is caused by a bug in Firefox, which is still present in
the latest beta. It is triggered by the height of a float being changed,
when it sits beside an element that has top padding. In your case #content
has a 290 pixel top padding. If the float changes height by less than 290
pixels, it fails to reflow, so the new float content overlaps the old static
content. I have set up a demo here:
http://www.howtocreate.co.uk/mozBugs/displayfloat.html
There are two possible solutions to this problem, and you can choose which
one works best for you:
1. Change your CSS so that #content has little or no top padding at all -
for example, you could put a top margin on the first element inside it. Make
sure there is still at least 1px border or padding on the top of #content to
prevent a margin collapse from happening. You seem to know what you are
doing well enough already to understand what I meant by that, but just in
case you need more information...:
http://www.howtocreate.co.uk/tutorials/css/margincollapsing
2. Force it to reflow every time something is changed in the list. This
requires you to add something to my code. At the end of the "clickSmack"
function, just before its closing "}" character, and after this line:
} else { oThisOb.style.display = ( oThisOb.style.display == 'block' ) ?
'none' : 'block'; }
add this:
document.body.style.minHeight = '1px';
setTimeout(function () {
document.body.style.minHeight = '';
},10);
Let me know if you need any further guidance with that.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Sarah Neville |
|---|
| To | Me |
|---|
| Subject | Re: Firefox bug with floating collapsing nested list |
|---|
| Date | 23 February 2009 15:16 |
|---|
Hi,
Thank you so so much. The new piece of script works perfectly. Thanks
for replying so quickly too!
Sarah Neville
| From | Me |
|---|
| To | Sarah Neville |
|---|
| Subject | Re: Firefox bug with floating collapsing nested list |
|---|
| Date | 23 February 2009 21:28 |
|---|
Sarah,
> Thank you so so much.
No problem at all. Good to know it works where you need it.
By the way, since you discovered a bug in a browser, you are encouraged to
report it to their bug tracking system (if you have not done so already).
Firefox's is here:
https://bugzilla.mozilla.org/
(Links to the bug tracking systems for other browsers are on my contact
page, for when you find more bugs...)
You can use my demo page as a URL for them to see the bug if you want - I
will keep the URL available.
Tarquin