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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Invisible Table Padding Problem 1

Status
Not open for further replies.
kennygadams

kennygadams

Programmer
Jan 2, 2005
94
US
Hi,

I created a table with rounded corners and I'm having a white-space problem in the inner bottom and top part of the table while using the MOZILLA FIREFOX browser. The URL below will show you what I'm talking about. I've spent many hours trying to get rid of those white spaces but cant figure out.


Code: 
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' '[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd'>[/URL]
<html>
	<head>
		<title>TEST</title>
		<link rel="stylesheet"  href="/css_style_sheet.css" type="text/css">
	</head>
<body>


<table align='center' width='500' height='0' border='0' cellspacing='0' cellpadding='0'>
	<tr>
		<td width='0' height='0'><img src='/pics/top_left_rounded_corner.gif' height='9' width='9' border='0'></td>
		<td width='100%' height='0'><img src='/pics/top_middle.gif' height='9' width='100%' border='0'></td>
		<td width='0' height='0'><img src='/pics/top_right_rounded_corner.gif' height='9' width='9' border='0'></td>
	</tr>
	<tr>
		<td colspan='3' height='100' align='center' bgcolor='#F8F8F8'><!--MAIN TABLE STUFF--></td>
	</tr>
	<tr>
		<td width='0' height='0'><img src='/pics/bottom_left_rounded_corner.gif' height='9' width='9' border='0'></td>
		<td width='100%' height='0'><img src='/pics/bottom_middle.gif' height='9' width='100%' border='0'></td>
		<td width='0' height='0'><img src='/pics/bottom_right_rounded_corner.gif' height='9' width='9' border='0'></td>
	</tr>
</table>


</body>
</html>

Thanks in advance for your help.

[lightsaber]

Kenny Adams
 
Sort by date Sort by votes
Have you ever considered one of the many new methods in creating rounded boxes, be it spiffy corners, nifty corners or a simple rounded box explained at A List Apart or other websites. Google will show you the results.
 
Upvote 0 Downvote
No, I haven't considered those options but I will give them a try. I'm still very interested in finding out why these rounded corners arent working in FIREFOX, so if you have any answers or suggestion please let me know. Thanks for your help.

[pacman]

Kenny Adams
 
Upvote 0 Downvote
Images, being an inline element can cause a great deal of problems with gaps due to whitespace. Also, these problems mostly occur when using tables and images. While it is usually IE that messes up, I have seen FF putting arbitrary gaps with images as well. Looking for what is causing it has never brought me closer to the problem, however adding display: block; to all the images in the table helps get rid of the problem. You could do a simple class or maybe even descendant selector to encompass all the respective images and give them appropriate display setting.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
901
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
643
PeDa
PeDa
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
163
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
168
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top