CSS Help!

I started this in another thread... but it went off topic... The thread is
located at
http://www.macromedia.com/cfusion/webforums/forum/messageview.cfm?catid=189&
threadid=917342&forumid=12 Sorry for the new post, but I can't figure this
out! Ok, I have Firefox 1.0 and IE 6. They are rendering the CSS
differently... #main { background:#D9E6FF; margin-top: 8px; margin-right:
256px; margin-left: 8px; margin-bottom: 8px; padding:0 0 10px; color:#000000;
border: 1px solid #496F91; } #sidebar { width:240px; float:right; margin-top:
8px; margin-right: 8px; margin-left: 8px; margin-bottom: 8px; font-size:97%;
line-height:1.5em; background-color: #F1F1F1; } You can see the page at
www.muzicman82.com/blog/ It's a Blogger template, but its plain CSS. In IE, the
right margin for #main is ignored, but in Firefox the page is perfect. I tried
doubling the left margin on sidebar to 16px and that didn't change a darn
thing. Any ideas?

Okay Muzicman82...

Here's what I've got:

http://www.visiworks.com/test1.asp

This works in Firefox, Mozilla, Opera, and IE6 (PC). Can't tell you whether
it works in Safari or Mac IE.

Basically, here's what I've modified:

#main {
width: auto;
background:#D9E6FF;
margin-top: 8px;
margin-right: 255px;
margin-left: 8px;
margin-bottom: 8px;
padding:0 0 10px;
color:#000000;
border: 1px solid #496F91;
}
#sidebar {
width:240px;
float:right;
margin-top: 1px;
padding: 6px;
font-size:97%;
line-height:1.5em;
background-color: #F1F1F1;
}

See if that works for you. IE is funny about margins on div's with floats
when they're not contained by anything but the body, so I find that using
padding seems to work cross-browser a little more predictably than margins
(in this particular situation, anyhow.)

David Young
CFWebmasters.com
david (AT) cfwebmasters (DOT) com


"muzicman82" <webforumsuser (AT) macromedia (DOT) com> wrote

I started this in another thread... but it went off topic... The thread
is
located at

http://www.macromedia.com/cfusion/webforums/forum/messageview.cfm?catid=189&amp;
threadid=917342&amp;forumid=12 Sorry for the new post, but I can't figure
this
out! Ok, I have Firefox 1.0 and IE 6. They are rendering the CSS
differently... #main { background:#D9E6FF; margin-top: 8px;
margin-right:
256px; margin-left: 8px; margin-bottom: 8px; padding:0 0 10px;
color:#000000;
border: 1px solid #496F91; } #sidebar { width:240px; float:right;
margin-top:
8px; margin-right: 8px; margin-left: 8px; margin-bottom: 8px;
font-size:97%;
line-height:1.5em; background-color: #F1F1F1; } You can see the page at
www.muzicman82.com/blog/ It's a Blogger template, but its plain CSS. In
IE, the
right margin for #main is ignored, but in Firefox the page is perfect. I
tried
doubling the left margin on sidebar to 16px and that didn't change a darn
thing. Any ideas?