firefox diplays columns under each other whimsically & without excuse 1

[theotrain]

ive got a 3 column layout with 3 divs, floated left, next to each other. they are all inside a container div. but the behavior im seeing seems a bit too anomalous to be explained entirely by the css.

also note: im using coldfusion templates to show different parts of the pages, so the cf server is involved.

on my local testing server (IIS / cf8) the pages display fine and consistently on all browsers. loading off the godaddy server im using the pages display fine except in firefox. but even there they work fine... sometimes. sometimes however, they display with one column under the other instead of to the left of it. if i hit refresh, it displays correctly.

what the hell kind of CSS problem makes the page load wrong, then fixes it when you refresh the page? anybody else ever experience anything like this? my connection is good and i seem to be loading the page fully the first time.

i just tried this: when the page loaded incorrectly i saved the page source (bad.cfm) then i refreshed it, it displayed properly and i saved the page source (good.cfm). on inspection both files are identical.

another thing is immediately after clearing cache, the page always loads correctly, but the next load of the same page tends to come up wrong, and needs a refresh.

it seems like clearly a firefox issue since the server is sending me identical pages each time. but it works locally without fail, so thats weird, no? that makes it seem like a load time problem where it misinterprets a page that doesnt load immediately? but after a cache clear, it does load right!

another thing i just noticed. if the page comes up wrong and i reload the page by hitting return in the address bar, the problem will remain no matter how many times i do it. i have to actually use the refresh button to get it to show properly.

any ideas?

 

[theotrain]

above i meant "they display with one column under the other instead of to the RIGHT of it". they show 1-2-3 top to bottom instead of left to right. thanks

 

[Vragabond]

Unless you show us the link (or failing that, the code), we cannot be sure. This is a common thing in table based designs (due to how tables are created) or it have something to do with pictures. But without seeing the code, we're just feeling in the dark.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[theotrain]

ok, ive made a simplified version of the page to check out. even this is pretty cluttered with crappy CSS, so just hold your nose.

you can see my simplified page here:

http://nonwhite.com/columns/index-test.cfm

and css here:

http://nonwhite.com/columns/style-test.css

when the page first loads you will probably see it correctly. 3 columns of variable height inside a yellow container. but if you click in the address bar and hit return to reload (you might need 10 or so tries) at some point the right column will move under the left column.

this error NEVER happens on my local testing server so it must be something to do with load time from a remote location? anyway i desperately need to make it go away.

in the yellow area i have a background image that is slightly wider than my 3 columns and i'm padding the columns so they align with the background image. the only reason i have the "content box" in the css is to contain that background image. when the page loads right, the alignment is just as i want it. that said im sure my css is unnecessarily complicated,, i just add stuff till it works sometimes. this does work, till i load it off a remote host, then it gets all kooky on me. ??

 

[Vragabond]

As I said. This happens because of the way tables are rendered. Since you give your #content_box a display value of table, it will adopt all the problems of tables.

The problem is that tables are rendered on the fly. So sometimes when the text does not load quickly enough, the table gets rendered too small and the third column does not fit anymore.

Easy way to solve this is to remove the display: table; from the css.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[theotrain]

when i read your first post i tried that. the problem is if i change that one line (there is only one table reference) to display:block, the yellow background disappears. same if i remove the line. same if i take away all the "display:" lines in the css. i just couldnt get it to work any other way.

any ideas?

thanks for responding!

 

[Vragabond]

Yes, many. Your issue is that the floats are not cleared. While you could count your way of doing it a solution, as you can see it brings many other issues that are far worse than the container not extending to the length of the children. Read this article on clearing floats:

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[theotrain]

ok i figured a way to make it work. i was adding the display:table to my container div because it disappeared in firefox without it. the solution i found requires me to change my html, but it does work. just before closing out the container div in the html you add an empty div:
<div id="clear"></div>

and to the css:
#clear {clear: both; margin: 0px}

this causes the container to stretch to the bottom of the contained divs instead of collapsing.

i got it from this page, if anyone is interested:

http://www.ozzu.com/website-design-...background-disappear-non-browsers-t62876.html

thanks vragabond for pointing out the "table" issue, it got me on the right track...

 

[Vragabond]

On the other hand, you could've read the article I gave you and would learn of this method and three other (more elegant) ones. And then you would be able to choose which one to use for your page. Although the method d) from the article is better achieved using [tt]overflow: hidden;[/tt] than [tt]overflow: auto;[/tt].

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]