Welcome to WebmasterWorld Guest from 184.72.177.182

Forum Moderators: incrediBILL

Message Too Old, No Replies

Can't Get Rid of White Space Between Two Rows

     
10:46 am on Dec 20, 2011 (gmt 0)

New User

joined:Dec 20, 2011
posts: 2
votes: 0


This is so annoying! I have an image floating between two black lines, top and bottom, and although the top line butts up right against the main image, the bottom line is hovering just below it, with white space between. I've tried all the HTML tags I can think of, and some CSS tags too, but nothing seems to move that bottom line. Can anyone figure out what's wrong with my coding here?

<table width="1280" cellspacing="0" cellpadding="0">
<tr height="1" width="1280"> <td width="85"></td>
<td height="1" width="1100" bgcolor="#000000"></td> <td width="95"></td></tr>
<tr><td width="85" height="500"></td>
<td height="500" width="1100"><img src="http://www.poshyarn.co.uk/images/new/coverphoto.jpg">
</td><td width="95"></td></tr>
<tr height="1" width="1280"> <td width="85"></td>
<td height="1" width="1100" bgcolor="#000000"></td> <td width="95"></td></tr></table>
11:16 am on Dec 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


This sounds like the same problem as:
Space between images in a table [webmasterworld.com]
5:21 pm on Dec 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Why is this in a table at all? Tables are for tabular data, like a spreadsheet, etc. In looking at the site layout, it's likely just the nature of tables - something doesn't "add up" vertically and is forcing the space. For starters, your image is 489 pixels high and you're setting a height of 500 on that cell.

How does this look to you? Copy and paste and give it a go. :-)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#img-container {
width: 1100px;
margin: 12px auto;
padding:0;
height: 491px; /* img is 489 */
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<p id="img-container">
<img src="coverphoto.jpg" alt="Cover Photo - alt is still a required attribute">
</p>
</body>
</html>


edit: A side note, you don't need to use Javascript for your mouseovers, or a table layout at all. You can do your mouseovers by changing background-position on your navigation elements using the selector a:hover. That's really a bit longer topic than your question here, but dig around the CSS forum, a good starting point would be tableless layouts and CSS sprites.

The layout is fairly simple, create a parent container and set margin:auto on it so it centers in the viewport. Inside that container, float the "image" container and the navigation both left. Zero out the paddings and margins on these and make sure the widths add up to 1100. Set the navigation anchors ("a") to display: block, and indent the text in the anchors off-screen with a negative indent - this will allow you to use "regular text" inside the links without it overlapping the background images. Assign background images to the anchors.
5:59 pm on Dec 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Here's one that should inspire you to how easy table-less layouts are. It's not quite your layout but is a good "starter."


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#content-left,#img-container,#sidebar,#logo { float: left; }
#outer-container {
border: 1px solid #000;
width: 1280px;
margin:auto;
overflow:hidden;
}
#header,#img-container,#content-left {
width: 1100px;
}
#header, { height: 100px; }
#logo {
width: 150px;
height: 80px;
margin: 20px 0 0 24px;
}
#header-right {
float: right;
width: 150px;
margin: 20px 24px 0 0;
}

#sidebar {
width: 179px; /* + border = 180 */
border-left: 1px solid #000;
}
#img-container {
width: 1100px;
margin: 0;
padding:0;
height: 491px; /* img is 489 */
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#sidebar ul, #sidebar ul li {
margin:0;
padding:0;
}
#sidebar ul li { display: block; }
#sidebar ul li a, #sidebar p {
padding: 18px;
width:144px;
margin:0;
display: block;
}
#sidebar p {
height: 64px;
margin:0;
background: #b0b0b0;
}
#sidebar ul li a {
height: 88px;
background: #f4f4f4;
/* when adding bg images, remove this
and add text-indent: -50000px */
text-align: center;
}
#sidebar ul li a:hover { background: #c0c0c0; }
</style>
</head>
<body>
<div id="outer-container">
<div id="content-left">
<div id="header">
<p id="logo">Logo here</p>
<p id="header-right">This
is the text at the top right
</p>
</div> <!-- header -->
<p id="img-container">
<img src="coverphoto.jpg" alt="Cover Photo - alt is still a required attribute">
</p>
</div> <!-- content left -->
<div id="sidebar">
<p>
This is your top right text
block.
</p>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">third</a></li>
<li><a href="#">fourth</a></li>
</ul>
</div> <!-- sidebar -->
</div> <!-- outer container -->
</body>
</html>
9:04 pm on Dec 20, 2011 (gmt 0)

New User

joined:Dec 20, 2011
posts: 2
votes: 0


WOW, thanks guys!
7:15 pm on Jan 21, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 21, 2011
posts: 59
votes: 0


yep solved a couple of problems for me as well Ta