PDA

View Full Version : Element losing width/height in IE7



NancyJ
Mar 20th, 2010, 04:40 PM
dlc2.hazelryan.co.uk/faqs

All looks fine when you load the page but when you click on one of the faqs and the answer scrolls down the purple 'faqs' heading shrinks and gets scrollbars.

Excavator
Mar 20th, 2010, 05:09 PM
Hello NancyJ,
I'm not sure why that .shadow is styled like that but it seems to work fine if you remove either the float:left; or the overflow:auto;, or both -

.shadow{
background:url(images/drop_shadow_tight.png) bottom right;
padding: 0 2px 2px 0;
/*float:left;
overflow:auto*/
}

I'm not sure about this though, since I could only get scrollbars to appear one time. After a re-load they would never appear again.

VIPStephan
Mar 20th, 2010, 05:17 PM
OK, firstly, this only happens if you click the first FAQ item which suggests it’s definitely some kind of bug. And secondly, it is, as always, somehow related to hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html), or the datalist not having layout, respectively. If you give the dl layout by applying, for example, min-height: 0; to it, the issue should be fixed.

As additional suggestion I’d suggest you remove the anchors in the datalist titles. Since they aren’t doing anything anyway you can as well assign the click event to the dt elements themselves, and you can also style them to have yellow text color and underline. I, for example, browsing with the “noscript” add-on enabled just saw an FAQ list with everyhing expanded, and I was wondering what the links are actually doing. If there were no links in the first place I wouldn’t even notice that they are expanding/collapsing the sections if JS is enabled/available.

NancyJ
Mar 20th, 2010, 05:39 PM
I never thought of doing the hasLayout stuff to the dl - I was doing it to the h3.

Also - the links don't do anything right now but they will in the future - just haven't gotten to that bit yet.