Member Avatar for cuddlers89

I dont see what ive done wrong, if i dont have the links in the curved table (just text in there) it works fine. But if i change theplain text to links it messes up. See pics. Someone please help. This is the code for the table when the links are in it.

<TABLE cellspacing=0 cellpadding=0 width="150" border="0" align="center" body style="margin:0px" bgcolor="999999">
<tr>
 
<td align="left" valign="top"><img src="top_left.gif" border="0">
</td>
<TD></TD>
<td align="right" valign="top"> <img src="top_right.gif" border="0"> </td>
</tr><tr>
<TD></TD>
<td>
 
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">
 
 
<a href="chat.html">Chat</a><br>
<a href="gallery.html">Gallery</a><br>
<a href="mail.html">Email</a><br>
<a href="join.html">Join</a><br>
<a href="news.html">News</a><br>
<a href="funnyshit.html>Funny shit</a>
 
 
 
</td><td></td> </tr>
<tr>
<td align="left" valign="bottom"><img src="bottom_left.gif" border="0"></td><TD></TD>
<td align="right" valign="bottom"><img src="bottom_right.gif" border="0"></td>
</tr></table>
messedup.bmp (75.85 KB)
notmessedup.bmp (72.24 KB)
  • 3 Contributors
  • 7 Replies
  • 238 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by rixius

Dani AI

Generated

Short answer: the problem was not the links themselves but spacing and a small HTML mistake. The visible "lines" were caused by default spacing around inline images (and by one malformed anchor in the original markup that could break layout). 's hspace fix works in older browsers, and ' suggestion to simplify the table structure (use a single middle cell with colspan) reduces alignment problems.

Checklist to finish this reliably

  • Fix any bad markup first (unclosed quotes or tags will cascade layout errors — the last link in the first post is missing a closing quote).
  • Remove table/ cell gaps: keep cellpadding and cellspacing at 0, or use CSS with border-collapse and border-spacing:0.
  • Remove image inline spacing: prefer CSS over deprecated attributes. Making the corner images render as block-level with no margins eliminates the tiny gaps that show the background through the edges.

Modern, robust fixes (apply to the element that wraps your box)

/* preferred approach */
.box { border-collapse: collapse; border-spacing: 0; }
.box td { padding: 0; }
.box img { display: block; border: 0; margin: 0; padding: 0; vertical-align: top; }

Notes and tips

  • Using hspace="0" is a quick legacy fix (as did), but it is deprecated — use CSS for forward-compatibility.
  • Validate your HTML with a validator after edits; a single missing quote or unclosed tag is a common cause of strange rendering.
  • If rebuilding this today, consider CSS corners (border-radius or CSS backgrounds) instead of sliced corner images to simplify markup and avoid these pixel gaps.

Recommended Answers

All 7 Replies

Member Avatar for rixius 
<table cellpadding="0" cellspacing="0" border="0" style="width: 150px; background-color: #999999;">
	<tr>
		<td style="width: 1px; text-align: left; background-color: #999999">
			<img src="topleft.gif" border="0" />
		</td>
		<td style="width: 1px; text-align: right; background-color: #999999">
			<img src="topright.gif" border="0" />
		</td>		
	</tr>
	<tr>
		<td style="text-align: center;" colspan="2" width="100%">
			<a href="chat.html">Chat</a><br />
			<a href="gallery.html">Gallery</a><br />
			<a href="mail.html">Email</a><br />
			<a href="join.html">Join</a><br />
			<a href="news.html">News</a><br />
			<a href="funnyshit.html>Funny shit</a>
		</td>
	</tr>
	<tr>
		<td style="width: 1px; text-align: left; background-color: #999999">
			<img src="bottomleft.gif" border="0" />
		</td>
		<td style="width: 1px; text-align: right; background-color: #999999">
			<img src="bottomright.gif" border="0" />
		</td>		
	</tr>
</table>

Replace your table with that, and it -should- work.

Member Avatar for cuddlers89

Still got the same problem :(

Member Avatar for cuddlers89

Ok, i nearly got it woking but there are these lines down the side of the table see pic.

Please someone look through this code and tell me what is wrong with it!!

<body bgcolor="cccccc">
<TABLE cellspacing=0 cellpadding=0 width="150" border="0" align="left" bgcolor="999999" >
<tr> 
	<td align="left" valign="top"><img src="images/top_left.gif" border="0" align="left" valign="top"></td>
	<td align="center" valign="top">&nbsp;</td>
	<td align="right" valign="top"><img src="images/top_right.gif" border="0" align="right" valign="top"></td>
</tr>
<tr> 
	<td align="left" valign="middle">&nbsp;</td>
	<td align="center" valign="middle"> <div align="left"><a href="chat.php">- 
		Chat</a><br>
		<a href="cars.php">- Cars</a><br>
		<a href="music.php">- Music</a><br>
		<a href="gallery.php">- Gallery</a><br>
		<a href="email.php">- Email</a><br>
		<a href="drug_info.php"> - Drug Info</a><br>
		<a href="graffiti.php">- Graffiti Art</a><br>
		<a href="join.php">- Join</a><br>
		<a href="news.php">- News</a></div></td>
	<td align="right" valign="middle">&nbsp;</td>
</tr>
<tr> 
	<td align="left" valign="bottom"><img src="images/bottom_left.gif" border="0" align="left" valign="bottom"></td>
	<td align="center" valign="bottom">&nbsp;</td>
	<td align="right" valign="bottom"><img src="images/bottom_right.gif" border="0" align="right" valign="bottom"></td>
</tr></table>
messedup2.bmp (109.19 KB)
Member Avatar for rixius

I'm not sure what to tell you, I don't do work with tables, they are pretty much my HTML arch-nemesis. :(

Member Avatar for Lafinboy

There are default spacing settign being applied to your images. To fix this add the following parameter to your image tags:

hspace="0"

which will set horizontal spacing between the image element and adjacent elements to 0 pixels. So the new image tags will read like:

<img src="images/top_left.gif" border="0" align="left" valign="top" hspace="0">
Member Avatar for cuddlers89

Thanks!!! Its working now. :cheesy:

Member Avatar for rixius

Thanx for the solution, Lafinboy

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.