IE Leaving gaps
Moderator: General Moderators
-
kettle_drum
- DevNet Resident
- Posts: 1150
- Joined: Sun Jul 20, 2003 9:25 pm
- Location: West Yorkshire, England
IE Leaving gaps
Ok this is really starting to annoy me now. I've designed a layout using div tags and css and it is all working fine except on IE where it is leaving a gap under the div section where there are links. If I remove the links then there is no gap between the sections.
The border, padding and margin of the div's are all set to 0. And I can't use z-index as it then covers up the gap in IE, but then covers up the images on all other browsers.
What am i missing? or what hacks are there for it?
Thanks.
The border, padding and margin of the div's are all set to 0. And I can't use z-index as it then covers up the gap in IE, but then covers up the images on all other browsers.
What am i missing? or what hacks are there for it?
Thanks.
-
kettle_drum
- DevNet Resident
- Posts: 1150
- Joined: Sun Jul 20, 2003 9:25 pm
- Location: West Yorkshire, England
- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
-
kettle_drum
- DevNet Resident
- Posts: 1150
- Joined: Sun Jul 20, 2003 9:25 pm
- Location: West Yorkshire, England
-
kettle_drum
- DevNet Resident
- Posts: 1150
- Joined: Sun Jul 20, 2003 9:25 pm
- Location: West Yorkshire, England
Well here is the page:
And the style sheet is:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="" />
<meta name="keyword" content="" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<meta name="Author" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="centre">
<div class="header">
</div>
<span class="links-left"></span>
<span class="links-home">
<a href="index.php" border="0"><img src="images/home_page.jpg" border="0" alt="" /></a>
</span>
<span class="links-fresh-stock">
<a href="freshstock.php"><img src="images/fresh_stock.jpg" border="0" alt="" /></a>
</span>
<span class="links-clearance">
<a href="clearance.php"><img src="images/clearance_lines.jpg" border="0" alt="" /></a>
</span>
<span class="links-special">
<a href="specials.php"><img src="images/special_offers.jpg" border="0" alt="" /></a>
</span>
<span class="links-contact">
<a href="contact.php"><img src="images/help_and_contact.jpg" border="0" alt="" /></a>
</span>
<span class="links-cart">
<a href="cart.php"><img src="images/view_basket.jpg" border="0" alt="" /></a>
</span>
<span class="links-right"></span>
<span class="link-padding"></span>
<div class="belt-left"></div>
<div class="belt-trousers">
<a href="products.php?id=1"><img src="images/trousers.jpg" border="0" alt="" name="trousers" /></a>
</div>
<div class="belt-tshirts">
<a href="products.php?id=1"><img src="images/t-shirts.jpg" border="0" alt="" /></a>
</div>
<div class="belt-footwear">
<a href="products.php?id=2"><img src="images/footwear.jpg" border="0" alt="" /></a>
</div>
<div class="belt-jackets">
<a href="products.php?id=3"><img src="images/jackets.jpg" border="0" alt="" /></a>
</div>
<div class="belt-sweats">
<a href="products.php?id=4"><img src="images/sweats.jpg" border="0" alt="" /></a>
</div>
<div class="belt-shirts">
<a href="products.php?id=5"><img src="images/shirts.jpg" border="0" alt="" /></a>
</div>
<div class="belt-accessories">
<a href="products.php?id=6"><img src="images/accessories.jpg" border="0" alt="" /></a>
</div>
<div class="belt-right"></div>
<div id="left">
<div class="left-home"></div>
<div class="left-stock"></div>
<div class="left-clearance"></div>
<div class="left-special"></div>
<div class="left-contact"></div>
<div class="left-cart"></div>
<div class="left-bottom"></div>
</div>
<div class="spacer"></div>
<div id="main">
<div class="main-left">
Text Here. Text here. Text Here. Text here. Text Here. Text here.
Text Here. Text here. Text Here. Text here. Text Here. Text here.
Text Here. Text here. Text Here. Text here. Text Here. Text here.
Text Here. Text here. Text Here. Text here. Text Here. Text here.
</div>
<div class="spacer"></div>
<div class="main-bar"></div>
<div class="spacer"></div>
<div id="main-right">
<br /><br />
<div class="offer">
</div>
<div class="offer">
</div>
<div class="offer">
</div>
</div>
<div class="specials-banner"></div>
</div>
</div>
</body>
</html>Code: Select all
body {
font-size: 12px;
color: #000000;
font-family: Arial, Helvetica;
background: #EDF2F5;
margin: 0px;
padding: 0px;
border: 0px;
}
.header {
width: 780px;
height: 70px;
margin: auto;
background: url("images/header.jpg");
}
#centre {
width: 780px;
margin: auto;
}
.links-left {
background: url("images/link_left.jpg");
width: 326px;
float: left;
height: 16px;
}
.links-right {
background: url("images/link_right.jpg");
width: 10px;
float: left;
height: 16px;
}
.links-home {
width: 66px;
float: left;
height: 16px;
}
.links-fresh-stock {
width: 65px;
float: left;
height: 16px;
}
.links-clearance {
width: 85px;
float: left;
height: 16px;
}
.links-special {
width: 77px;
float: left;
height: 16px;
}
.links-contact {
width: 83px;
float: left;
height: 16px;
}
.links-cart {
width: 68px;
float: left;
height: 16px;
}
.link-padding {
clear: all;
background: url("images/link-padding.jpg");
width: 780px;
height: 4px;
float: left;
}
#belt {
width: 780px;
height: 30px;
margin: auto;
}
.belt-left {
background: url("images/belt-left.jpg");
width: 113px;
height: 44px;
float: left;
position: relative;
top: 0px;
}
.belt-trousers {
background: url("images/trousers.jpg");
width: 129px;
height: 44px;
float: left;
}
.belt-tshirts {
background: url("images/t-shirts.jpg");
width: 63px;
height: 44px;
float: left;
}
.belt-footwear {
background: url("images/footwear.jpg");
width: 76px;
height: 44px;
float: left;
}
.belt-jackets {
background: url("images/jackets.jpg");
width: 111px;
height: 44px;
float: left;
}
.belt-sweats {
background: url("images/sweats.jpg");
width: 138px;
height: 44px;
float: left;
}
.belt-shirts {
background: url("images/shirts.jpg");
width: 50px;
height: 44px;
float: left;
}
.belt-accessories {
background: url("images/accessories.jpg");
width: 91px;
height: 44px;
float: left;
}
.belt-right {
background: url("images/belt-right.jpg");
width: 9px;
height: 44px;
float: left;
}
#left {
width: 153px;
float: left;
}
.left-home {
width: 153px;
height: 20px;
background: url("images/left-home.jpg");
}
.left-stock {
width: 153px;
height: 28px;
background: url("images/left-stock.jpg");
}
.left-clearance {
width: 153px;
height: 25px;
background: url("images/left-clearance.jpg");
}
.left-special {
width: 153px;
height: 24px;
background: url("images/left-special.jpg");
}
.left-contact {
width: 153px;
height: 26px;
background: url("images/left-contact.jpg");
}
.left-cart {
width: 153px;
height: 26px;
background: url("images/left-cart.jpg");
}
.left-bottom {
width: 153px;
height: 297px;
background: url("images/left-bottom.jpg");
}
.spacer {
width: 19px;
height: 446px;
float: left;
background: #EDF2F5;
}
.main-left {
width: 273px;
background-color: #FFFFFF;
float: left;
}
.main-bar {
width: 1px;
height: 400px;
background-color: #000000;
float: left;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #B2B5B8;
}
#main-right {
width: 240px;
float: left;
}
.offer {
width: 236px;
height: 115px;
background: url("images/offer.jpg");
}
.specials-banner {
background: url("images/specials_banner.jpg");
float: left;
width: 48px;
height: 400px;
}
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
try removing the white space after each of the links (i.e. the carriage return and tabs and junk) so it looks like this:(on a per line basis)
Code: Select all
<div class="belt-accessories"><a href="products.php?id=6"><img src="images/accessories.jpg" border="0" alt="" /></a></div>