PDA

View Full Version : CSS problem with floating/inline/positioning [browser-specific, fine in Opera+IE]

alexcpp
03-28-2007, 07:03 PM
I am developing a site and I have ran into a CSS problem with some browsers. Operan and Internet Explorer show the page correctly but other browsers are having trouble.

Take a look:
https://comebackandseeus.com/main/categories.php?category_id=1

Also, take a look at shots from browsershots.org:
http://www.comebackandseeus.com/browsershots/

Apparently, it has something to do with the floating property. Please take a look at the source of the above page and at the style sheet:
http://comebackandseeus.com/1/style.php
[this style sheet is browser-specific because I had to hack some IE-specific bugs]
rmedek
03-28-2007, 07:05 PM
Welcome to CF. Please read the Rules and Posting Guidelines before posting a thread. Specifically, use more specific titles when starting a new thread.
alexcpp
03-28-2007, 07:15 PM
Welcome to CF. Please read the Rules and Posting Guidelines before posting a thread. Specifically, use more specific titles when starting a new thread.

Sorry about that. Next time I will try to put more descriptive titles.
twodayslate
03-28-2007, 07:26 PM
I do not see a problem.

edit:// you can edit the title of the thread. Press edit -> advance options
alexcpp
03-28-2007, 07:36 PM
I do not see a problem.

edit:// you can edit the title of the thread. Press edit -> advance options

thanks, didn't notice that advance options button
twodayslate
03-28-2007, 07:37 PM
No problem, your site looked fine in FF.
alexcpp
03-28-2007, 08:00 PM
No problem, your site looked fine in FF.

In Firefox? Are you sure? Please look at screenshots from browsershots.org:
http://www.comebackandseeus.com/browsershots/

A number of browsers dont bring down the footer [look for (c) copyright] to the bottom of the page. I suspect I am not following CSS standards but I can't figure out which.
twodayslate
03-28-2007, 08:02 PM
Oh I see. :rolleyes:
I do not think you can have 100% height with a floated item.
alexcpp
03-28-2007, 08:51 PM
Oh I see. :rolleyes:
I do not think you can have 100% height with a floated item.

I am not sure what you mean. I don't believe I set any hight properties to 100%. The problem is the <div name="products"> doesn't expand downward as I add new floating items into it. Again, there is no problem in Opera and IE.
rmedek
03-28-2007, 09:40 PM
It looks like the footer isn't being cleared. Floated elements are "out of flow," which means other page elements don't react to them unless their cleared. IE renders things "correctly" because it actually has a bug that renders floats incorrectly.

Add "clear:both" to #footer in your CSS and see if that fixes it. You can also Google "clearing floats" for about a zillion different methods to float and clear layout elements. The tutorials at Position is Everything are extremely helpful. Hope this helps…
alexcpp
03-28-2007, 10:16 PM
It looks like the footer isn't being cleared. Floated elements are "out of flow," which means other page elements don't react to them unless their cleared. IE renders things "correctly" because it actually has a bug that renders floats incorrectly.

Add "clear:both" to #footer in your CSS and see if that fixes it. You can also Google "clearing floats" for about a zillion different methods to float and clear layout elements. The tutorials at Position is Everything are extremely helpful. Hope this helps…

It worked! Thanks a lot.