/    Sign up×
Community /Pin to ProfileBookmark

Gap Between Image and Table Border

Copy linkTweet thisAlerts:
Sep 11.2006

Hi. On my website, I have a table, and inside it I have included text and a picture in the bottom right corner. I want the picture to lay right up against the border of the table. However, it sits right against the bottom border, but not the right. I have tried messing around with cell padding, margins, everything I could think of, but nothing it working.

Here is an example of the problem I am having for those that may want a visual: [url]http://i81.photobucket.com/albums/j213/Nevfalath/Example.jpg[/url]

See how the purple “image” sits nicely on the bottom blue border but not against the right side? I am getting a white gap in that area.

I am using CSS and this is an example of what my coding looks like:

[COLOR=Red]<style type=”text/css”>
b.tabledesc{width:530;border:3px solid dodgerblue;background:white}
</style>

<b class=”tabledisc”>

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

<br><p>

<img src=”www.address.jpg” border=”0″ align=”right”>

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

</b></b>[/COLOR]

I am hoping this is a very simple question with a very simple answer. I am not new to HTML, but I am to CSS. Any help would be so very much appreciated, as I have been banging my head over this for days now.

Thanks for any help that can be offered!

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Sep 11.2006 — First, your <b>s should be <p>s with style="font-weight:bold" and your image should probably be style="float:right" instead of align="right". Also the only image I see is green, not purple.
Copy linkTweet thisAlerts:
@NevfalathauthorSep 11.2006 — My apologies, you are right, the image is green.

I fixed the little mistakes I made, such a align="right", but there is still a thin while line between the image and the right border. Acl, how do you make that go away?
Copy linkTweet thisAlerts:
@ray326Sep 11.2006 — Could be an image border, margin or padding on the paragraph or the paragraph's container.
Copy linkTweet thisAlerts:
@NevfalathauthorSep 11.2006 — I tried borders and padding, but perhaps I wrote the codes wrong... looking at the code I gave, how would I encorporate such a code?

I apologize for all the "noob" questions, but I do appreciate the help.
Copy linkTweet thisAlerts:
@ray326Sep 11.2006 — Does this help?
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Untitled</title>

<style type="text/css">
.tabledesc {
width:530px;
border:3px solid #05a;
background:#fff
}
p {
border: 3px solid #5a0;
margin:0;
}
</style>
</head>

<body>
<div class="tabledesc">
<p>
Text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text.
<p><img src="http://www.webdeveloper.com/icom_includes/toolbars/forums/networknavi/img/jupm_header.gif" border="0" align="right">
Text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text.
</p>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@NevfalathauthorSep 11.2006 — When I tried it, I got crazy lines and borders all over my page. So, I tried just incorporating the margin=0, but it didn't change anything.

I am stumped.
Copy linkTweet thisAlerts:
@ray326Sep 12.2006 — Hopefully you got the syntax right. It's margin:0 , not margin=0. Also your width had no dimension. The page I uploaded looks the same in IE6 and Firefox and it's a pretty simple demo of a bordered div containing two boardered paragraphs, the last one containing an image up against the right edge of the div.
Copy linkTweet thisAlerts:
@Paul_83ukSep 12.2006 — If you are using a table then you might want to try using [B]Padding:0[/B] this will get the image up to the right of the table border, but it will have the same effect on the text i'm afraid.
Copy linkTweet thisAlerts:
@NevfalathauthorSep 13.2006 — [B]ray326:[/B]

I copied your exact code and pasted it into a whole new document to see exactly where I might have went wrong.

I see what you did now. Do you know how to set up the code so that there is no green border? For example:

http://i81.photobucket.com/albums/j213/Nevfalath/Example2.jpg

[B]Paul_83uk:[/B]

I don't know what I am doing wrong, but margin and padding just are not working for me. But I really, really appreciate you two trying your best to help me. I know how annoying this must be for you two.
Copy linkTweet thisAlerts:
@NevfalathauthorSep 13.2006 — I tried the code without the:

p {border: 3px solid #5a0;margin:0;}

And typed in:

<style type="text/css">

.tabledesc {width:530px;border:3px solid #05a;background:#fff;margin:0;}

</style>

This worked. However, without the:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

And without the <head> and <body> tags, the same exact thing happens as the problem I am having!

For example, this is the site with the tags:

http://donnawilkesonline.com/test.html

And this is the site without them:

http://donnawilkesonline.com/test2.html

The second link is exactly the problem I am having, which leads me to believe there is something wrong with my header and body tags! I had no idea that could contribute to such a thing. I am going to mess around with it a little more and I will let you know what I find.
Copy linkTweet thisAlerts:
@NevfalathauthorSep 13.2006 — Well, it seems to be this that makes the difference:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

When I take it out on my test site, I get the same problem that I am having. However, for some really odd reason I get an error when I try to put it into the site that I am having problems with. Therefore, it must not be a coding error, but an issue with the website host, which there is nothing I can do about. It works fine with my test site, so it's not the code.
Copy linkTweet thisAlerts:
@toicontienSep 13.2006 — It appears to be the bottom margin on the last paragraph that's giving you guff. Try something like below:
.lastP {
margin-bottom: 0;
padding-bottom: 0;
}
Then in the last paragraph tag in the box, put <p [b]class="lastP"[/b]>.

Basically in this case, the image isn't tall enough, or the paragraph is too tall -- going by the links you posted directly above.
Copy linkTweet thisAlerts:
@ray326Sep 14.2006 — The green border is the border on the p {} style so that's all you should remove, leaving it

p { margin:0 }

That's why there's a gap (default p margin) at the bottom.
×

Success!

Help @Nevfalath 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,
)...