http://luxtechn.com/test/index.html
making a site for my sculptor friend. however, the “#index_main” 's “margin-top” size is being doubled in IE6 and IE7.
looked back in my previous threads for a while and tried various things like overflow: hidden on it, but nothing. tried other things, but still nothing.
i am going to add a JS animation on her long image which should be pretty cool.
please help 
sitepoint is just so very grand…
.clear_it {
clear: both;
height:1px;
font-size: 0;
}
Adding the second two lines fixed my layout oddly enough.
@ds60
I’m sure you are aware that this is an old thread since you most likely noticed the red warning.
That link in the OP’s (first/only) post is not even the same page that this thread was related to. It was a site about an art sculptor.
That must be the link he uses for all current projects. Nevertheless you have told him about the problems on his new project.
You might have a little more luck if you got rid of all the unnecessary containers, and sticking yourself with outdated coding techniques by way of the tranny doctype. Tranny is for supporting old/outdated/half-assed techniques, not for building new websites.
For example you aren’t doing anything that warrants the double outer wrapper (inner-div and outer-div), a single pagewrapper would do just fine. There’s no real reason to have a ID on the h1 since you should only have a single h1 per page, the #header DIV doesn’t actually DO anything that you need done, the image in the H1 isn’t just a missed SEO opportunity, it’s presentation for text so I’d get a image replacement on that, #menu is pointless, that presenational image (nav-bg_right) has no business even being in the markup, #banner could probably go given the fixed height /fail/ inside the slider. (there’s a reason I wouldn’t put that js nonsense on a page in the first place), the li around the div and h2 doesn’t seem semantic since the sections are not related and/or bullet points and/or even list items, the presentational classes “leftPan”, “middlePan”, etc don’t say what the sections are so one may as well go back to using HTML 3.2, you aren’t applying any formatting that should warrant needing classes on every paragraph (serious whiskey tango foxtrot), again you have presnetational images in the markup (have you seen what the page does CSS off?) and that’s before we talk about things like the fixed width that’s not even 1024 friendly and the use of fixed metric fonts being an accessibility /FAIL/.
Margin? Least of your problems. Though it could be worse, you could have someone telling you to use a clearing div like it was still 2002. Oh wait!
I believe this will fix the issue, instead margin-top use padding-top for #top
#top {
padding-TOP: 22px;
}
http://www.sitepoint.com/forums/showthread.php?t=673280 may be this topic is worth to go through.
Hi, untested but normally if the margins’ being doubled , then normally an element needs haslayout or something :). The school computers here don’t have IE so I can’t test, but try and see if *{zoom:1;} fixes it. If it does, then just find which element needs haslayout :). I will be gone the rest of the day (work then another class then gym) but if you haven’t figured this out by then and noone else has helped then I’ll be back late tonight 
Hi,
The problem seems to be related to that clearing div your using.
.clear_it {
clear: both;
height:1px;
font-size: 0;
}
There is really no need for it anyways. IE6/7 will contain their floats when haslayout is set and modern browsers just need the overflow property set on the floats parent.
You have a bad habit going on with the rest of your code. You are wrapping divs around everything and then wrapping them again.
You have two page wrappers when only one is needed. You have wrapped the h1 in a div called header. Then it was nested in a div called top. You have wrapped both your ul’s in divs when the ul itself could have been styled.
Here is your code with all the unnecessary divs removed -
index-2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Courtney L. Fromberg - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
margin:0;
padding:0;
font-family:Verdana, "Trebuchet MS", sans-serif;
font-size:12px;
color:#fff;
background:#000;
}
#wrapper {
width:960px;
margin:0 auto;
padding:22px 0 10px;
}
/*=== Header Styles ===*/
#header {
width:100%;/*IE6 haslayout*/
overflow:hidden;/*contain floats*/
}
#header h1 {
float: left;
font: 29px/1.2 Georgia, Times, serif;
margin:0;
}
#nav {
list-style:none;
float:right;
margin:9px 0 0 0;
padding:0;
}
#nav li {
display:inline;
margin-left:26px;
}
#nav li a {
font: 18px/1.2 Verdana, "Trebuchet MS", sans-serif;
color: #fff;
text-decoration: none;
}
#nav li a:hover {
color:#e2e2e2;
}
/*=== Main Content ===*/
#content {
width:960px;
height:580px;
margin-top:22px;
background:#b2b2b2 url(img/mainpic.jpg) top left no-repeat;
}
#content p {margin:1em}
/*=== Footer Styles ===*/
#footer {
width:100%;/*IE6 haslayout*/
overflow:hidden;/*contain floats*/
}
#nav2 {
float: left;
margin:15px 0 0 0;
padding:0;
list-style:none;
}
#nav2 li a {
font: 14px/1.2 Verdana, "Trebuchet MS", sans-serif;
color: #fff;
text-decoration: none;
}
#nav2 li a:hover {
color: #e2e2e2;
}
#nav2 li {
display: inline;
margin-right: 15px;
}
#info {
float:right;
margin-top: 5px;
}
#info p {
margin:0;
text-align:right;
font: 10px/1.3 Verdana, "Trebuchet MS", sans-serif;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>COURTNEY L. FROMBERG</h1>
<ul id="nav">
<li><a href="index.html" title="home">home</a></li>
<li><a href="about.html" title="about">about</a></li>
<li><a href="portfolio.html" title="portfolio">portfolio</a></li>
<li><a href="contact.html" title="contact">contact</a></li>
</ul>
</div> <!-- end header -->
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer id tincidunt pellentesque Nam mi. Risus lacinia
elit vel mauris consequat amet id vitae orci pede. Suspendisse Aliquam auctor ut Phasellus
Suspendisse et id condimentum quis at. Id Sed et enim Sed natoque magna elit tincidunt tempor
iaculis. Aenean orci urna rutrum Morbi cursus Vivamus In Nam id tellus. Quis lobortis molestie
fringilla pretium porttitor.</p>
</div>
<div id="footer">
<ul id="nav2">
<li><a href="index.html" title="home">home</a></li>
<li><a href="about.html" title="about">about</a></li>
<li><a href="portfolio.html" title="portfolio">portfolio</a></li>
<li><a href="contact.html" title="contact">contact</a></li>
</ul>
<div id="info">
<p>847.777.7777</p>
<p>courtney.3298@gmail.com</p>
<p>© Lux Technologies 2010</p>
</div><!-- end info -->
</div><!-- end footer -->
</div> <!-- end wrapper -->
</body>
</html>