Hello All…
I am new here and new to CSS. I am trying to create this layout:
http://eitg.us/newsite/index.html
http://eitg.us/newsite/index2.html
Can anyone tell me what is happening in IE6 that messes everything up? It appears fine in Firefox, Opera, Safari, and Flock. Just not IE6.
Here is my css:
body {
background-color: #cccccc;
font:13px arial,helvetica,clean,sans-serif;
*font-size:small;
*font:x-small;
}
table {
font-size:inherit;
font:100%;
}
body * {
line-height:1.22em;
}
select, input, textarea {
font:99% arial,helvetica,clean,sans-serif;
}
pre, code {
font:115% monospace;
*font-size:100%;
}
div.mainstage {
width: 980px;
background: url(images/mainstage.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top:0;
z-index: 10;
height: 590px;
}
div.whitearea {
width: 610px;
background: url(images/whitegrow.png);
background-repeat:repeat-y;
margin-left:359px;
margin-top:69px;
float:left;
z-index: 15;
height: auto;
}
div.whitebottom {
width: 607px;
background: url(images/whitebottom.png);
background-repeat:no-repeat;
margin-left:359px;
float:left;
z-index: 15;
height: 28px;
}
div.mainstage_internal {
width: 980px;
background: url(images/mainstage_internal.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top:0;
z-index: 10;
height: 590px;
}
div.whitearea_internal {
width: 980px;
background: url(images/whitegrow_internal.png);
background-repeat:repeat-y;
margin-left:auto;
margin-top:155px;
float:left;
z-index: 15;
height: auto;
}
div.whitebottom_internal {
width: 980px;
background: url(images/whitebottom_internal.png);
background-repeat:no-repeat;
margin-left:auto;
float:left;
z-index: 15;
height: 15px;
}
div.textstage_internal {
margin-left: 55px;
font-size:92%;
z-index:20;
width: 700px;
float:left;
}
div.textstage {
margin-left: 30px;
font-size:92%;
z-index:20;
width: 350px;
float:left;
}
div.footer {
width: 980px;
margin-left:auto;
margin-right:auto;
height: 40px;
}
p.copyright_home {
position:relative;
top: 565px;
width: 920px;
margin-left:auto;
margin-right:auto;
font-size:85%;
}
div.copyright {
width: 890px;
margin-left: auto;
margin-right: auto;
}
div.row span.left {
float: left;
text-align: left;
font-size:85%;
width: 49%;
}
div.row span.right {
float: right;
text-align: right;
font-size:85%;
width: 49%;
}
img.rightcorner {
margin-left: 140px;
float: left;
}
div.floatleft {
float: left;
margin: 4px;
}
div.floatright {
float: right;
margin: 4px;
}
Thanks in advance!