TalkPHP
 
 
Account Login
Latest Articles
» The basic usage of PHPTAL, a XML/XHTML template library for PHP
» Vulnerable methods and the areas they are commonly trusted in.
» Simple way to protect a form from bot
» The Basics On: How Session Stealing Works
» How to keep your forms from double posting data
IRC Channel
IRC Speech Bubble Join the friendly bunch on IRC...
(#TalkPHP on Freenode)

...Also available via a web interface.

See this thread for information on the TalkPHP Free Hugs Initiative™. Subject to availability.
Associates
Associates
CSS Tutorials
Reply
 
LinkBack Thread Tools Search this Thread Display Modes
Old 06-03-2008, 05:35 AM   #1 (permalink)
The Contributor
 
Join Date: May 2008
Posts: 36
Thanks: 5
Kay1021 is on a distinguished road
Confused Sliced Images not working in php site

I'm having trouble with some space between images.

I used photoshop to slice my image and saved it for web by html and images. If I take that html and images and put it on my server it works fine...looks perfect.

Now I'm using this in php and all of sudden when you put it on the page that gets included...there are spaces and things are out of alignment. I thought maybe it was something to do with my style sheet. But i deleted it all and lots of parts of my code and it still has the spaces...only when in the php site. So far the only browser i've seen it look perfect while part of the php site is IE.


This is the code that photoshop gave me that I used exactly


Code:
<html>
<head>
<title>bkg3</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 (bkg3.psd) -->
<table id="Table_01" width="1001" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="12">
            <img src="images/bkg3_01.jpg" width="1000" height="66" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="66" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="images/bkg3_02.jpg" width="328" height="111" alt=""></td>
        <td colspan="4">
            <img src="images/exterior.jpg" width="314" height="111" alt=""></td>
        <td colspan="4">
            <img src="images/bkg3_04.jpg" width="358" height="111" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="111" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="images/bkg3_05.jpg" width="274" height="157" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="images/bedroom.jpg" width="138" height="120" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="images/bathroom.jpg" width="132" height="120" alt=""></td>
        <td colspan="3" rowspan="2">
            <img src="images/family.jpg" width="151" height="120" alt=""></td>
        <td colspan="2">
            <img src="images/bkg3_09.jpg" width="305" height="36" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="36" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="images/garage.jpg" width="151" height="205" alt=""></td>
        <td rowspan="7">
            <img src="images/bkg3_11.jpg" width="154" height="387" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="84" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/kitchen.jpg" width="224" height="121" alt=""></td>
        <td colspan="4" rowspan="2">
            <img src="images/living.jpg" width="197" height="121" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="37" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/bkg3_14.jpg" width="12" height="266" alt=""></td>
        <td rowspan="3">
            <img src="images/forsale.jpg" width="93" height="119" alt=""></td>
        <td rowspan="5">
            <img src="images/bkg3_16.jpg" width="169" height="266" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="84" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/bkg3_17.jpg" width="572" height="8" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <img src="images/utility.jpg" width="420" height="115" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="images/bkg3_19.jpg" width="152" height="174" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="27" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/bkg3_20.jpg" width="93" height="147" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="88" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/bkg3_21.jpg" width="420" height="59" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="59" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="12" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="93" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="169" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="54" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="84" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="86" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="46" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="98" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="52" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="151" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="154" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

I tried to look for answers....and tried everything margin/padding:0, display:block , border:0 anything and everything i could think of....

Is there anyone that could offer some advice??
Kay1021 is offline  
Reply With Quote
Old 06-03-2008, 08:12 AM   #2 (permalink)
The Frequenter
Newcomer 
 
xenon's Avatar
 
Join Date: Dec 2007
Location: Bucharest, Romania
Posts: 438
Thanks: 3
xenon is on a distinguished road
Default

Yes, write the HTML and CSS manually. And use a DOCTYPE.
__________________
I have optimistic thoughts, even though sometimes (if not always) life's a bitch.
xenon is offline  
Reply With Quote
Old 06-03-2008, 09:40 AM   #3 (permalink)
The Prestige
Advanced Programmer Top Contributor Good Samaritan 
 
sketchMedia's Avatar
 
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
sketchMedia is on a distinguished road
Default

And don't use tables for non tabular data, such as layouts (i know that's how it exported it but still the point needs re-iterating).
__________________
mysql> SELECT * FROM `users` WHERE `users`.`clue` > 0;
Empty set (0.00 sec)
sketchMedia is offline  
Reply With Quote
Old 06-03-2008, 03:45 PM   #4 (permalink)
is cute and cuddly
 
delayedinsanity's Avatar
 
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
delayedinsanity is on a distinguished road
Default

Yikes... I wish there was some other way to do that. The learning curve for HTML and CSS is a lot less than say, learning PHP, or C, or quantum physics. If you decide to ever take it on and get a good grasp on it, just always remember that, "it isn't quantum physics", and it'll seem a lot easier.

Than again, there's some theoretical quantum physics that makes a hell of a lot more sense to me than internet exploder's hack of the box model. Er, nevermind.

I would suggest if web design is your thing, you pop by HTML and CSS Tutorials, References, and Articles | HTML Dog and HTML Help by The Web Design Group has been around since way back when I learned, it should have some good reference material. That whole spiel that photoshop pumped out for you there is ugly - the fact that it's a table aside, it seems like half your page is been brutally peppered with spacer.gif's. Invisible gifs are like lil chambermaids, you want them around, you like what they do, but you don't want to see them that much.

Perhaps if you have Photoshop you may have the rest of the suite too, such as Dreamweaver? The second deadly sin of web design after tables is wysiwyg, but it's probably much better than what PS produced. If you don't have that, and you don't have the time to learn what you need, try ... this... I guess. It's a basic reset to define all margins as 0. Oh, and get rid of everything in your body tag and table tag. They should look like <body> and <table> respectively.

Code:
@charset "utf-8";

* {margin: 0; padding: 0;}

body {background-color: #FFFFFF;}

table {width: 1001px; height: 601px;}
...I'm sorry, I don't think you should use this method but I understand some people don't have much choice, and it's a lot more helpful to receive an answer that consists of more than "don't do this" or "do this" without some kind of example (sorry guys, no offense intended). In addition to those sites above, you can read A List Apart: Articles: Fix Your Site With the Right DOCTYPE! if you're interested in what a doctype is.
-m
delayedinsanity is offline  
Reply With Quote
Old 06-03-2008, 05:52 PM   #5 (permalink)
The Contributor
 
Join Date: May 2008
Location: Denmark
Posts: 70
Thanks: 3
SpYkE112 is on a distinguished road
Default

Seems like Imageready makes HTML 4.01 Markup?? Which version do you use? I've seen somewhere on the net that newer versions are able to do tabless slices.. :)
SpYkE112 is offline  
Reply With Quote
Old 06-03-2008, 06:40 PM   #6 (permalink)
The Prestige
Advanced Programmer Top Contributor Good Samaritan 
 
sketchMedia's Avatar
 
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
sketchMedia is on a distinguished road
Default

Idd, I think I have seen some settings in Image Ready CS about HTML output (if memory serves me correctly, which it often doesn't), but i don't use it as all i want / need are the images, i prefer to code my CSS / HTML myself.
__________________
mysql> SELECT * FROM `users` WHERE `users`.`clue` > 0;
Empty set (0.00 sec)
sketchMedia is offline  
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 10:05 AM.

 
     

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Inactive Reminders By Icora Web Design