IE Leaving gaps

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

IE Leaving gaps

Post 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.
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post by kettle_drum »

It even works fine on IE on the mac, just not IE on windows.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

May be matter of \r or \n or both messing up, look it up, fella!
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

I'd like to see the html code prior to giving any advices.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Weirdan wrote:I'd like to see the html code prior to giving any advices.
ditto.
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post 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;}
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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)
Post Reply