Welcome to WebmasterWorld Guest from 54.166.152.121

Forum Moderators: open

Message Too Old, No Replies

Dreamweaver CS3 page not aligning to top of page

     
6:20 pm on Nov 28, 2008 (gmt 0)

5+ Year Member



Hi,

I've developped a website in Dreamweaver. I used two separate templates for the pages as they had slightly different layouts of the cells, but the same menu and logo layout. I think I followed the same steps to make each template, but I have encountered two problems with pages done using the primary template, which don't occur with the other template:
1) they are not aligned to the top of the page, despite using a DivTag with zero padding and margins
2) they look wonky in Mozilla, but fine in IE and Safari.

Any help would be appreciated. Here is the start of the code for a sample problem page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><!-- InstanceBegin template="/Templates/main_layout.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>About One SEED: Philosophy</title>
<link rel= "shortcut icon" href="images/one_seed.ico"/>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("site_layout.css");
body {
background-color: #FFFFFF;
margin-top: 0;
padding-top: 0;
}
-->
</style>
<link href="site_layout.css" rel="stylesheet" type="text/css">
<link href="site_layout_text_area.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style5 {font-size: 16pt}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
<style type="text/css">
<!--
.style6 {font-size: 24pt}
-->
</style>
<style type="text/css">
<!--
.style7 {color: #8DCE35}
-->
</style>
<!-- InstanceEndEditable --><!-- InstanceParam name="0_large_photo_src" type="URL" value="images/0_large_photo.gif" --><!-- InstanceParam name="small_photo_01_src" type="URL" value="images/0_small_photo_01.gif" --><!-- InstanceParam name="small_photo_02_src" type="URL" value="images/0_small_photo_02.gif" --><!-- InstanceParam name="small_photo_03_src" type="URL" value="images/0_small_photo_03.gif" --><!-- InstanceParam name="small_photo_04_src" type="URL" value="images/0_small_photo_04.gif" --><!-- InstanceParam name="category_src" type="URL" value="images/0_cat_about_seed.gif" -->
<link href="site_layout_title.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
-->
</style>
<!-- InstanceParam name="0_large_photo_04_src" type="URL" value="images/0_large_photo.gif" -->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!-- InstanceParam name="src" type="URL" value="images/0_large_photo.gif" -->
<link href="site_layout_slideshow.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.text_area {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
color: #666666;
text-align: left;
vertical-align: top;
margin-right: 30px;
margin-left: 18px;
text-indent: 0px;
}
-->
</style>
<link href="site_layout_up_arrow.css" rel="stylesheet" type="text/css">
<link href="site_layout_dn_arrow.css" rel="stylesheet" type="text/css">
<link href="site_layout_small_photo_01.css" rel="stylesheet" type="text/css">
<link href="site_layout_small_photo_02.css" rel="stylesheet" type="text/css">
<link href="site_layout_small_photo_03.css" rel="stylesheet" type="text/css">
<link href="site_layout_small_photo_04.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style4 {color: #666666}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="text_area" onLoad="MM_preloadImages('images/0_philosophy_dn.jpg','images/0_services_dn.jpg','images/0_people_dn.jpg','images/0_contact_us_dn.jpg','images/0_built_progress_dn.jpg','images/0_theoretical_dn.jpg','images/0_lectures_outreach_dn.jpg','images/0_publications_awards_dn.jpg','images/0_address_email_dn.jpg')">
<pre>&nbsp;</pre><div id="site_layout">
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" rowspan="31"><img src="images/ttlbar_topleft.jpg" width="99" height="780"></td>
<td colspan="3" rowspan="2"><img src="images/ttlbar_topcntr.jpg" width="180" height="78"></td>
<td rowspan="33"><img src="images/green_line.jpg" width="27" height="1200"></td>
<td colspan="6"><img src="images/white_strip_top.gif" width="894" height="40"></td>
<td><img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>

10:50 pm on Dec 1, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



here is what i see off the bat...

you say:

1) they are not aligned to the top of the page, despite using a DivTag with zero padding and margins

but you have a space right before your div: <pre>&nbsp;</pre>

could that be it? or check your style for "site_layout" and make sure there isnt padding or margin set on that.

2) they look wonky in Mozilla, but fine in IE and Safari.

that is the beauty of cross browser development. some things render just like you want them to, and some dont. i was in the same predicament about a year ago, and someone said to me "develop for FireFox first, and IE next."

i did, and things became easier. you will have to test and re-test what positions right and what does not. but im sure you will be able to find everything here.

welcome.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month