I am currently working in Safari 4.0. can someone tell me why the div id="merchluv" and the div id="crazyfor", which both have float:left, are not ligning up against each other. div id="crazyfor" is being moved below "merchluv".
I have attached a CSS and HTML file for review.
In general, this all renders fine in Firefox 3.0 - 3.5. I am trying to make it compatible with IE 6,7 and Safari 4.0. Any tips would help. Thanks!
Also, here's a very comprehensive post on floats from css-tricks. Hope it helps. All about floats
I removed the float:left on #crazyfor in the Safari web inspector and it went back up against #merchluv where it was supposed to be. That's your problem.
It looks like Safari is having troubles with handling the nested floats, specifically it seems to apply 100% width the .data div (the one that clears right) within #crazyfor div. The simplest solution would be to set width on #crazyfor.
Other than that, there doesn't seem to be much you can do, short of re-doing most of the code to make more sense. But with what you have, specifying width on #crazyfor is the fastest.
Need a link to the page.... you've attached the source but we don't have images etc.. makes it harder to see what's supposed to be going on.
Anyway, your float problem can be resolved by setting the widths of the #crazyfor and #merchluv divs try about 490px each.
There are a few other renderbugs, mostly caused because you are using the text in the "cells" to specify their height.. and different browsers render the text slightly differently.. you'd probably want to set heights and overflow: hidden on your cells.
in addition to this, is there a better way to have the horizontal borders in the tables solid as opposed formatting the cells individually to have a bottom border?