PDA

View Full Version : Inserting text in dreamweaver changes image locations when previewed in firefox/IE


phanta89
11-23-2013, 01:49 AM
I am making my 2nd website in Dreamweaver. My process is to make the design in photoshop, then save for web and bring it into dreamweaver where I put the text etc.
Worked fine with first website, but with this one, whenever I delete the image where I want to put the text (image is invisible - just one of the slices exported from photoshop) the rest of the images (header etc.) move to different locations of the page when viewed in firefox or IE (Dreamweaver, Chrome and Safari are fine)

Here's the code - Like I said I mainly use photoshop to make the website and dreamweaver to put in text/links so I really don't know anything about html/css stuff
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>Aliitasit's Website 02v8.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background-image: url(../background_4.3.jpg);
background-repeat: repeat;
}
-->
</style>

<style type="text/css">
body {
background-color: #AF9D9C;
}
</style>
</head>
<body>
<!-- Save for Web Slices (Aliitasit's Website 02v8.1.psd) -->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="4"><img src="images/tasi8.3_01.png" width="116" height="1232" alt=""></td>
<td colspan="2"><img src="images/home.png" width="181" height="92" alt=""></td>
<td><img src="images/service.png" width="159" height="92" alt=""></td>
<td><img src="images/contact.png" width="179" height="92" alt=""></td>
<td colspan="2" rowspan="2"><img src="images/tasi8.3_05.png" width="565" height="208" alt=""></td>
</tr>
<tr>
<td colspan="4"><img src="images/tasi8.3_06.png" width="519" height="116" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/tasi8.3_07.png" width="136" height="1024" alt=""></td>
<td colspan="4"><img src="images/title.png" width="670" height="59" alt=""></td>
<td rowspan="2"><img src="images/tasi8.3_09.png" width="278" height="1024" alt=""></td>
</tr>
<tr>
<td colspan="4"><img src="images/tasi8.3_10.png" width="670" height="965" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="116" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="136" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="179" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="287" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="278" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>


So that looks fine, but when i change this:
<tr>
<td colspan="4"><img src="images/tasi8.3_10.png" width="670" height="965" alt=""></td>
</tr>
<tr>

To this<tr>
<td colspan="4">(&nbsp; or text/content here)</td>
</tr>
<tr>

the header and home/contact etc. jump to the bottom of the page..
Weird thing is that other website I made seems to have almost the exact same setup/code but none of these problems :S
Any help much appreciated!

gentleone
11-23-2013, 05:48 PM
Letting Ps convert your design into HTML is asking for troubles. Well... actually... developing websites is solving problems all the time, but if you slice the design yourself & code it (the right way) yourself you will have at least control over it.

Now you end up with a bunch of tables which were the old way (12 to 20 years ago) of constructing a layout, but they're actually not meant for this and they're very inflexible.

While it's only just your second website, I would recommend just to learn HTML & CSS, so you can code your design yourself following best practices.
This is a free 30 day video tutorial which is already from 2011, but still stands.

http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/





...

phanta89
11-24-2013, 10:46 AM
Thanks for that gentleone. The tutorial looks good, however, I am meeting the client tomorrow and she wants the website up asap, so a quick fix in the meantime would be great if anyone has one.

gentleone
11-24-2013, 11:06 AM
To be honest... you're far from ready to do clients work.

But you want a quick and dirty fix... try this:



<tr>
<td collspan="4">
<table width="670" height="965" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>your text</p>
</td>
</tr>
</table>
</td>
</tr>

phanta89
11-25-2013, 11:09 PM
Well thanks for the help, but for some reason that code didn't fix anything :S

Mackajjan
11-26-2013, 08:39 AM
Try leaving the image and insert a div just before the start of the image, style the div to be the same size as the image. That will make a text area same size, but the image design will stay intact. Good luck phanta89

phanta89
11-26-2013, 10:52 AM
Mackajjan, you are a legend! :D Inserting a div tag fixed everything, thank you so much!!

d a v e
11-26-2013, 01:31 PM
fixed for now maybe... :) but as gentleone says you're a long way from offering sites to clients - learn the basics of he trade first before offering your services. you're just making problems for yourself because you don't yet have the underestanding of coding and good practices.

it just devalues our profession and ilitmately might give you a bad name with prospective clients.

what are you going to do when next (or this!) client mentions they'd like a mobile version?

suggest you make some practice sites after this one and getting your skills up to scratch before selling your sevices ;)

p.s. hopefully users won't need to increase text size on the current clients site or it will break like a waterballoon :)

domedia
11-27-2013, 08:21 PM
Dodged a bullet phanta89 :-) Good luck!