INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

gap under image (div layout)

gap under image (div layout)

(OP)
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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;
} 

RE: gap under image (div layout)

(OP)
as i am going to use the image as the div background i no longer require a solution to this problem.

thanks.

RE: gap under image (div layout)

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

RE: gap under image (div layout)

(OP)
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.

RE: gap under image (div layout)

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close