Forum Moderators: not2easy
Hopefully someone can help me and show me what i am doing wrong with my CSS.
In all browsers (opera, safari, chrome, mozilla, firefox and IE7/8) the page displays as you would expect, with no issues. However, in IE6 and lower versions, two particular divs are pushed down the page and not in their main position.
I am new to CSS and have created this from what I have read etc, however i am sure there are some errors in there.
I'm not particulay worried about IE versions lower than 6, as from our stats virtually no visitors are using this browser, but still a significant proportion of visitors are on IE6.
The divs in question are #right, #services and #maintop.
Code is as follows, i appreciate any help or guidance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
background-color: #434543;
}
#container {
width: 903px;
margin: 0 auto 0 auto;
text-align: left;
background-color: black;
}
#logo {
position: relative;
top: 0px;
left: 0px;
}
#number {
position: relative;
top: 0px;
left: 141px;
background-color: #000000;
}
#headertop {
width: 903px;
height: 5px;
float: top;
}
#header left {
width: 903px;
height: 223px;
float: left;
}
#flash head {
width: 893px;
height: 223px;
float: left;
}
#header right {
width: 5px;
height: 223px;
float: right;
}
#right {
width: 303px;
height: 710px;
position: relative;
padding-top: 8px;
margin: 0 auto 0 auto;
float: right;
z-index:2;
background-color: #000000;
}
#menu {
width: 903px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #000000;
}
#services {
width: 600px;
position: relative;
margin: 0 auto 0 auto;
background-color: #000000;
float: left;
z-index:1;
}
#maintop{
width: 590px;
height: 600px;
position: relative;
margin: 0 auto 0 auto;
float: left;
background-color: black;
padding-left: 10px
}
#main {
width: 883px;
position: relative;
margin: 0 auto 0 auto;
float: left;
background-color: black;
padding-left: 10px;
padding-right: 10px
}
#main2 {
width: 875px;
margin: 0 0px 0 0px;
position: relative;
left: 20px;
float: left;
background-color: black;
}
#main1 {
width: 875px;
margin: 0 0px 0 0px;
float: left;
background-color: black;
}
#mainbtm {
width: 875px;
margin: 0 auto 0 auto;
}
#other {
width: 903px;
height: 41px;
position: relative;
margin: 0 auto 0 auto;
background-color: black;
float: left;
}
#linkboxes {
width: 903px;
height: 112px;
position: relative;
margin: 0 auto 0 auto;
float: left;
background-color: #000000;
}
.clear {
clear: both;
}
/********************************************************************/
/* Generic tags */
/********************************************************************/
html { font-size:0.9em;}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
}
p { padding-bottom:15px; line-height:1.3em; color:#566065;}
abbr { text-decoration:none; border:none;}
img {border:0px;}
a { font-weight:bold; text-decoration:none;}
a:hover {
text-decoration:underline;
color: #333333;
}
.fl { float:left;}
.fr { float:right;}
.clear { clear:both;}
.skiptocontent, .relbookmark {position:absolute; margin-left: -9999px;}
.checkbox { margin:0px 0px 0px 0px; width:13px; height:13px; overflow:hidden;}
.checkboxlabel { margin:0px 0px 0px 0px; line-height:13px; float:left; text-align:left;}
.relbookmark { position:absolute; margin-left: -9999px;}
strong { font-weight:bold;}
.hidden { display:none; position:absolute; left:-9999px;}
/********************************************************************/
/* H tags */
/********************************************************************/
h1 { font-size: 160%; color:#F21B23; font-weight:bold; padding-bottom:0px;}
h2 { font-size: 130%; color:#F21B23; font-weight:bold; padding-bottom:0px;}
h2.aerial { margin-top:15px;}
h3 { font-size: 120%; color:#666666; font-weight:bold; padding-bottom:5px;}
H6 { font-size 120%; colour:#000000; font-weight:bold; padding-bottom: 5px;}
.style1 {color: #FFFFFF}
.style2 {
color: #FF0000;
font-weight: bold;
}
.style6 {color: #FF0000}
.style9 {
color: #FF0000;
font-weight: bold;
font-size: 110%;
}
.style11 {font-size: 110%}
.style12 {font-size: 125%}
.style13 {color: #FFFFFF; font-weight: bold; }
.style15 {font-size: 120%}
.style18 {
color: #FF0000;
font-size: 100%;
font-weight: bold;
}
.style19 {
font-size: 140%;
font-weight: bold;
}
a:link {
color: #CCCCCC;
}
a:visited {
color: #FF0000;
}
a:active {
color: #FF0000;
}
.style21 {color: #FF0000; font-size: 115%; font-weight: bold; }
.style23 {
color: #FF0000;
font-size: 140%;
font-weight: bold;
}
</style>
<script type="text/javascript">
And without readng all that code you dumped in here, make it smaller with wise if it goes away: you just found what to pu tin the conditional comment.
