Hey I made an image in Photoshop for an email newsletter. I sliced the image and added links to the images I want clicked, but when I send it in an email there are spaces between the images. How can I remove the spaces? Here is the coding.
<html>
<head>
<title>email_template_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (email_template_1.psd) -->
<table id="Table_01" width="650" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/ttcc_01.jpg" width="650" height="65" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/ttcc_02.jpg" width="507" height="33" alt=""></td>
<td rowspan="2">
<valign=top align=left width=33><img src="images/ttcc_03.jpg" width="33" height="33" border="0" alt="Blog"></td>
<td rowspan="2">
<img src="images/ttcc_04.jpg" width="10" height="33" border="0" alt="space"></td>
<td>
<valign=top align=left width=33><img src="images/ttcc_05.jpg" width="33" height="32" border="0" alt="Facebook"></td>
<td colspan="2" rowspan="2">
<img src="images/ttcc_06.jpg" width="67" height="33" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ttcc_07.jpg" width="33" height="1" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_08.jpg" width="650" height="25" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_09.jpg" width="650" height="162" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_10.jpg" width="650" height="347" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/ttcc_11.jpg" width="504" height="1" alt=""></td>
<td colspan="6">
<img src="images/ttcc_12.jpg" width="146" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ttcc_13.jpg" width="324" height="72" alt=""></td>
<td colspan="6"><valign=top align=left width=280><img src="images/ttcc_14.jpg" algin="left" width="280" height="72" border="0" alt="Click Here for more Information!"></td>
<td>
<img src="images/ttcc_15.jpg" align="left" width="46" height="72" border="0" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_16.jpg" width="650" height="95" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="324" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
and the site
file:///Users/Dad/Dropbox/Apps/site44/ttc.site44.com/ttcc.html
Since your Photoshop is creating tables, and poor ones at that, you have a different issue. I would recommend that you apply the following style to your table:
#Table_01 {
border-collapse: collapse:
}
That should fix the problem.
But if you weren't using tables, you could still have the same issue. This is because the spaces between the images are whitespace. They occur because your server doesn't optimize the HTML output. The reason this is a problem is because images and spaces can both be interpreted as having the CSS property display: inline. (I know some browsers don't do that to images, but when they do, this kind of thing happens.)
The solution I've used is to strip out all whitespace from between tags when it matters. Here's a sample function for doing that.
function stripSpaceBetweenTags(container) {
var rex = />\s+</gm;
var htmlString = $(container).html();
htmlString = htmlString.replace(rex,"><");
$(container).html(htmlString)
}
The container argument is a string that can be used as a valid jQuery selector. What happens is that it strips all cases of whitespace (spaces, tabs, linefeeds, etc.) between tags if there is only whitespace between those tags. This is important: if you have other characters, you don't want them stripped out.
Think of it as an ad hoc optimizer. You don't have to do this to the whole page, and it's probably better if you don't. But if you have a container that holds images which have to be tight, tight, tight, this is a good workaround.
Related
I have written an email template, its only a set of images with hyperlinks. Its working good on my browser, but when I send it through email, it gets broken due to unnecessary padding between tds.
This is how it should render. But what I see:
And when I inspected it:
You see the unnecessary padding? Here's the code:
<html><head>
<title>Email Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (594bfefd1385a.jpeg) -->
<table id="Table_01" width="1004" height="577" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68d7e313.gif" width="231" height="173" alt=""></td>
<td colspan="8" rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68db1f3f.gif" width="361" height="163" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e23617.gif" width="72" height="73" alt=""></td>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f589ec.gif" width="285" height="25" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td>
<td></td>
</tr>
</tbody></table>
<!-- End Save for Web Slices -->
</body></html>
Please help, Thanks in advance.
I take it this is the first email you have built? It is not padding, its the display block that is missing from the images. Use the below code for all images in the html:
style="display:block;" hspace="0" vspace="0" alt="" border="0"
Note: Since you have so many colspan and rowspan the template might not work properly in some email clients. The above code will ensure all your images are sitting flush against each other.
A word of advice not to be taken lightly:
Never do Save for web from Photoshop. It creates table that is not fixable most of the time.
Don't use col span. Some email email clients don't like it.
Only image emails will have delivery problem, general rule is to have 70/30 (some day 60/40) to get best results.
Use media queries or Gmail fix or your emails will look really messed up in Gmail apps.
Let me know if the above fix works.
Cheers
I know this is a basic question but I'm having difficultly making my site responsive.
It is a basic page that I've done in Photoshop. I've tried a lot of things to make it responsive with no luck.
Here is my HTML code:
<html>
<head>
<title>newbeebosite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" width="1601" height="1401" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/Home_01.jpg" width="1600" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Home_02.jpg" width="1216" height="46" alt=""></td>
<td>
<img src="images/Home_03.jpg" width="192" height="45" alt=""></td>
<td>
<img src="images/Home_04.jpg" width="192" height="45" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Home_05.jpg" width="384" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Home_06.jpg" width="78" height="87" alt=""></td>
<td>
<img src="images/Home_07.jpg" width="251" height="87" alt=""></td>
<td colspan="3">
<img src="images/Home_08.jpg" width="887" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Home_09.jpg" width="971" height="160" alt=""></td>
<td>
<img src="images/Home_10.jpg" width="1" height="160" alt=""></td>
<td colspan="2">
<img src="images/Home_11.jpg" width="436" height="160" alt=""></td>
<td>
<img src="images/Home_12.jpg" width="192" height="160" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="160" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/Home_13.jpg" width="1600" height="1086" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1086" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="251" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="642" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
As a starter I would add:
<meta name="viewport" content="width=device-width, initial-scale=1">
in the head of your html document.
Explanation
This tells the browsers CSS engine "use the screen width of the device (measured in "device independent pixels") as the basis for your HTML element" - and therefore all "fluidly styled" descendant (child) elements will be affected because their height and width properties are based on their parent elements size.
width=device-width is what instructs the page to match the screen's width in device independent pixels. (as opposed to say width=1024 which would explicitly set the width of the page.)
Now when the browser width changes your CSS rules will be hooked into those changes.
I believe initial-scale=1 establishs a 1:1 relationship between CSS pixels and device independent pixels (If that doesnt make sense dont worry - but I would include it).
Then you need to make the table responsive by removing the fixed width definitions and replacing with width definition that change as the parent containers change size.
There is a good explanation of this here - https://developers.google.com/speed/docs/insights/ConfigureViewport
e.g. like this:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://lorempixel.com/400/200/" width="80%" height="46" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
Here is a working demo - http://jsbin.com/dilejobofu/1/edit?html,output
<html>
<head>
<title>website page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" width="50%" height="50%">
<!-- Save for Web Slices (website page.psd) -->
<table id="Table_01" width="1681" height="1051" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td colspan="2">
<img src="images/website-page_01.gif" width="302" height="65" alt=""></td>
<td colspan="6">
<img src="images/website-page_02.gif" width="999" height="65" alt=""></td>
<td colspan="2">
<img src="images/website-page_03.gif" width="379" height="65" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="65" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website-page_04.gif" width="3" height="1" alt=""></td>
<td rowspan="2">
<img src="images/website-page_05.gif" width="299" height="606" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/website-page_06.gif" width="1050" height="606" alt=""></td>
<td rowspan="2">
<img src="images/website-page_07.gif" width="328" height="606" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/website-page_08.gif" width="3" height="984" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="605" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/website-page_09.gif" width="639" height="379" alt=""></td>
<td rowspan="2">
<img src="images/website-page_10.gif" width="18" height="379" alt=""></td>
<td rowspan="2">
<img src="images/website-page_11.gif" width="342" height="379" alt=""></td>
<td colspan="2">
<img src="images/website-page_12.gif" width="22" height="1" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/website-page_13.gif" width="656" height="379" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website-page_14.gif" width="21" height="378" alt=""></td>
<td>
<img src="images/website-page_15.gif" width="1" height="378" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="378" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="299" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="340" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="342" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="277" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="328" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
after I finished designing the page using PS and export it as html file, it is ok with 15 inch screen but very big with 13 inch screen.
how can I make it compatible with all screens , with out scrolling .
Solution Update:
I resized the psd file and make it smaller 780*800 , then export it as image/HTML and it is work fine now with all browsers.
You 15 inch display must have higher resolution than the 13 inch display. So its looking bigger. Your webpage should look same on any display having same resolution. You should check your resolution.
Make <img src="images/website-page_02.gif" width="999" height="65" alt=""></td> 's width smaller.
Solution Update: I resized the psd file and make it smaller 780*800 , then export it as image/HTML and it is work fine now with all browsers.
I made web page via Photoshop, sliced it and saved for web and uploaded the html file. It looks just fine in Firefox and Chrome, but IE it is whole different story. Any one know how to fix it and why I`m getting this black padding?
IE:
Firefox, Chrome & Safari:
Code:
<html>
<head>
<title>Shamir Applications</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Webpage08.psd) -->
<table id="Table_01" width="960" height="720" border="0" cellpadding="0" cellspacing="0" style="margin-right: auto; margin-left: auto;">
<tr>
<td colspan="11">
<img src="images/Webpage08_01.png" width="960" height="237" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Webpage08_02.png" width="130" height="483" alt=""></td>
<td>
<img src="images/Webpage08_03.png" width="138" height="36" alt=""></td>
<td rowspan="6">
<img src="images/Webpage08_04.png" width="142" height="483" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_05.png" width="138" height="36" alt=""></td>
<td rowspan="6">
<img src="images/Webpage08_06.png" width="140" height="483" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_07.png" width="138" height="36" alt=""></td>
<td rowspan="6">
<img src="images/Webpage08_08.png" width="134" height="483" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/Webpage08_09.png" width="138" height="447" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_10.png" width="138" height="13" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_11.png" width="138" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Webpage08_12.png" width="14" height="146" alt=""></td>
<td>
<img src="images/Webpage08_13.png" width="110" height="110" alt=""></td>
<td rowspan="2">
<img src="images/Webpage08_14.png" width="14" height="146" alt=""></td>
<td rowspan="4">
<img src="images/Webpage08_15.png" width="16" height="434" alt=""></td>
<td>
<img src="images/Webpage08_16.png" width="110" height="110" alt=""></td>
<td rowspan="4">
<img src="images/Webpage08_17.png" width="12" height="434" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Webpage08_18.png" width="110" height="36" alt=""></td>
<td rowspan="3">
<img src="images/Webpage08_19.png" width="110" height="324" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Webpage08_20.png" width="138" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Webpage08_21.png" width="138" height="271" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Try to put this in your css file
img {
border:0;
padding:0;
margin:0;
}
or in the head tag write
<style type="text/css">
img {
border:0;
padding:0;
margin:0;
}
</style>
You could try switching from using the tables mode to using the css export instead?
With regard to Matei Mihai's answer you should probably add this as well:
img {
border:0;
padding:0;
margin:0;
display:block; /* This often removes extra spacing around images in IE */
}
Sorry I'm completely new to this.
Ive designed a website in photoshop, and exported it 'for use with web and devices', (HTML/IMAGES). And I now want to be able to write and add content over a specific 'content slice' (images/GSGOPSD_13.gif (900px X 756px))
Here is the code i have from photoshop:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#2c2c2c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (GSGOPSD.psd) -->
<table id="Table_01" width="1051" height="1235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/GSGOPSD_01.gif" width="1050" height="359" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="359" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/GSGOPSD_02.gif" width="92" height="2" alt=""></td>
<td rowspan="3">
<img src="images/GSGOPSD_03.gif" alt="" name="Twittr" width="55" height="62" id="Twittr"></td>
<td colspan="2" rowspan="4">
<img src="images/GSGOPSD_04.gif" width="903" height="119" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/GSGOPSD_05.gif" width="13" height="873" alt=""></td>
<td colspan="2">
<img src="images/GSGOPSD_06.gif" alt="" name="Fbook" width="61" height="59" id="Fbook"></td>
<td colspan="2" rowspan="3">
<img src="images/GSGOPSD_07.gif" width="18" height="117" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_08.gif" width="61" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_09.gif" width="55" height="57" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_10.gif" alt="" name="thumdown" width="60" height="59" id="thumdown"></td>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_11.gif" width="16" height="756" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_12.gif" alt="" name="thumup" width="61" height="59" id="thumup"></td>
<td rowspan="2">
<img src="images/GSGOPSD_13.gif" width="900" height="756" alt=""></td>
<td> //------------I WANT TO ADD CONTENT OVER THIS IMAGE.
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_14.gif" width="60" height="697" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_15.gif" width="61" height="697" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="697" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="900" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
I thought that there would be a tut for this somewhere, and it would be a pretty simple thing, thanks for any help!
try going through this tutorial as I think it is what you are trying to aim for. You can relate it to your .psd along the way
You need to remove the image and then you will be able of insert content in the place where the image was.
BUT I would not recommend use tables for designing your layout and also do not use fixed sizes for widht/height. This should be achieved with CSS