Cross browser CSS

[Medyman]

Why aren't my floats working in IE 6?

Problem site (http://www.thepaperbagwriter.org/index2.php)
CSS: Here (http://www.thepaperbagwriter.org/css/common.css) and Here (http://www.thepaperbagwriter.org/css/index.css)

They do work in FF and IE 7

[BLiZZaRD]

Looks okay to me in all browsers, but I could be missing the point. Screen shots of the problems?

I do know that IE will have a problem with right floats when pixels definitions (instead of em) as well as paddings and absolute positioning are used. I don't know why.

I could probably get it nailed if I could see which ones were the culprits though. :)

[boogyman]

IE6 has poor support for CSS in general, and almost no support for CSS 2.0.

Although floating is CSS1.0 I have often had problems with it. If you can explain exactly what the problem is and provide screen shots like Blizzard said we might be able to help out more.

[Medyman]

Alright...

Well, here's the screenshot of what it's supposed to look like (i.e. what it looks like in IE7).

http://i131.photobucket.com/albums/p307/V1SHAL/ie7.jpg

In IE 6, the column on the left drops below the right column. Also the sidebar is far far far below the actual page. I've been playing around with things but I'm not any closer.

[boogyman]

I am assuming that your "right" column has been given first in the coding of your page?

What you are experiencing is classic IE6. The margins are "overlapping" If you reduce the width of the elements I think you will see that the floats will correct themself.

If you are using percentages of the available viewport (recommended) there should be 5-10% difference. eg



div#right {
float: right;
width: 30%;
}
div#left {
float: left;
width: 65%;
}

[BLiZZaRD]

Agreed. the right column is the first one, the left column is second. so HTML would look something like:



<div id="leftcol">
//Sidebar content here//
<div id="maincontent">
//main content here//
</div>
</div>

The idea is that the "main content" is inside the "sidebar" div, so the side bar div needs to be larger, and both need a float: left; attribute in the CSS.

Alternatively, you can check out complete cross borwser full CSS supported layouts here (2 column right menu layout) (http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm) and all the other layouts too.

It is well done and easy enough to follow.

[Medyman]

If you are using percentages of the available viewport (recommended) there should be 5-10% difference

yeah...i figured as much out.
but there was an additional "clear:both" value that was setting everything off.

Naturally, adjusting the margins/widths is the first thing i tried but that didn't seem to work because that particlar div was being cleared (or rather the first element in that div).

Anyway, all's fixed.
Thanks guys!