Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

gap under image (div layout)

Status
Not open for further replies.

antonyx6666

Programmer
Sep 9, 2010
38
GB
there is a small gap underneath an image which i cannot seem to get rid of.

Gap

also i think there is some redundant css in my stylesheet which could be removed. if you can help out with that also would be great.

thanks

page
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-GB">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="index, follow" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>

<div id="header">
	<p>Header</p>
</div>

<div id="middle">
	
<img src="london.jpg" style="padding:0px;"/>

</div>

<div id="footer">
	<p>Footer</p>
</div>

</body>
</html>

stylesheet
Code:
body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:600px;    	/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
}

/* Header styles */
#header {
	clear:both;
	float:left;
	width:100%;
}
#header {
	border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
}
#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a {
	display:block;
	float:left;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:#eee;
	color:#000;
	text-decoration:none;
	position:relative;
	left:15px;
	line-height:1.3em;
}
#header ul li a:hover {
	background:#369;
	color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
}
#header ul li a span {
	display:block;
}
/* 'widths' sub menu */
#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}

#middle {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;
	margin:0px;
	padding:0px;
	/* This chops off any overhanging divs */
}

/* Footer styles */
#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
}
#footer p {
	padding:10px;
	margin:0;
}
 
as i am going to use the image as the div background i no longer require a solution to this problem.

thanks.
 
While you don't require a solution, I suggest you rethink your CSS. Specifically the pointless usage of all those floats you then immediately clear.

Its going to give you a headache later down the line. Remove all floats unless you specifically require them for something.

By the way, the fix was to make the image a block level element. The img element has some type of spacing after it for some reason. Couldn't pin point why though.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Hi thanks for the response. I know exactly what you are saying. Once my new layout is coded (with the image as the div background) I shall re post my CSS if there are any problems.

 
Hi,
just to add my thoughts on this. I agree if you make the image a block level element the gap will go away. If I am right, an image is an inline element by default and therefore it follows that just like text or any other inline element it will by default have some space added immediately after it if the display moves on to another line. I think this spacing is referred to as line-height in css.

Hope this makes sense

Steve
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top