homepage Welcome to WebmasterWorld Guest from 54.237.95.6
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
Forum Library, Charter, Moderator: open

WYSIWYG and Text Code Editors Forum

    
Dreamweaver CS3 page not aligning to top of page
aholde1




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

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>

 

tonynoriega




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved