Wed, 2005-10-26 17:20
Hello,
I've been using this method to do float containment:
http://www.quirksmode.org/css/clearing.html
I like that method because I can do it in the css without any more markup.
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
And it really seemed to be awesome until I began noticing that in Firefox (PC and Mac), the overflow would actually hide, but only somtimes. As far as I can tell, it was only when the page was hit the first time. Upon a second visit or a refresh, it would display correctly. I tried using overflow: auto because of the hiding problem, but I'd like it to work like the example.
It works fine in IE 6 on the PC and Safari on the mac. Any ideas?
Here's the address of the page I'm working on:
http://www.dev.greenlighttoys.com/singleproduct.php?id=28&cat=29
Wed, 2005-10-26 20:13
#1
Css float containment: visibility method - firefox problems
Have you tried:
overflow: auto;
?
Wed, 2005-10-26 23:45
#2
Css float containment: visibility method - firefox problems
Besides {overflow: hidden;}, there is, as TPH said, {overflow: auto;}. See the css2.1 specs, section 10.6 or there abouts.
Too, you can use {display: table;} or {display: inline-block;}. Of these two, 'table' has more support. The inline-block thingie is in the above reference. I don't know where the table ref is (anybody? clue me in).
Then, there is Tony Aslett's elegant clearing hack, found on this site.
Each of these methods work, but circumstance can mean one or the other might have unintended consequences. You'll need to play with them until you get a feel for which will work better in a given case. Then you'll still have to test.
cheers,
gary
Thu, 2005-10-27 09:57
#3
Css float containment: visibility method - firefox problems
Hi
Don't forget, that when you use overflow:auto you often have to hack IE to give it overflow:visible, otherwise it often doesn't like matters.
Trevor
Mon, 2005-10-31 03:44
#4
Css float containment: visibility method - firefox problems
Sorry guys, I thought I made it clear; overflow: auto leaves scrollbars. It just does not work in firefox without a refresh. Strangely, it worked fine in IE.
Mon, 2005-10-31 04:01
#5
Css float containment: visibility method - firefox problems
kk5st wrote:
Besides {overflow: hidden;}, there is, as TPH said, {overflow: auto;}. See the css2.1 specs, section 10.6 or there abouts.
Too, you can use {display: table;} or {display: inline-block;}. Of these two, 'table' has more support. The inline-block thingie is in the above reference. I don't know where the table ref is (anybody? clue me in).
Then, there is Tony Aslett's elegant clearing hack, found on this site.
Each of these methods work, but circumstance can mean one or the other might have unintended consequences. You'll need to play with them until you get a feel for which will work better in a given case. Then you'll still have to test.
cheers,
gary
I have used the after clearing hack as well, I actually love that one but in this case I could not get it to work without a bunch of large gaps underneath my divs.
Mon, 2005-10-31 14:51
#6
Css float containment: visibility method - firefox problems
You have prodlanding as a multiply defined 'id'.