PDA

View Full Version : It Looks good in dreamweaver but in the browser its out of place, please help


Mr Eric
10-25-2007, 09:39 AM
Ive got a table with 1 column and 4 rows
in the first row ive got a picture
in the second row ive got a navigation bar, with a background color the same as the links.
in the third row ive got a form field inside the form field ive got, two text fields, submit button
and two links (sign up & forgotten password?)
I made a css rule for the form
Properties for "#form1"
background image - url(Images/indexp3bg.jpg)
background repeat - no repeat

In the fourth row of the table ive got a picture placed right underneath the third row. this is where i want it to be and i want it to look like its joined onto the forum part but my problem is that when i preview this in the browser it separated by a line and its not looking right

This first screen shot is a picture of what it looks like in dreamweaver (this is what i want it to look like in the browser) 242

This screen shot is a pic of what is looks like when i preview my page in internet explorer (notice the line that has been created between the picture of the car in the fourth row and the third row 241

the line that is separating the rows is gray but this is because of the page background if i change the background color of the page to black the line will become black. now please help me out and solve this one PLEASE...
thanks alot and peace to you;-)

here is the code that dreamweaver genarated:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<link href="s.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
-->
</style></head>
<body onload="MM_preloadImages('Images/photosover.jpg','Images/videosover.jpg','Images/musicover.jpg','Images/gamesover.jpg')">
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="0">
<tr>
<td><img src="Images/this_is_my_website.JPG" width="850" height="65" alt="my website" /></td>
</tr>
<tr>
<td bgcolor="#FEB100"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Photos','',1)" onmouseover="MM_nbGroup('over','Photos','Images/photosover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/photos.jpg" alt="" name="Photos" width="76" height="20" border="0" id="Photos" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Videos','',1)" onmouseover="MM_nbGroup('over','Videos','Images/videosover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/videos.jpg" alt="" name="Videos" width="76" height="20" border="0" id="Videos" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Music','',1)" onmouseover="MM_nbGroup('over','Music','Images/musicover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/music.jpg" alt="" name="Music" width="76" height="20" border="0" id="Music" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Games','',1)" onmouseover="MM_nbGroup('over','Games','Images/gamesover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/games.jpg" alt="" name="Games" width="76" height="20" border="0" id="Games" onload="" /></a></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="63" valign="middle"><form id="form1" name="form1" method="post" action="">
<label>Username
<input type="text" name="textfield" id="textfield" />
</label>
<label>Password
<input type="text" name="textfield2" id="textfield2" />
</label>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
<p><a href="#">Sign up</a> <a href="#">forgotten password?</a></p>
</form> </td>
</tr>
<tr>
<td height="63"><img src="Images/Bentley_Continental_GTC.jpg" width="500" height="372" /></td>
</tr>
</table>
</body>
</html>

m1a2x3x7
10-25-2007, 05:21 PM
i would suggest learning css

domedia
10-25-2007, 05:57 PM
I have to agree (it would be possible for me to help then for example).
Did you play around with the CSS layouts that comes shipped with DW at all?

Any table masters that can help Eric out?

davidj
10-25-2007, 07:07 PM
dadadaa da

[swoops down]

ITS TABLE MAN!

the old school super hero

try adding a valign="top" to your <td> which holds the image

domedia
10-25-2007, 07:16 PM
Is it a spacer gif?
Is it the 4 riders of browser incompatability?
Is it a rotating skull?
No, it's DJ Table Man! :-D

valign="top" <- pfftt I knew that ;-)

m1a2x3x7
10-25-2007, 07:51 PM
see tables are like the power rangers. back in the early 90s they were cool but now well ummm...

davidj
10-25-2007, 08:21 PM
hey

i still fit in my all-in-one outfit.

i might look like a bag of oranges but it still fits.

Mr Eric
10-25-2007, 09:14 PM
Hey i changed valign from middle to top like you said but it still gives me the same result in the browser. what should i try next?
thanks:)

davidj
10-25-2007, 10:19 PM
just tested your code

your form needs its margins set to 0

use CSS to do this


form {
margin: 0px;
}

m1a2x3x7
10-25-2007, 10:23 PM
haha css 1 tables 0

davidj
10-25-2007, 10:32 PM
its css 5 tables 1

thats how many style hacks needed for 1 style to work across the browser range

Mr Eric
10-26-2007, 05:46 AM
Hey davidj I set the marigns in the form to 0 pix and that solved the problem your awesome :razz: :)
thanks for your help