I've worked on a site redesign for my boss, and, as the title says, it looks good in pretty much everything *except* IE7 (and I'm assuming earlier versions, as well). Some of my images go missing, and elements shift to strange spots on the page.
I'll be the first to admit, my code is probably a little sloppy. I'm nowhere close to being an expert, and it's been several years since I last cobbled together anything. I was also attempting to do this page from scratch, in one day, with a 5:00pm deadline, while keeping my energetic 3-year-old entertained. : )
At any rate, I've searched through the threads here, as I figured I couldn't be the only one suffering from this problem, and found a promising thread that suggested it may be an issue with width and height formatting in CSS. The fix was to use an id or class with basic "width" and "height" parameters, and then to create a nearly identical id or class with "min-width" or "min-height" parameters using html>body.class{ or html>body#id{ to create a more specific rule, which would force all non-IE browsers to ignore the previous rules. If I understood it correctly, which I'm not %100 about. I tried it, it doesn't seem to be working. I've since reverted my code back to the previous version.
And so...please help! Seriously, any help would be greatly appreciated. Code follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/drdave_new.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div class="nav_background">
<div class="center">
<div id="nav">
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">How We Do It</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
</div>
</div>
<div class="center">
<div id="main">
<div id="main_left">
<div id="logo1">
</div>
<div id="logo2">
</div>
<div id="contact">
<hr />
<br />
Phone:<br />
555-867-5309<br /><br />
Toll Free:<br />
877-867-5309<br /><br />
email:<br />
<a href="mailto:email@email.com">email@email.com</a><br /><br />
Twitter:<br />
@twitteracct<br /><br /><br />
<p>Someone Somewhere is<br />
DoctorDave</p>
</div>
</div>
<div id="main_right">
<div class='box'>
<div class='boxtop'><div></div>
</div>
<div class='boxcontent'>
</div>
<div class='boxbottom'><div></div>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
<div id="footer">
<br /><br /><p>Copyright 2000 - 2011<br />DoctorDave(sm)</p>
</div>
</body>
</html>And my CSS:
body{
background-color:#CCC;
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
margin:0;
padding:0;
}
#header{
height:120px;
}
#nav{
padding-bottom:40px;
margin-left:80px;
}
#nav ul{
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: transparent;
font-weight:bold;
min-width:940px;
max-width:940px;
}
#nav ul li{
display:inline;
border-style: solid;
border-color:#9CF;
border-width:thick;
}
#nav ul li a{
text-decoration:none;
padding:.2em 1em;
color:#FFF;
background-color:#666;
}
#nav ul li a:hover{
color:#000;
background-color:#9CF;
}
.center{
margin-left:auto;
margin-right:auto;
max-width:940px;
}
.nav_background{
background: url(navbkgnd.png);
background-repeat:repeat-x;
}
#main{
max-width:940px;
min-width:940px;
}
#main_left{
min-width:152px;
min-height:500px;
float:left;
}
#logo1{
background-image: url(bag1.gif);
min-height:150px;
max-width:152px;
}
#logo2{
background-image: url(dd_text.gif);
min-height:90px;
max-width:152px;
}
#contact{
font-size:12px;
font-weight:bold;
}
#contact a{
text-decoration:none;
}
#contact p{
text-align:center;
font-size:14px;
}
#main_right{
min-width:760px;
max-width:760px;
min-height:500px;
padding-left:20px;
float:right;
}
.clear{
clear:both;
}
#footer{
background-color:#FFF;
background-image:url(footerbkgnd.jpg);
background-repeat:repeat-x;
min-height:142px;
text-align:center;
font-size:10px;
font-weight:bold;
color:#000;
padding-bottom:70px;
}
/*For rounded corners*/
.box {
background: #FFFFFF;
}
.boxtop {
background: url(ne.gif) no-repeat top right;
}
.boxtop div {
font-size: 0;
height: 10px;
background: url(nw.gif) no-repeat top left;
}
.boxbottom {
background: url(se.gif) no-repeat bottom right;
}
.boxbottom div {
font-size: 0;
height: 10px;
background: url(sw.gif) no-repeat bottom left;
}
.boxcontent {
padding: 0px 10px 0px 10px;
min-height:500px;
font-size:12px;
color:#666666;
}
.boxcontent a{
text-decoration:none;
}
.boxcontent font{
font-weight:bold;
}Image sizes are as follows:
bag1: 150 x 144
ddtext: 150 x 86
footerbkgnd: 160 x 100
navbkgnd: 100 x 30
ne, nw, se, sw (all corners), all: 10 x 10
I hope I've provided enough information. If not, please let me know. I realize any advice or help is given entirely out of good will, and so you have my thanks for even taking 10 seconds to ponder what is, ultimately, my own problem to sort out.