Overflow: hidden in nested div Firefox Bug

[Witchdoc]

Hey there all – firstly, I’m a newbie to the forum, and I usually don’t sign up for new accounts unless I really feel the need. But I’m really stumped on this one. I’m believing its def a CSS issue. If not then it’s likely a scripting conflict. But I need to make sure. If it’s a red flag for the latter, speak up! I’ll figure out another solution.

I’m having a problem with my script generated tab nav element (for coda-slider 2.0) honoring the overflow:hidden property in Firefox on a Mac. The ul nav is a single child in a nested div and set to no position or floats. It’s fine in IE 8, Safari, Opera, Firefox(pc), (IE7 has issues I’ll deal with later, and vertical overflow is apparent I understand). I’ve checked the source code of the script in all browsers and all works fine. But it seems that my CSS, is pushing out my ul width to ???. I can’t call out any width to the ul element either no matter what I try. I’ve applied positioning, z-indexing, clearing floats, eliminating float elements to nested and parent div’s – all the recommended fixes to no avail. If I AP the ul, I can’t position it. Which I obviously need to do. Firefox overflow prop still shows scrollbar?!?! I’m out of ideas. Any help?!?!

url:
http://voodoobean.com/voodoo2/gallery.html

CSS:
.coda-nav ul {
overflow: hidden;
clear: both;
border: 1px solid #201103;
padding-left: 30px;
}
.coda-nav ul li {
display: inline;
font-size: .70em;
letter-spacing: .1em;
}
.coda-nav ul li a {
margin: 60px 0 0 0;
float: left;
background: #6a4324;
color: #ce965a;
padding: 7px 12px;
text-decoration: none;
font-family: "Trebuchet MS";
text-transform: uppercase;
border: 1px solid #201103;
}

My div elements are bordered for better trouble-shooting.

Don’t want to waste anyones time – so if I’m barking up the wrong tree, just say so, or let me know which code to post. In the meantime I’m sure many here have firebug or equal to examine above url code and css. Still new to troubleshoot forums so don’t know protocol for these things.

Thank you kindly in advance.

Randy

[virtual]

Try changing to this in coda-slider-gallery.css

Code:

.coda-slider-no-js .coda-slider {
height:200px;
overflow:hidden !important;
padding-right:20px;
}

It removes the scrollbar in Firefox on Mac, as far as I could see in Safari on Mac it’s OK too. However it might have repercussions in IE :oops:

[Witchdoc]

Thanks Virtual –

Tried and no go. I’ve actually been able to work around the issue by adding a ‘width’ to the ul li. Which I can’t understand how it works, but it it’s getting done what I need to get done. In any event, I really appreciate the suggestion.

Any other suggestions are welcome – although my current CSS /* Tabbed Nav */ callouts are now amended so… link will now show issue.

Thanks much all.

[Author]

Posts