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!

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

Help removing space under image/between rows 1

Status
Not open for further replies.
meckeard

meckeard

Programmer
Aug 17, 2001
619
US
Hi all,

I need a little help removing some space under an image or between rows.

I have a nested table with 2 rows, 1 cell in each row. The first row/cell holds an image. The second row/cell is emtpy but has a bgcolor set to #000000 to appear as though there is a black underline under the image.

Here is that page in question:


I want the image to look like it's resting on top of the black line.

As you can see from this page, there is a space between the image and the black line.

I have my cellpadding and cellspacing set to 0 and valign=bottom on the image cell, valign=top on the line cell. But I still can't get rid of the space.

Any ideas on how I can accomplish this?

Thanks,
Mark
 
Sort by date Sort by votes
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>

<head>
<title></title>

<link href="styles/WSFS_IE4.css" rel="stylesheet" type="text/css">

</head>

<body>

<!-- Start of master table that holds the page content -->
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>

<td width="50%" valign="bottom">
<!-- Start of first row, first cell.  Holds table with gift promo image -->

    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" height="208"><tr>
    <td class="SmallBoldGreenHeaderText" valign="bottom" height="208">
	&nbsp;&nbsp;&nbsp;Free Checking and a Free Gift!
	<img src="images/Home_Business5.jpg" height="206" width="275" usemap="#FreeGiftMap" border="0"></td>

    </tr><tr>

    <td valign="top" height="1" bgcolor="#000000"></td>
	
    </tr></table>
    
</td>
<td width="50%" valign="top">&nbsp;</td>

</tr></table>
<!-- End of master table that holds the page content -->

</body>

</html>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote


Insert a DOCTYPE at the top of the HTML page (first line on the document) and you should see this "quirk" disappear.

Jeff

 
Upvote 0 Downvote
It is a whitespace problem. Your indenting the code, IE reads as additional space you want to put after the image. That is where the gap comes from:
Code: 
<img src="images/Home_Business5.jpg" height="206" width="275" usemap="#FreeGiftMap" border="0"></td>
Just eliminate all the whitespace between image tag and closing table cell tag and you should be ok. Incidentally, if all this is used for is to draw a line at the bottom of the img, this would be way easier:
Code: 
<img src="images/Home_Business5.jpg" height="206" width="275" usemap="#FreeGiftMap" border="0" style="border-bottom: 1px solid black;" />
 
Upvote 0 Downvote
Well, I actually told the guy that it is much easier to draw a line by adding border-bottom to the img tag than making another cell with a black background. I think that one is almost as valuable as the doctype.
 
Upvote 0 Downvote
I appreciate all the advice.

Using the css to draw the line was cool, but I couldn't use it. The line had to be wider than the image so I used the row/cell with the black bgcolor.

Thanks to all for helping.
 
Upvote 0 Downvote
well, there are still better ways. Take this, for example:

Code: 
<div style="width: 500px; border-bottom: 1px solid #000;">
  <img style="width: 206px; height: 275px; border: 0;" src="images/Home_Business5.jpg" />
</div>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Yup, better, though I still prefer this one:
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]

<img style="width: 275px; height: 206px; border: 0; padding-right: 225px; border-bottom: 1px solid #000;" src="[URL unfurl="true"]http://www.wsfsbank.com/images/Home_Business5.jpg"[/URL] alt="Annoying Ad" />
IE demands the doctype for this, because it is dealing with the box model. Oh, and we kept forgeting that alt tag. :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
258
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
206
jason.lex
jason.lex
rrmcguire
  • Locked
  • Question
removing whitespace
Replies
3
Views
164
rrmcguire
rrmcguire

Part and Inventory Search

Sponsor

Back
Top