cross-browser compatibility issues w/ floats

[sysadmin42]

here's the page: [URL unfurl="true"]http://www.jaymunda.com/temp/calculators/tools.html[/url]

the css is under [URL unfurl="true"]http://www.jaymunda.com/temp/css/peoples_css.css[/url]

The CSS works fine in IE 6.0 for Windows. All other browsers are terrible and I'm pulling my hair out! Anyone know how to fix this issue? I really need to use relative <div> layouts because of the way the site is supposed to work.

pleh!

"Computer illiterate is a dirty word."

 

[Vragabond]

I would get rid of all the positioning and work mostly with the default document flow. Use a little bit of floats to get your columns working and that's about it -- it's not a difficult site layout.

 

[sysadmin42]

I'm not sure what you mean by working with the document flow?

"Computer illiterate is a dirty word."

 

[Vragabond]

See, in html we have two types of elements: inline and block-level. The first ones occupy only the space where there content is. Examples of such would be span, img, input, label, strong and such. Block-level elements are a block on its own and that means that they (by default) begin in a new line after the previous element.

Now, looking at your site I see four main blocks: top header, navigation, main content and footer. These I would make initial for divs. Inside the main, you have two colums, which I would achieve by floating two divs. When you get that initial structure in (note that other than floating [and maybe background colours for better orientation] I would not apply any css styling to these elements at this point). Now that you have the structure you want, you just want to beautify it: you do this by simply adding margins, borders and padding to the existing blocks to make them appear like you want them to (gaps, borders, colours, etc). Now you begin with the placement of individual elements inside these main blocks.

If you put in your html code footer below the content which is below the navigation which is below the header, these elements will natuarally appear in that order. They will follow the normal document flow. That's basically what it means.