Hi folks, I’m hoping to get some advice on Browser Compatibility as I’m having problems with how my site looks on Internet Explorer, especially the older versions. I have checked browser compatibility in Dreamweaver and validated the css with W3’s code validator but the body of the text is off to the left in IE 7 and 8 and the background image doesn’t show up at all in IE 6 — it’s a nightmare, I’d love to just pretend nobody uses IE anymore but I guess I can’t.
Can anyone suggest somewhere/ a tool that will help me figure out the CSS (or HTML?) that’s causing the problem?
I’ll show the current CSS below, I hope that’s okay:
@charset "UTF-8";
/* CSS Document */
a, body, figure, h1, header, li, nav, p, section, span, u {
background:transparent;
border:0 none;
font-size:100%;
margin:0;
border:0;
vertical-align:top;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
}
ol, ul {
list-style:none;
background:transparent;
border:0 none;
font-size:100%;
margin:0;
border:0;
vertical-align:top;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
}
ul.b {
list-style-type:square;
font-family:Arial, Helvetica, sans-serif;
padding-bottom:2px;
padding-left:10px;
}
.col1, .col2 {float:left}
.col1 {
width:500px;
height:495px;
}
.col2 {
width:320px;
padding-top:100px;
height:300px;
padding-left:30px;
}
article, figure, footer, header, nav, section {display:block}
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
body {
background:url(../images/mugendo-kickboxing-maynooth.jpg) top center no-repeat;
border:0;
font:13px 'Nixie One', cursive;
color:#000000;
line-height:20px;
}
.main {
margin:0 auto;width:960px}
.extra {
height:auto !important;
height:100%;
margin:0
}
a {
color:#383838;
text-decoration:underline;
}
a:hover {
text-decoration:none;
color: #990000;
}
h1 {
font-size:26px;
color:#000;
line-height:34px;
padding:18px 0 9px 0;
letter-spacing:-1px;
font-weight: 500;
}
h1 span {
color:#990000
}
h1 a:link {text-decoration:none;}
h1 a:visited {text-decoration:none;}
h1 a:hover {text-decoration:underline;}
h1 a:active {text-decoration:underline;}
h3 {
font-size:11px;
color:#990000;
vertical-align:top;
text-decoration:none;
font-weight:lighter;
padding-top:10px;
}
p {
padding-bottom:10px;
font-family: Arial;
}
/* header */
header {height:276px;width:100%;overflow:hidden}
#menu {width:100%;overflow:hidden;padding-top:33px; padding-left:400px;}
#menu li {float:left;padding-right:23px;margin-right:22px;background:url(../images/pipe.gif) right top no-repeat}
#menu .bg_none {background:none}
#menu li a {
font-size:18px;
color:#F2B735;
line-height:28px;
text-decoration:none
}
#menu li a:hover, #menu #menu_active a {
color:#ffffff
}
/* content */
#content {width:100%;overflow:hidden;padding-bottom:9px; padding-top:5px; padding-left:25px;}
.pad_left1 {
padding-left:50px;
}
.mugendo-icon {margin-right:18px}
.pad_bot1 {padding-bottom:0px}
.pad_top1 {padding-top:6px}
.button {border:1px solid #d9d9d9;display:inline-block;line-height:32px;text-decoration:none; padding:0 15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; position:relative}
.button:hover {background:#990000;color:#fff;border:1px solid #990000}
/* footer */
footer {line-height:8px;padding:10px 0 0px 0;text-align:center; color:#383838;}
.footer-color {
color: #990000;
}
footer a{text-decoration:none;}
/* contact */
#page-wrap {
width: 500px;
margin: 20px auto;
height: auto !important;
height: 500px;
}
#contact-area {
width: 550px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 375px;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
margin-left: 404px;
width: 100px;
float: none;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
Any advice is much appreciated, D
