Hello
I have created a
CSS stylesheet in Firefox and Safrai the website is working how it should but in IE6 there is a white border a long the top and bottom. In IE7 on XP it works fine but on IE7 on Vista it shows a white bar at the bottom. what could be causing this and what can i do to fix this issue.
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;
}
#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 {
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;
}
#link {
width: 600px;
float: right;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
}
#text p {
font-family: "Century Gothic", Century;
font-size: 0.8em;
text-align: left;
color: #0069AB;
font-weight: lighter;
}
li {
font-family: "Century Gothic", Century;
color: #0069AB;
font-size: 0.8em;
font-weight: lighter;
margin-left: 20px;
}
#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;
}
#form1 {
text-align: center;
background-position: center center;
padding: 5px;
height: auto;
width: 500px;
float: left;
}
#form1 p {
font-family: "Century Gothic", Century;
text-align: center;
font-size: 0.8em;
}
label{
margin:0.33em;
display:block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #0069AB;
}
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;
}
#Submit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 100px;
margin: 5px;
}
.buttonSubmit, .buttonSubmitHovered {
width:30px;
height:26px;
color:#FFF;
font-weight:bold;
cursor

ointer;
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;
}
#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;
}
.separator {
clear: both;
}