PDA

View Full Version : page not showing correct in IE6+ CSS


cocoonfx
06-23-2009, 08:32 AM
Hello Chaps


I have got a site which i am controlling with a css stylesheet. In Firefox and Safarai its working as it should on my laptop and also on a my pc (19inch screen) However on my mates Mac Pro with a 24in wide screen and in IE 6 the page does not fit correctly and there is a white bit at the top and bottom.

What is the best way to sort this out?

http://www.dubcoms.co.uk/test.html
(http://www.dubcoms/test.html)

cocoonfx
06-23-2009, 09:34 PM
I am not sure whats going on but IE 8 and Firefox are now fine, safari and Ie 6 IE7 now all show something different.

www.dubcoms.co.uk/test.html

Here is my css:


@charset "UTF-8";
body {
background-repeat: repeat-y;
background-image: url(images/newbackjb.png);
background-color: #F1F1F1;
background-position: center center;
}
#wrapper {
height: 100%;
width: 860px;
margin-right: auto;
margin-left: auto;
background-color: #858585;
margin-top: -15px;
margin-bottom: -35px;
padding: 2px;
}
#top {
background-image: url(images/newtop.png);
background-repeat: no-repeat;
width: 860px;
margin-right: auto;
margin-left: auto;
height: 20px;
float: left;
}
#logo {
height: 150px;
width: 100%;
background-image: url(images/Dubs_boarder.jpg);
background-repeat: no-repeat;
background-position: center center;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
float: left;
}
#link {
width: 600px;
float: right;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
}
#text {
height: 100%;
width: 100%;
margin-right: auto;
margin-left: auto;
background-image: url(images/newback.png);
background-repeat: repeat-y;
float: left;
margin-top: -5px;
}

#left {
float: left;
width: 270px;
height: 99%;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}


#inner {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
height: 99%;
}

#text h1 {
font-family: "Century Gothic", Century;
font-size: 1.3em;
font-weight: bold;
color: #0069A9;
margin-right: 5px;
margin-left: 10px;
}
#text h2 {
font-family: "Century Gothic", Century;
font-size: 1.1em;
font-weight: lighter;
color: #000000;
margin-right: 5px;
margin-left: 10px;
}
#text h3 {
font-family: "Century Gothic", Century;
font-size: 0.9em;
font-weight: bold;
color: #569FD3;
margin-right: 5px;
margin-left: 10px;
}

#text p {
font-family: "Century Gothic", Century;
font-size: 0.8em;
text-align: left;
color: #0069AB;
font-weight: lighter;
}
#text a {
font-family: Arial, Helvetica, sans-serif;
color: #0468AD;
text-decoration: underline;
}
#footer {
width: 860px;
margin-right: auto;
margin-left: auto;
height: 42px;
color: #0069AB;
background-image: url(images/newback.png);
background-repeat: repeat-y;
float: left;
}
#footer a {
color: #0069AB;
}


#footer p {
font-family: "Century Gothic", Century;
font-size: 12px;
color: #0069AB;
text-align: center;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #FF0000;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
}
.separator {
clear: both;
}
#bottom {
background-image: url(images/newbottom.png);
background-repeat: no-repeat;
width: 100%;
margin-right: auto;
margin-left: auto;
height: 23px;
margin-top: -2px;
float: left;
margin-bottom: -2px;
}
li {
font-family: "Century Gothic", Century;
color: #0069AB;
font-size: 0.8em;
font-weight: lighter;
margin-left: 20px;
}

#form1 {
text-align: center;
background-position: center center;
padding: 5px;
height: auto;
width: 500px;
float: left;
}
label{
margin:0.33em;
display:block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #0069AB;
}
#Submit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 100px;
margin: 5px;
}
input, textarea {
width:236px;
height:15px;
background:url(images/input.gif) no-repeat left top;
border:none;
padding:4px 8px;
}
#form1 p {
font-family: "Century Gothic", Century;
text-align: center;
font-size: 0.8em;
}
#themessage {
width:336px;
height:125px;
background:url(images/textarea.gif) no-repeat left top;
border:none;
padding:4px 8px;
}

.buttonSubmit, .buttonSubmitHovered {
width:30px;
height:26px;
color:#FFF;
font-weight:bold;
cursor:pointer;
border:none;
background-image: url(images/button.gif);
background-repeat: no-repeat;
background-position: center top;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-align: center;
}
.buttonSubmitHovered {
background-position:center bottom;
}
#image {
height: 165px;
width: 720px;
margin-right: auto;
margin-left: auto;
}
#img1 {
width: 230px;
height: 150px;
margin: 5px;
float: left;
background-position: center center;
}
#img2 {
width: 230px;
height: 150px;
float: left;
margin: 5px;
}
#img3 {
width: 230px;
float: left;
height: 150px;
margin: 5px;
}
#bottomlogo {
height: 160px;
width: 100%;
background-image: url(images/bottomlogo.jpg);
background-repeat: no-repeat;
background-position: center center;
margin-right: auto;
margin-left: auto;
float: left;
margin-top: -5px;
}
#form1 {
text-align: center;
background-position: center center;
padding: 5px;
margin: 5px;
}
label{
margin:0.33em;
display:block;
font-family: "Century Gothic", Century;
font-size: 0.8em;
}

input, textarea {
width:236px;
height:15px;
font-family: "Century Gothic", Century;
background:url(images/input.gif) no-repeat left top;
border:none;
padding:4px 8px;
}
#themessage {
width:336px;
height:125px;
font-family: "Century Gothic", Century;
background:url(images/textarea.gif) no-repeat left top;
border:none;
padding:4px 8px;
}