Embedded SVG causing unwanted whitespace in XHTML rendering

I've looked through this many times, and I can't figure out why it's happening. Firefox, Safari, and Opera are all adding a "buffer" of white space between the two table rows in this code, when rendered in XHTML mode (doesn't do it in HTML). However, the cell spacing and padding is set to 0...

(Note that in this code, the "white space" is actually black, since I set the background color of the top row cells to black.)


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body style="margin: 0; padding: 0;">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
 <tr> 
 <td valign="top" align="left" bgcolor="#000000">
<a href="index.html" rel="index"><img src="images/logo.gif" border="0" alt="" /></a></td>
 <td valign="top" bgcolor="#000000" width="100%"><object type="image/svg+xml" data="images/top_trans.svg" width="100%" height="117"></object>
</td><td bgcolor="#000000" align="right" valign="top"><img src="images/top_art.jpg" alt="" height="117" width="493" align="right" /></td>
 </tr>
 <tr>
 <td colspan="3" bgcolor="green" height="50">
</td>
 </tr>
</table>
</body>
</html>

Embedded SVG causing unwanted whitespace in XHTML rendering

XHTML rendering engines are incorrectly inserting white space below SVG

kitsune

encyclo

kitsune

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week