...

View Full Version : IE7 shows margin between elements. WHY?



Uzair
06-03-2009, 10:50 AM
Hi coders,

I am creating a page using the DIVs.
Problem is.... FF is showing the page exactly as it should be. While IE7 shows some blank space between the elements. Please have a look at the attached graphics. The red line in the IE graphic is actually the background color of the blue banner.

Also my code is below...

HTML...

<!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=iso-8859-1" />
<title>asdasdasdasdasda</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div id="wrapper_container">
<div id="wrapper">
<div id="header">
<div class="logo">
<a href="#"><img src="images/logo.jpg" width="337" height="76" border="0" alt="" /></a>
</div>
<div class="mainmenu">
<span class="item">
<a href="#" class="big2">asdas</a><br />
<a href="#">asdasd</a>
</span>
<span class="item">
<a href="#" class="big">asdasdas</a><br />
<a href="#">asdasd</a>
</span>
<span class="item">
<a href="#" class="big">asdasdasda</a><br />
<a href="#">asdasdas</a>
</span>
<span class="item">
<a href="#" class="big">asdasdasd</a><br />
<a href="#">asdasdasd</a>
</span>
<span class="item">
<a href="#" class="big">asdasdasdad</a><br />
<a href="#">asdasda</a>
</span>
</div>
<div class="cls"></div>
</div>

<div id="banner">
<div class="banner_contents">
<a href="#"><img src="images/specialized.png" width="466" height="23" border="0" alt="" /></a>
<p>asdasdasdasd as dasdasdas das sd asd as das das asd as asd asd asd asd asda asd as as asdasd asdasda sds t r rt t t trytr rtyry rty rtr rt rtytrj kjb dkb jkb kljbn sfslewbjwb welblo befo bioe owe ob owebfuowe fouweb sb uouofwebouweb fuowefuobofbo ubfoweu wueb oweubfowueb uowbfuo ebfuo web</p>
<a href="#"><img src="images/btn_plus.jpg" width="223" height="36" border="0" alt="" /></a>
</div>
<div class="banner_portfolio">
portfolio here
</div>
<div class="cls"></div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>

CSS...

body {
margin: 0;
font: 11px "Trebuchet MS";
color: #6b6b6b;
background: url('images/topbgx.jpg') repeat-x;
}
h1, h2, h3, h4, p, ul, li {
margin: 0;
padding: 0;
}
a {

}
.left, .logo, span.item, .banner_contents, .col_process, .col_design, .col_analytics, .col_img, .rounded_home {
float: left;
}
.right, .mainmenu, .banner_portfolio, .consultingBox {
float: right;
}
.cls {
clear: both;
height: 0;
line-height: 0;
border: none;
}

#wrapper_container {
background: url('images/cnt_bgx.jpg') bottom repeat-x;
}
#wrapper {
width: 990px;
margin: 0 auto;
}

/* HEADER STARTS */
#header {
height: 76px;
}
.logo {

}
.mainmenu {
margin-top: 20px;
margin-right: 26px;
}
.mainmenu span.item {
border-left: 1px dashed #557494;
padding: 0 0 0 12px;
margin-left: 26px;
}
span.item a {
font: 10px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
span.item a.big {
font: 16px Arial, Helvetica, sans-serif;
color: #8ba6c0;
}
span.item a.big:hover {
color: #fff;
}
span.item a.big2 {
font: 16px Arial, Helvetica, sans-serif;
color: #fff;
}
/* HEADER ENDS */

/* BANNER STARTS */
#banner {
background: #ff0000 url(images/banner_bg.jpg) no-repeat;
height: 203px;
padding: 30px;
}
.banner_contents {
width: 466px;
}
.banner_contents p {
font-size: 14px;
line-height: 22px;
margin: 12px 0;
color: #383736;
}
.banner_portfolio {

}
/* BANNER ENDS */

abduraooft
06-03-2009, 11:12 AM
Not sure, but might be those mysterious gaps (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps). Have a try by adding

#banner img{
display:block;
}

Otherwise post a link to your page

Uzair
06-03-2009, 11:21 AM
There is nothing to do with the images in the banner div. I am sure about this :)

Rowsdower!
06-03-2009, 06:44 PM
So, to clarify, are we talking about the #banner div here?

I think this is to blame:
.cls {
clear: both;
height: 0;
line-height: 0;
border: none;
}

Get rid of that bit of code and see if this straightens things out...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum