Double Margins in IE 7
newbie
Posted: Mon, 2008-06-30 22:11
Welcome to 3 years ago right?
I seem to be having a very strange problem with Internet Explorer displaying some of my margins.
For no reason I can come up with after evaluating my code for hours I cannot seem to find a fix for this. Validation doesn't show any issues, FF and Opera work fine, its just IE 7.
The .contact style margin is doubling. The Images on the page should display as 4 across inside the #c-main div. Instead its displaying 3 across and doubling the margin:0 8px 0 0;
Every float has the display:inline; code
The entire code of the page, CSS is still embedded:
<!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" />
<meta name="msvalidate.01" content="926459C52B524D65A0C86F084E3D4914" />
<meta name="keywords" http-equiv="keywords" content=" Lincoln web design, Omaha web design, Web design, graphic design, flash design, flash 3.0 tutorials, Lincoln CSS, Nebraska web design, creative director, creative direction, creative ideas, creative design, dreamweaver design, affordable, logos, logo, Nathan Chapman, Nate Chapman, CHPMN, CSS/XHTML" />
<meta name="description" content="Nate Chapman specializes in Web Design and Development. He works with clients who need CSS/XHTML, Art Direction, and SEO services. He also provides general Graphic Design services to the local Nebraska area. Some of which are Restaurant Menu Design, Brochure Design, Newspaper and Magazine Ads Design." />
<title>Nathan Chapman's Portfolio Website // CHPMN</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<style media="all" type="text/css">
/* CSS/XHTML Nate Chapman 2008
chpmn.com */
/* Containment Div and Header */
.contact, #c-main, #c-nav {behavior:url(iepngfix.htc);} /* IE 6 PNG fix */
#container {
background: url(images/main-back.jpg) 0 142px no-repeat; margin-left:100px;}
#header {overflow:hidden;}
.contact {
background:url(images/contact-back.jpg) no-repeat; }
.contact, .contact3 {
font-size:.9em; color:#5b7876; padding:10px 0 20px 0; float:left; display:inline;}
.contact3 {
font-size:1.4em; margin:0 10px 0 690px;}
.nav {background:#2e2e2e; overflow:hidden;}
.nav h1 {float:left; display:inline;}
.nav-ab {margin:0 0 0 300px; width:86px; float:left; display:inline;}
.nav-ab a{display:block; width:86px; height:46px; background:url(images/nav-about.gif);}
.nav-ab a:hover{background-position: 0 -46px;}
.nav-ab-on {margin:0 0 0 300px; width:86px; float:left; display:inline;}
.nav-ab-on a{display:block; width:86px; height:46px; background:url(images/nav-about-on.gif);}
.nav-ab-on a:hover{background-position: 0 -46px;}
.nav-po {width:102px; float:left; display:inline;}
.nav-po a{display:block; width:102px; height:46px; background:url(images/nav-port.gif);}
.nav-po a:hover{background-position: 0 -46px;}
.nav-po-on {width:102px; float:left; display:inline;}
.nav-po-on a{display:block; width:102px; height:46px; background:url(images/nav-port-on.gif);}
.nav-po-on a:hover{background-position: 0 -46px;}
.nav-st {width:78px; float:left; display:inline;}
.nav-st a{display:block; width:78px; height:46px; background:url(images/nav-store.gif);}
.nav-st a:hover{background-position: 0 -46px;}
.nav-st-on {width:78px; float:left; display:inline;}
.nav-st-on a{display:block; width:78px; height:46px; background:url(images/nav-store-on.gif);}
.nav-st-on a:hover{background-position: 0 -46px;}
h2, h3 {
font-weight:normal; font-size:1em;}
h2 {
color:#8E2837; padding:10px 0; margin:0 0 0 400px; font-style:italic;}
h2 span {font-style:normal; font-size:1.2em;}
#content {overflow:auto;}
.protitle a, h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;}
#c-main {
width:655px; background:url(images/block-back.png) repeat-x; padding:10px 6px 10px 10px; margin-left:5px; overflow:hidden; font-size:.8em; font-variant:small-caps;}
#c-main ul {margin:0 8px 0 0; float:left; display:inline;}
#c-main li {margin:4px;}
.hov a img {border:4px solid #e1e1e1; }
.ehov a img {border:4px solid #95461C;}
.hov:hover img {border:4px solid #464646; -moz-opacity: 0.80;}
.ehov:hover img {border:4px solid #853F18; -moz-opacity: 0.80;}
#c-main p {margin:0 10%; height:15px; float:left; display:inline;}
#c-main li.c-divider {
background:url(images/c-divider.gif) top center no-repeat; width:484px; height:45px; display:block;}
#c-main .protitle a {color:#8e2800; text-decoration:none;}
#c-main .protitle a:hover {color:#333;}
h3 {
font-variant:small-caps; color:#FFF; width:100px; background-color:#95461C; margin-bottom:5px;}
#c-mainend {width:655px; height:10px; background:url(images/content-end.gif) bottom left repeat-x; clear:both; margin:0 0 20px 5px; padding:0 6px 0 10px;}
/*Right*/#c-nav {overflow:auto; background:url(images/block-back.png) repeat-x; width:200px; margin:0 0 0 30px; float:left; display:inline;}
#c-nav ul {float:left; display:inline;}
#current {color:#8e2800; padding:10px;}
#culnav {border-left:#8e2800 dotted 1px; padding:0 0 0 10px; margin:10px 0 0 0;}
#culnav li {border-bottom:#d9d9d9 solid 1px; padding:3px 10px 3px 0; font-size:.8em; color:#999;}
#culnav li a{color:#2e2e2e; text-decoration:none;}
#culnav li a:focus {color:#999; text-decoration:line-through;}
#culnav li a:hover {color:#853F18;}
#c-navend {height:35px; /*margin:35px 0 0 0;background:url(images/cnav-back.png) repeat-x;*/ clear:both;}
#end {
background:#8B411A url(images/end-back.gif) repeat-y; overflow:auto;}
.end-div {float:left; display:inline; padding:20px;}
.end-div-one {float:left; display:inline; padding:20px;}
.end-div-two {float:left; display:inline;}
.div-one-sub {border-bottom:4px solid #853F18; padding:20px;}
.div-two-sub {padding:20px 10px 20px 20px; width:300px; overflow:hidden;}
.div-two-sub li {float:left;}
.end-div p, .end-div li {width:240px; font-size:.8em; color:#d7d7d7; padding:2px 0;}
.end-div-one p, .end-div-one li {width:240px; font-size:.8em; color:#d7d7d7; padding:2px 0; line-height:1.2em;}
.end-div-one p, .end-div p {border-bottom:4px solid #853F18; padding-bottom:20px;}
#end a {
color:#2e2e2e; text-decoration:none; background-color:#853F18;}
#end a:focus {color:#FFF; text-decoration:line-through;}
#end a:hover {color:#000;}
#screenshot{
position:absolute; background:#333; padding:5px; display:none; color:#333;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul class="contact3">
<li>03</li>
</ul>
<ul class="contact">
<li>Nathan Aaron Chapman</li>
<li>1231 North 78th Street</li>
<li>68505</li>
<li>nachapman@gmail.com</li>
<li>Telephone: (402)440-0876</li>
</ul>
</div>
<div class="nav">
<h1><img src="images/logo-capblack.gif" alt="Nathan Aaron Chapman's Logo" width="140" height="46" /></h1>
<ul>
<li class="nav-ab"><a title="A page dedicated to myself which contains juicy details About.. me" href="../about/index.html"></a></li>
<li class="nav-po-on"><a title="A reservor of my work, contained in a Portfolio" href="../portfolio/index.html"></a></li>
<li class="nav-st"><a title="Goods and Services or Web Templates and other neat stuff" href="../forsale/index.html"></a></li>
</ul>
</div>
<h2>Designing functional <span>beautiful</span> websites is our business.</h2>
<div id="content">
<div id="c-main">
<!--<p><img src="images/divider.gif" alt="asdfdsf" /></p>-->
<ul>
<li class="hov"><a href="/portfolio/templates/wow-citadel" title="WordPress WoW Template: Citadel" class="screenshot" rel="images/pre.citadel.jpg"><img src="images/thumb-citadel.gif" alt="WordPress WoW Template: Citadel" /></a></li>
<li class="protitle"><a href="/portfolio/templates/wow-citadel">Citadel</a></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/bruce-fencing" title="Bruce Fencing & Decks" class="screenshot" rel="images/pre.bruce.jpg"><img src="images/thumb-bruce.jpg" alt="Bruce Fencing & Decks" /></a></li>
<li class="protitle"><a href="/portfolio/bruce-fencing">Bruce Fencing</a></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/feit-family" title="Feit Family" class="screenshot" rel="images/pre.feit.jpg"><img src="images/thumb-feit.jpg" alt="Feit Family" /></a></li>
<li class="protitle"><a href="/portfolio/feit-family">Feit Family</a></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/steambox-pc" title="Steambox PC" class="screenshot" rel="images/pre.steam.jpg"><img src="images/thumb-steam.jpg" alt="Steambox PC" /></a></li>
<li class="protitle"><a href="/portfolio/steambox-pc">Steambox PC</a></li>
</ul>
<ul>
<li><p><img src="images/divider.gif" alt="asdfdsf" /></p></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/leannes" title="Leanne's Restaurant" class="screenshot" rel="images/pre.leannes.jpg"><img src="images/thumb-leannes.gif" alt="Leanne's Restaurant" /></a></li>
<li class="protitle"><a href="/portfolio/leannes">Leanne's Restaurant</a></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/skyboxx" title="Skyboxx" class="screenshot" rel="images/pre.sky.jpg"><img src="images/thumb-sky.jpg" alt="Skyboxx" /></a></li>
<li class="protitle"><a href="/portfolio/skyboxx">Skyboxx</a></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/necro" title="Necrophagist" class="screenshot" rel="images/pre.necro.jpg"><img src="images/thumb-necro.jpg" alt="Necrophagist" /></a></li>
<li class="protitle"><a href="/portfolio/necro">Necro Forums</a></li>
</ul>
<ul>
<li class="hov"><a href="/portfolio/sound-fury" title="Sound and Fury" class="screenshot" rel="images/pre.sound.jpg"><img src="images/thumb-sound.gif" alt="Sound and Fury" /></a></li>
<li class="protitle"><a href="/portfolio/sound-fury">Sound and Fury</a></li>
</ul>
<!--<p><img src="images/divider.gif" alt="asdfdsf" /></p>-->
</div>
<div id="c-nav">
<ul>
<li id="current">Recent</li>
</ul>
<ul id="culnav">
<li>Recent</li>
<li><a href="library/websites" title="Website's which Nate has designed">Websites</a></li>
<li><a href="library/print" title="A small collection of printed material Nate has designed">Print</a></li>
<li><a href="library/templates" title="WordPress, PhpBB and other web templates Nate has designed">Templates</a></li>
<li><a href="library/newsletters" title="Email Newsletters which Nate has designed">Newsletters</a></li>
<li><a href="library/abstract-art" title="A collection of non-comissioned pieces by Nate">Abstract Art</a></li>
<li><a href="library/misc" title="Icons, vector artwork and other things Nate has designed">Misc</a></li>
</ul>
<div id="c-navend"></div>
</div>
<div id="c-mainend"></div>
</div>
<div id="end">
<div class="end-div-one">
<h3>about nate</h3>
<p>Nathan Aaron Chapman is a Graphic Designer living in Lincoln, Nebraska. After graduating <a href="../about">from</a>...</p>
<ul>
<li><img src="images/logo-red.gif" alt="Nathan Chapman's Site Logo" /></li>
<li>Copyright 2007-2008 </li>
<li><a href="http://www.chpmn.com">Nathan Aaron Chapman</a></li>
</ul>
</div>
<div class="end-div">
<h3>haut links</h3>
<ul>
<li><a href="http://kuler.adobe.com/">Kuler</a></li>
<li>A Color Swatch Library by Adobe</li>
<li><a href="http://www.ilovetypography.com/">I Love Typography</a></li>
<li>CSS Typography Techniques Blog</li>
<li><a href="http://www.netdiver.com/">Netdiver</a></li>
<li>Designer Portfolio Reviews</li>
<li><a href="http://www.webappers.com/">Webappers</a></li>
<li>Web Developer Tools Blog</li>
<li><a href="http://www.gotoandlearn.com/">GotoAndLearn</a></li>
<li>Flash 8 and 9 Video Tutorials</li>
<li><a href="http://www.treehugger.com/">Treehugger</a></li>
<li>Green Technology and DIY Blog</li>
<li><a href="http://www.webdesigners-directory.com">NNWDD</a> </li>
</ul>
</div>
<div class="end-div-two">
<div class="div-one-sub">
<h3>search</h3>
<form>
<fieldset>
<input name="keywords" id="search-text" value="" type="text">
<input name="post" class="btn search-btn" value="Search" type="submit">
</fieldset>
</form>
</div>
<div class="div-two-sub">
<h3>projects</h3>
<ul>
<li class="ehov"><a href="/portfolio/sound-fury" title="Sound and Fury" ><img src="images/thumb-sound.gif" alt="Sound and Fury" /></a></li>
<li class="ehov"><a href="/portfolio/necro" title="Necrophagist" ><img src="images/thumb-necro.jpg" alt="Necrophagist" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
newbie
Posts: 10
Joined: 2006-05-30
Try commenting out the
Posted: Thu, 2008-07-24 18:05
Try commenting out the jquery.js call. I have an issue with jquery.js adding extra margins to my CSS in IE7 only. Haven't found a fix yet.