TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)
-   -   Sliced Images not working in php site (http://www.talkphp.com/xhtml-html-css/2883-sliced-images-not-working-php-site.html)

Kay1021 06-03-2008 05:35 AM

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??

xenon 06-03-2008 08:12 AM

Yes, write the HTML and CSS manually. And use a DOCTYPE.

sketchMedia 06-03-2008 09:40 AM

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).

delayedinsanity 06-03-2008 03:45 PM

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

SpYkE112 06-03-2008 05:52 PM

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.. :)

sketchMedia 06-03-2008 06:40 PM

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.


All times are GMT. The time now is 11:35 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0