[URGENT]Please help in photoshop slicing table

by myfault

Posted: 11 years ago 6 replies

PROGRAMMING

I download one PSD pricing table and when i slice image and make it html with images. I view thought dreamweaver and it is showing perfect but when i upload this wordpress in the page everything was moved here and there and showing white spaces.

Screenshot

Code:

<html>
<head>
<title>license</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">

<table id="Table_01" width="726" height="405" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="11">
			<img src="images/license_01.jpg" width="725" height="8" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img src="images/license_02.jpg" width="3" height="396" alt=""></td>
		<td colspan="5">
			<img src="images/license_03.gif" width="249" height="64" alt=""></td>
		<td colspan="3">
			<img src="images/license_04.gif" width="236" height="64" alt=""></td>
		<td>
			<img src="images/license_05.gif" width="230" height="64" alt=""></td>
		<td rowspan="12">
			<img src="images/license_06.jpg" width="7" height="396" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="64" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/license_07.gif" width="231" height="31" alt=""></td>
		<td colspan="4" rowspan="3">
			<img src="images/license_08.gif" width="241" height="32" alt=""></td>
		<td colspan="3">
			<img src="images/license_09.gif" width="243" height="26" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="5">
			<img src="images/license_10.gif" width="243" height="86" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5">
			<img src="images/license_11.gif" width="231" height="97" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/license_12.gif" width="241" height="17" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/license_13.gif" width="13" height="2" alt=""></td>
		<td colspan="2" rowspan="3">
			<img src="images/license_14.gif" width="228" height="79" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/license_15.jpg" width="13" height="77" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="61" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/license_16.gif" width="243" height="105" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/license_17.gif" width="231" height="89" alt=""></td>
		<td rowspan="4">
			<img src="images/license_18.jpg" width="12" height="204" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/license_19.gif" width="229" height="91" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="89" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/license_20.jpg" width="1" height="115" alt=""></td>
		<td rowspan="2">
			<img src="images/license_21.gif" width="230" height="105" alt=""></td>
		<td>
			<img src="images/license_22.gif" width="1" height="2" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/license_23.jpg" width="242" height="105" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/license_24.gif" width="229" height="103" alt=""></td>
		<td rowspan="2">
			<img src="images/license_25.jpg" width="1" height="113" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="103" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/license_26.jpg" width="230" height="10" alt=""></td>
		<td colspan="3">
			<img src="images/license_27.jpg" width="229" height="10" alt=""></td>
		<td colspan="2">
			<img src="images/license_28.jpg" width="242" height="10" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="230" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="223" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="230" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
</body>
</html>

#photoshop #slicing #table #urgentplease

DanCoder 11 years ago

Make sure you view the the html page in your browser before you upload. Sometimes Dreamweaver can display funny things but the browser should give an accurate view of how it will look on your WordPress.
- Thanks
{{ DiscussionBoard.errors[8380874].message }}
David Beroff 11 years ago

Try touching the angle brackets of the [img] tags directly against those of the [td] and [/td] tags; the browser may be interpreting the space between them as whitespace to be displayed.
- Thanks
Signature

Put MY voice on YOUR video: AwesomeAmericanAudio.com
{{ DiscussionBoard.errors[8383678].message }}
GlobalPMT 11 years ago

I think David is on the money. I would try that first. In addition, I would Preview in multiple browsers on your local machine. If there is a problem, turn borders on for the table and view in multiple browsers. Borders are good at showing you what is happening when a table messes up.
- Thanks
{{ DiscussionBoard.errors[8386180].message }}
ernestrategos 11 years ago

Greetings, I'm thinking about two possible options:

1. The width of the table's container is narrower than the table itself and somehow breaks its layout.
2. Perhaps the WP template has its own table design and it breaks your design. (Most probable.)

You will certainly figure it out, let us know how it goes so we can be helpful, take care.
- Thanks
- 1 reply
Signature

Read one of my latest blog posts:
https://www.eagleblogging.com/write-...ost-today.html
{{ DiscussionBoard.errors[8389188].message }}
- DanCoder 11 years ago
  
  Originally Posted by ernestrategos
  
  2. Perhaps the WP template has its own table design and it breaks your design. (Most probable.).
  
  This crossed my mind as well especially because it looks fine in Dreamweaver.
  
  Thanks
  
  {{ DiscussionBoard.errors[8389365].message }}
otfromtot 11 years ago
I've seen some wordpress templates pad images. the css code would be something like
Code:

img { padding: 10px; }
and would explain the separation.
- Thanks
{{ DiscussionBoard.errors[8392757].message }}

[URGENT]Please help in photoshop slicing table

Trending Topics

Are Solo ADs the Most Cost Effective Way to Promote your Product?

How do I effectively build and nurture an email list for affiliate marketing purposes?

Been a while! Any of you Old Timers here?

How much does the rebranding affect CR ?

Are billboards still effective in driving customers?