homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Can't Get Rid of White Space Between Two Rows
cariadai




msg:4399670
 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




msg:4399678
 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




msg:4399796
 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




msg:4399810
 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




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

WOW, thanks guys!

peten




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

yep solved a couple of problems for me as well Ta

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved