/    Sign up×
Community /Pin to ProfileBookmark

Cell Padding won’t go away

I’ve been working on a page where I’d like a series of rollover images to form a solid bar across the top. However, while putting it together each image seems to have about 3px of padding around it that I can’t get to go away. It’d like the images to all touch eachother without any padding.

I’m using Dreamweaver and the code is as follows:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Why doesnt this work?</title>
<style type=”text/css”>
#rollovers table{
position: absolute; top: 150px; left: 80px;
width: 544px;
height: 24px;
padding: 0px;
cell-spacing: 0px;
border: none;
z-index: 10;
}
</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>

<body>
<div id=”rollovers”>
<table bgcolor=”#CCCCCC”><tr><td>
<img src=”images/l.gif” alt=”Leaders” name=”Image4″ width=”103″ height=”24″>
<img src=”images/m.gif” alt=”Materials” name=”Image5″ width=”130″ height=”24″>
<img src=”images/p.gif” alt=”Prepare” name=”Image6″ width=”113″ height=”24″>
<img src=”images/c.gif” alt=”Contact” name=”Image7″ width=”113″ height=”24″>
<img src=”images/h.gif” alt=”Home” name=”Image8″ width=”85″ height=”24″>
</td></tr></table></div>
</body>
</html>

You can also find the page at:

[url]www.Jacobkohlhaas.net/test/rollover.htm[/url]

Thanks for the help!

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@The_Little_GuyMay 31.2006 — [CODE]td{
padding:0;
}[/CODE]
Copy linkTweet thisAlerts:
@Jake_ymauthorMay 31.2006 — I've already tried that, it doesn't change anything. I had styles for tr and td both with zero padding, but I took them off to save space since they were ineffective anyway.

Any more ideas?
Copy linkTweet thisAlerts:
@toicontienMay 31.2006 — You may not be seeing cell padding. You didn't specify cellpadding or cellspacing in the TABLE tag, so browsers will use their default settings for those two attributes. You may be seeing cell spacing. That can be reset using the border-spacing: CSS property, though I've heard Internet Explorer doesn't support the border-spacing property.

For the sake of consistency, I always set the cellpadding and cellspacing in the HTML file. Then I can change cell padding by applying padding to the TD or TH cells.
Copy linkTweet thisAlerts:
@Jake_ymauthorJun 01.2006 — Thanks for the Help, but unfortunatly it is still not working. I put both cellpadding and cellspacing equal to zero in the Table tag but it still refuses to get ride of the area around the images. The page with corrections is at:

www.jacobkohlhaas.net/test/rollover.htm

I'm not sure what other way there is to tell the browser not to have padding, I've got it in the CSS and in the HTML and yet it still shows spaces in both IE and Firefox.
Copy linkTweet thisAlerts:
@Jake_ymauthorJun 01.2006 — OK, I've discovered a solution. It looks like it was a HTML problem, not a CSS problem.

For some reason if I put the Table, TR, TD tags and all the images on the same line of code the spacing goes away. I have no idea why that would make a difference. maybe I'll check into the HTML forum and see if anyone can tell me.

Thanks for all the advice,

Jake
×

Success!

Help @Jake_ym spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...