Page 1 of 1

IE Leaving gaps

Posted: Mon Jan 03, 2005 8:48 am
by kettle_drum
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.

Posted: Mon Jan 03, 2005 8:50 am
by kettle_drum
It even works fine on IE on the mac, just not IE on windows.

Posted: Mon Jan 03, 2005 9:00 am
by n00b Saibot
May be matter of \r or \n or both messing up, look it up, fella!

Posted: Mon Jan 03, 2005 9:14 am
by kettle_drum
But it only leaves the gap when there is a link envolved, and its a gap of about 2-3 px, so im thinking that its a border or some kind - its just that its only there on IE on windows. Not on firefox, opera, netscape, safari and not even IE on the Mac.

Posted: Mon Jan 03, 2005 9:48 am
by Weirdan
I'd like to see the html code prior to giving any advices.

Posted: Mon Jan 03, 2005 10:20 am
by feyd
Weirdan wrote:I'd like to see the html code prior to giving any advices.
ditto.

Posted: Mon Jan 03, 2005 10:54 am
by kettle_drum
Well here is the page:

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">
				&nbsp;
			</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>
And the style sheet is:

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;}

Posted: Mon Jan 03, 2005 11:37 am
by feyd
try removing the white space after each of the links (i.e. the carriage return and tabs and junk) so it looks like this:

Code: Select all

<div class="belt-accessories"><a href="products.php?id=6"><img src="images/accessories.jpg" border="0" alt="" /></a></div>
(on a per line basis)