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.

Thanks for the tip. Changed the line, changing some of my markup now to reflect the doctype. I'll let you know how it goes.

So, no. That didn't seem to work. Changed the doctype, changed my code to reflect the new doctype, validated both my html and css with w3c, no errors found, but IE7 is still shooting my elements all over the page and making my images disappear.

Any other thoughts?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.