CSS positioning and MSIE

[rod1e]

Hi, I'm a bit new to all this and I think this is old stuff, but can't get any help at the moment.

My web page... http://www.ifa-scandi.4felts.com

works fine in firefox and IE7, but as IE7 messes with my anti-virus etc. I'm back to IE6 now. Never realised the positioning is all over the place in IE6 and lower...

Column "right" displays below column "left" and the whole lot bounces over to the far left of the screen when the cursor moves onto the "#frame" page.
Can someone give me some advice please...

This is the style sheet...


#frame
{
width: 650px;
margin-left: -325px;
}
body
{
margin: 0;
background-image: url(bkgd_72.jpg);
padding-left: 50%;
font-family: arial, helvetica, serif;
width: 600px;

}

img {
border: none;
}

#header
{ text-align: center;
margin-top: 15px;
background-image: url(bit_1.gif);
border-bottom: 1px solid #333;
}

#header h1 {
margin: 0;
padding: .5em;
}

#columnLeft {
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}

#columnLeft p {
margin-top: 15px;
}

#columnRight
{
padding-top: 1em;
margin: 0 2em 0 200px;
}

#columnRight h2 {
margin-top: 0;
}

#nav, #nav ul { /* all lists */
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
list-style: none;
float : left;
width : 11em;
z-index: 2;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
z-index: 2;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.55em;
margin-top : -3em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #338c9f;
border-top : 1px solid black;
border-right : 1px solid black;
border-bottom : 1px solid black;
border-left: 10px solid #ecc837;
padding : 0 0.5em;
}

#nav ul li a {
width: auto;
}


#nav li a:hover {
color : white;
background-color : #c44102;
border-top : 1px solid black;
border-right : 1px solid black;
border-bottom : 1px solid black;
border-left: 10px solid #c5cf47;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}



#footer {
clear: both;
background-image: url(bit_1.gif);
padding-bottom: 0em;
border: 1px solid #333;
padding-left: 200px;
margin-top: 15px;
margin-bottom: 15px;
}

#nav li a#current {
background: #c9c9c9;
border-left: 10px solid #e87400;
color: #e87400;
}

.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
text-decoration : none;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
color : #c44102;
background-color: #c5cf47;
}

[Diego]

try this:


#columnRight {float:left; width:450px; padding-top: 1em; margin: 0 2em 0 0px;}


ps, you should try to keep the properties uniform, margin: 0px 0px 2px 0px, this way you don't have properties that can render different in different browsers.

_good luck

[rod1e]

Thanks, it didn't work but it got me going in the right direction... (just haven't been able to get my head around it...)

3 hours later.... no, same old, same old... I can't get anywhere with this...

Thanks again...