Can't Get Rid of White Space Between Two Rows

Forum Moderators: open

Message Too Old, No Replies

Can't Get Rid of White Space Between Two Rows

cariadai

10:46 am on Dec 20, 2011 (gmt 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>

penders

11:16 am on Dec 20, 2011 (gmt 0)

This sounds like the same problem as:
Space between images in a table [webmasterworld.com]

rocknbil

5:21 pm on Dec 20, 2011 (gmt 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.

rocknbil

5:59 pm on Dec 20, 2011 (gmt 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>

cariadai

9:04 pm on Dec 20, 2011 (gmt 0)

WOW, thanks guys!

peten

7:15 pm on Jan 21, 2012 (gmt 0)

yep solved a couple of problems for me as well Ta