Float Expert needed.

Float Expert needed. (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

michaelea -> Float Expert needed. (11/2/2008 14:32:00)
I Love floats - only when they work as expected! here's the page again: http://css.northcoastcomputerservices.com/z-tables.htm See the floated boxes in the middle - well, how do I kill the 3rd floated box's float??? If I clear:both or clear:left or clear:anything then the page clears the left and/or right web page columns and the table (in the middle content) 'floats' waayyy down to the bottom of the left or right margin. I get that a float has no height but.......... The only way I've found - for now - is to put that red h2 in there and give it a {display:block} - and I'm not even sure that that is stable or correct? Giving the table {display:block} doesn't work for me. Rather than ramble on about the hours I've spent researching this and the attempted solutions that failed, could anyone please help me on how to clear the float on just the right hand box in the middle of the page above - and NOT the left or right column floats!? Clearly, clearing floats is not as easy as it first seems.. Thanks - again!

Tailslide -> RE: Float Expert needed. (11/2/2008 14:43:36)
Not sure what's wrong - it all looks fine to me..? If I remove the heading it still looks fine... Headings are display block by default (so are tables) so you don't actually need to declare that.

michaelea -> RE: Float Expert needed. (11/2/2008 15:02:57)
Do you see the problem now that I have removed the H2 Tail? (I am using FF)

michaelea -> RE: Float Expert needed. (11/2/2008 15:06:36)
Oh my Gawd - you could knock me over wid a fedder! It craters now in FF - without the H2 but looks just fine in IE7..... Argghhhhhhhhhhh!@ I'll have to make up 2 pages I think tables-ff.htm and tables-ie.htm Doing a Search for 'clearing floats in Firefox' looks like I'm in for a nother fun nights' reading and learning!!! Thanks for checking Tailslide.

Tailslide -> RE: Float Expert needed. (11/2/2008 15:24:07)
Michael - what exactly is it doing in FF? It looks absolutely fine here... Maybe it's a cache issue? I've attached a screenshot - the table is clearing the floats fine. [image]local://upfiles/15313/D9B834D63FF2457A9F2B286705D07D59.gif[/image]

michaelea -> RE: Float Expert needed. (11/2/2008 17:06:48)
Firefox 2.0.0.17 Under Vista gives me the screenshot below.... I cleared my ff cache, closed and reloaded. Weird! [image]local://upfiles/22245/49D094DE51FB49BB81F404AADD0D8A47.gif[/image]

Tailslide -> RE: Float Expert needed. (11/2/2008 17:47:42)
Hmmm weird - that's not what would happen with an uncleared float - that's something entirely different... Not sure what. It's a bit late for me at the moment - I'll have a look tomorrow morning and see if I can figure it out.

michaelea -> RE: Float Expert needed. (11/2/2008 17:52:42)
ok. well, that gives me some protein to feed off. It's odd that you should see it ok and not I. I guess that means it's not the coding. ?!?! Maybe the FF version? Hmmmm I'll hunt around while the night passes in your land....

michaelea -> RE: Float Expert needed. (11/2/2008 19:11:07)
Added Bonus for anyone reading this thread: See how your Web Page Looks in other Browsers. http://browsershots.org/ HTH.

Tailslide -> RE: Float Expert needed. (11/3/2008 7:32:48)
Yep - specific FF 2 bug. Add "clear:left" to the rule for the table and that sorts it.

michaelea -> RE: Float Expert needed. (11/3/2008 13:21:04)
You know, Now that FF3 has been out for a while I took the plunge and upgraded - That certainly solves the issue!! :) However, just to pursue this issue a li'l more, as you mentioned above, I had previously applied clear:left to the table (about 189 times!) . BUT the float that was cleared was the left column float - NOT the left float from the floating content boxes. So, when clear:left was applied to the table - it was clearing the float for the left column rather than the floating boxes - and, same trouble that I've had for ages - the table 'floated' waaayyyy down the page to the level of just below the left column - rather than just below the floating boxes! I have had this issue for quite a while without knowing what to do or whether it was, as usual, my coding that sucked. I always felt that there should have been an additional question on the clear:left or clear:both - "which left float would you like to clear?" or, "which right float would you like to clear?" For me it's always been the left and right column floats that are cleared rather than the main content floats. This has been really really anoying for a year or more.... Anyways, this again has forced me to relook at my attitude not only to IE6 but also FF2 or, to put it another way I looked to see how many visitors were using IE6 and FF2. To put it gently, it does seem that Firefox users are ...... quicker to update their browsers.. thanks Helena.

Tailslide -> RE: Float Expert needed. (11/3/2008 14:19:38)
Hmmm - actually the clear left may just have looked like it was working because the left hand column is about the right height. Generally the thing I do if I'm running into difficulties with multiple floats is to stick the troublesome bits into another div - sort of like controlling a load of puppies by sticking them in a box! Interestingly - just looked at the site on Camino (mac) and it's doing the same thing there... I'll check in Safari in a minute and let you know if it's misbehaving too. You're right - FF users do tend to update their browser more frequently than IE users (who don't get the opportunity more than once every 6 years or so!).

Tailslide -> RE: Float Expert needed. (11/3/2008 14:27:19)
Yep - happening in Safari too... Give me a few minutes.

michaelea -> RE: Float Expert needed. (11/3/2008 14:45:56)
quote: ORIGINAL: Tailslide Yep - happening in Safari too... Give me a few minutes. quote: http://browsershots.org/

Tailslide -> RE: Float Expert needed. (11/3/2008 15:30:57)
Got to go unfortunately. Can't be arsed with Browsershots - takes too long. I've got most browsers (not FF2 anymore!) and 2 OSs. It's difficult to fix for me as it's not the sort of layout I tend to use - margins holding off floats.... too tricky. It's like there's not a good enough barrier between them and they seem to interfere with each other. For 3 column layouts I use two floated divs - the smaller floated div is the right sidebar. The larger div contains the content and the left sidebar (both floated). I tend to float them all the same way to avoid IE float drop bugs but frankly either will do. I don't know why but I get less trouble with this. Here's a test page with that setup: TEST PAGE As you'll see I've got the 3 floated boxes followed by the table. I can't swear it works in FF2 without checking but it's working in Camino (which is based on the same engine) and Safari as well as the usual suspects on the PC.

d a v e -> RE: Float Expert needed. (11/3/2008 16:34:24)
quote: ORIGINAL: Tailslide sort of like controlling a load of puppies by sticking them in a box! that sounds cruel! :) hope you include airholes...

michaelea -> RE: Float Expert needed. (11/3/2008 18:17:56)
quote: ORIGINAL: Tailslide .... Can't be arsed with Browsershots - never heard that one b4. Would that be like, errrmmm, double the inadequacies and imperfections of half-assed? [:-]

Tailslide -> RE: Float Expert needed. (11/4/2008 2:03:52)
Possibly! [:D] Charming British colloquialism meaning I can't be bothered (but less letters to type!). Browsershots is fine as long as you're using it while the US is asleep - otherwise it's a pain. Browsercam is a better system (it includes remote operating systems) BUT it's expensive.

Page: [1]

Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI

0.09375