Anseric
Reputation: 13
I have white space in my table
I have white space in my table. I've searched the forum but it seem I have everything setup correct. Has it something to do with the images? Cellpadding is here but no luck.
Does anyone know where it goes wrong? I've tried block to but with no luck, I know I must be missing something but I can't seem to find it. I can't add any more details to this post.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
@media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>Upvotes: 1
Views: 45
Answers (1)
Randy Casburn
Reputation: 14165
Your <p> tags are adding margins by default. There is no css class p1 defined, but setting margins to zero on that class will fix this.
Note
I am purposely not addressing the bad practice involved with using tables for layout (or the other myriad other bad practices in this code).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
.p1 { margin: 0 };
@media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>Upvotes: 1
Related Questions
- A blank space appears after inserting an image in an HTML table
- How do I get rid of these white spaces between my images and tables?
- White space appearing between images in a table
- html images in table with no space
- Unwanted space in my html table
- how to remove the whitespace around images in a table
- how to remove space in html table
- How can I remove this white space from a table?
- Space around the image in a table issue
- img tag having white space at the bottom