why does content float to bottom in IE?

On this site here, my main content floats to the bottom in IE. Not to mention that the content in the banner is kinda doing the same thing as well. But everything is fine in Firefox. Can anyone shed some light on why this is?

Thanks!

 

Looks fine for me on Explorer and Firefox. The only difference I see is the horizontal bar above/below the blue text:
"Quisque tincidunt vehicula lacus. Nunc ipsum nulla, egestas eget, pharetra eu..."
- On Firefox 2.0: Line is above that text.
- On Explorer 7.0: Line is below that text.

 

He was actually referring to IE6, which is the root of all problems.

Here's a quick fix I found:

.column1 {
	width: 160px;
	clear: both;
	float: left;
	margin: 35px 5px 0 400px!important;
	margin: 35px 5px 0 200px;
}

Code (markup):

Apply that to your css code, it simply adds IE6 specific code. I know it has something to do with the Float:left command which IE seems to make much longer than it should, as if it doesn't count it as pixels. There is another solution, but it would require you to create and additional bounding div around both columns, this should work fine though.

Another thing I happened to notice was that you didn't specify a size for a lot of the fonts, especially the links, so in IE6 in particular they look oversized. What I would suggest you do is go through the css that applies to links and add a size to them, that way it doesn't look inconsistent through your entire design, or apply a global size in your 'body a' css and then the sizes that are not standard would be applied within the appropriate css... otherwise here's an example of this for the header content:

#banner ul li a:link, #banner ul li a:visited, #banner ul li a:active {
	color: #990000;
	text-decoration: none;
	[B]font-size:13px;[/B]
}

Code (markup):

 

Never use the !important hack, the fix is most likely an addition of display:inline; (to any floated element with left/right margin) to kill double margins in IE6.

 

Actually, this is correct. As someone else pointed this out to me as well. I had to add a display:inline; code to kill the double margins. But thanks for the other tidbit about font size.