CSS Problem

[jp182]

alright, my problem changed. I have this code that no matter what I do, never looks right in IE.

Check out these two links which are two ways of getting what I want accomplished:

http://www.thespeedlounge.com/beta/stufftest.html

http://www.thespeedlounge.com/beta/stuff.html


And here's one set of code:



<style type="text/css">
body {

text-align:center;
background-image: url('images/tile.jpg');
background-repeat: repeat-x;

}

#container {
width:940px;
margin:auto;
padding:0px;
text-align:left;
}
.floatright {
float: right;
margin: 5px 5px 5px 5px;
border: 1px solid #666;
}
.floatleft {
float: left;
margin: 5px 5px 5px 5px;
border: 1px solid #666;
}
.floatleft2 {
float: left;
margin: 5px 5px 5px 30px;
border: 1px solid #666;
}
.image {
border: 1px solid #666;
}
.text {
margin: 10px;
}
.top {
margin-bottom:-3px;
}
.title {
margin-top:-1px;
margin-bottom:-4px;
}

.navi {

margin-top:-1px;

border:0px;
}
#navi {
width:920px;
height:50px;
border:0px none;
padding:0

}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #navi { /* ie5win fudge ends */
width:920px;
}
#google {

border:0px none;
padding:0;
float:left;
width:300px

}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #google { /* ie5win fudge ends */
width:300px;
}
#title {
width:920px;
height:61px;
border:0px none;
padding:0

}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #title { /* ie5win fudge ends */
width:920px;
height:61px;
}
#left1 {
border-top:1px solid #000000;
border-right:1px inset #000000;
border-left:1px inset #000000;
background-color:#0000FF;
height:340px;
voice-family: "\"}\"";
voice-family:inherit;
width:305px;
float:left;

}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #left1 { /* ie5win fudge ends */
width:305px;
}
.left1menu {
border:1px solid #FFFFFF;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFF00;
height:15px;
width:292px;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
html>body .left1menu { /* ie5win fudge ends */
width:290px;
}
.left1menu2 {
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
margin:0px 1px 1px 1px;
border-top:0px solid #FFFFFF;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:290px;
height:302px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}


#middle {
border-top:1px solid #000000;
border-right:1px inset #000000;
border-left:1px inset #000000;
background-color:#0000FF;
height:340px;
voice-family: "\"}\"";
voice-family:inherit;
width:305px;
float:left;
margin-left:2px;
}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #middle { /* ie5win fudge ends */
width:305px;
}
.middlemenu {
border:1px solid #FFFFFF;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFF00;
height:15px;
width:292px;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
html>body .middlemenu { /* ie5win fudge ends */
width:290px;
}
.middlemenu2 {
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
margin:0px 1px 1px 1px;
border-top:0px solid #FFFFFF;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:290px;
height:302px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}

#right {
border-top:1px solid #000000;
border-right:1px inset #000000;
border-left:1px inset #000000;
background-color:#0000FF;
height:340px;
voice-family: "\"}\"";
voice-family:inherit;
width:305px;
float:right;
margin-right:14px;
}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #right { /* ie5win fudge ends */
width:305px;
margin-right:15px;
}
.rightmenu {
border:1px solid #FFFFFF;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFF00;
height:15px;
width:292px;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
html>body .rightmenu { /* ie5win fudge ends */
width:290px;
}
.rightmenu2 {

border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
margin:0px 1px 1px 1px;
border-top:0px solid #FFFFFF;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:290px;
height:302px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}
#left2 {

border-right:1px inset #000000;
border-bottom:1px inset #000000;
border-left:1px inset #000000;
background-color:#0000FF;
height:340px;
voice-family: "\"}\"";
voice-family:inherit;
width:305px;
float:left;

}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #left2 { /* ie5win fudge ends */
width:305px;
}
.left2menu {
border:1px solid #FFFFFF;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFF00;
height:15px;
width:290px;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.left2menu2 {
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
margin:0px 1px 1px 1px;
border-top:0px solid #FFFFFF;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:290px;
height:328px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}
#middle2 {

border-right:1px inset #000000;
border-bottom:1px inset #000000;
border-left:1px inset #000000;
background-color:#0000FF;
height:340px;
voice-family: "\"}\"";
voice-family:inherit;
width:305px;
float:left;
margin-left:2px;
}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #middle2 { /* ie5win fudge ends */
width:305px;
}
.middle2menu {
border:1px solid #FFFFFF;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFF00;
height:15px;
width:290px;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.middle2menu2 {
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
margin:0px 1px 1px 1px;
border-top:0px solid #FFFFFF;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:290px;
height:328px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}
#right2 {

border-right:1px inset #000000;
border-bottom:1px inset #000000;
border-left:1px inset #000000;
background-color:#0000FF;
height:340px;
voice-family: "\"}\"";
voice-family:inherit;
width:305px;
float:right;
margin-right:14px;
}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #right2 { /* ie5win fudge ends */
width:305px;
margin-right:15px;
}
.right2menu {
border:1px solid #FFFFFF;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFF00;
height:15px;
width:292px;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
html>body .right2menu { /* ie5win fudge ends */
width:290px;
}
.right2menu2 {
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
margin:0px 1px 1px 1px;
border-top:0px solid #FFFFFF;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:290px;
height:328px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}

a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}
.topleft {
padding-top:20px;
border-bottom:1px solid white;
border-right:1px solid white;
padding:5px;
width:308px;
}
</style>

[simplistik]

what's wrong about the margin?

[DDD]

are you clearing the floats? Youmayhave to post a link to the actual file sowe cansee.

[jp182]

bump for an update on my problem

[simplistik]

can't view the page in IE it's trying to force a download of some stupid .dll

[jp182]

really? I've never seen that....what the hell?
Did it open in Firefox?