1,105,380 Community Members

Site redesign looks good...until tested in IE7. Help!

Member Avatar
devin.lawks
Newbie Poster
17 posts since Sep 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
MHENRU
Newbie Poster
15 posts since Aug 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 0 [?]
 
0
 

try changing line 1 in your HTML to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

it seems like you are encountering the Internet Explorer box model bug

You may also want to have a look at Cascading Style Sheet Compatibility in Internet Explorer 7. See the section "My Page is Broken, What Can I Do?" for more information on the doctype issue.

Member Avatar
devin.lawks
Newbie Poster
17 posts since Sep 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
devin.lawks
Newbie Poster
17 posts since Sep 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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?

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: