PDA

View Full Version : Hello problem with Browser


cocoonfx
05-31-2007, 08:11 PM
Hello


I have create CSS page to control three text areas within the body of my main index page.

In IE7, Firefox the page displays correctly but in IE6 the third box wraps round below the other two areas.

Is there any reason for this or have i missed something?

www.cocoonfxmedia.co.uk (http://www.cocoonfxmedia.co.uk)

On the ccs sheet its the div called maincontent3

body {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
margin-top:10px;
}
#flashexample {
background-color: #FFFFFF;
float:left;
padding: 20px;
width: 150px;
padding: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
border: 1px solid #000066;
}
#wrapper {
width: 740px;
padding: 5px;
margin:0 auto;
border:1px solid #000000;
}
#masterhead {
background-image: url(/new-blck-web-logo.png);
background-repeat: no-repeat;
background-position: left top;
height: 90px;
background-color: #000000;
width: 740px;
}
#subhead {
float: right;
font-size: 77%;
padding-top: 62px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
color: #FFFFFF;
font-weight: normal;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation {
width: 740px;
background-color: #000000;
height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background-color: #000000;
width: 740px;
height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
}
P {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 85%;
margin: 5px;
}
#maincontent {
background-color: #FFFFFF;
float:left;
width: 190px;
height:140px;
padding: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 20px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000066;
}
#maincontent2 {
background-color: #FFFFFF;
float:left;
width: 190px;
height:140px;
padding: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000066;
}
#mailcard {
float: left;
width: 170px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
padding: 20px;
}
#maincontent3 {
background-color: #FFFFFF;
float:left;
padding: 20px;
width: 170px;
padding: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
border: 1px solid #000066;
}
#maincontent4 {
background-color: #FFFFFF;
float:left;
width: 160px;
height:140px;
padding: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000066;
}

#film {
height: 150px;
width: 740px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

chriskq
06-01-2007, 12:41 AM
i can look at this later. but things can be cleaned up in ur css
such as:

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

really equals:
margin:0 auto;

save code... plant a tree hahahaahaha