Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Safari Compatiblity Troubles

M

Monique

macrumors newbie
Original poster
Sep 1, 2004
2
0
Hi Friends -- I hope someone can check this out for me and offer their ideas about what might be going on. I've developed this page with Dreamweaver and the Project VII layout extension. The web page works fine on the PC. Mac is a different story. Using Safari, the table shows up in the middle of the page. It is supposed to be within the layer which includes the bottom border and the table.

Any Mac clues or advice is appreciated. Thanks -- Monique.

Here is a link:

http://www.costill.com/KA/momtest/momtest2.htm

Here is the code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
-->
</style>
<link href="../kaa.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7_getWD(tDim){ //v2.5 by PVII
var
sh=0,sw=0,rt=0;if(window.innerWidth){sh=window.innerHeight;sw=window.innerWi
dth;
}else
if(document.body){sh=document.body.clientHeight;sw=document.body.clientWidth
;

if(document.body.offsetHeight==sh&&document.documentElement&&document.docume
ntElement.clientHeight){
sh=document.documentElement.clientHeight;}

if(document.body.offsetWidth==sw&&document.documentElement&&document.documen
tElement.clientWidth) {
sw=document.documentElement.clientWidth;}}rt=(tDim=="width")?sw:sh;return
rt;
}

function P7_getLDims(el) { //v2.5 by PVII
var x,ll=0,tl=0,hh=0,ww=0,wx,g,gg;

if((g=MM_findObj(el))!=null){gg=(document.layers)?g:g.style;ll=parseInt(gg.l
eft);

tt=parseInt(gg.top);if(isNaN(ll)){if(g.currentStyle){ll=parseInt(g.currentSt
yle.left);
}else if(document.defaultView&&document.defaultView.getComputedStyle){

ll=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("le
ft"));
}if(isNaN(ll)){ll=0;}}if(isNaN(tt)){if(g.currentStyle){tt=parseInt(g.curren
tStyle.top);
}else if(document.defaultView&&document.defaultView.getComputedStyle){

tt=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("to
p"));}if(isNaN(ll)){tt=0;}}

if(document.all||document.getElementById){ww=parseInt(g.offsetWidth);hh=pars
eInt(g.offsetHeight);

if(!ww){ww=parseInt(g.style.pixelWidth);if(!ww){ww=parseInt(g.style.width);}
}if(!hh){

hh=parseInt(g.style.pixelHeight);}if(g.hasChildNodes&&g.childNodes){for(x=0;
x<g.childNodes.length;x++){
wx=parseInt(g.childNodes[x].offsetWidth);if(wx>ww){ww=wx;}}}}else
if(document.layers){
ww=parseInt(g.clip.width);hh=parseInt(g.clip.height);}}var
aR=[ll,tt,hh,ww];return aR;
}

function P7_alignRR() { //v2.5 by PVII
var i;if(!document.p7alignRR) {return;}if(document.layers){
if(innerWidth!=document.p7RRiw ||
innerHeight!=document.p7RRih){location.reload();}
}else{document.p7RR=1;for(i=0;i<p7aRR.length;i++){eval(p7aRR);}document.
p7RR=0;}
}

function P7_alignWD2() { //v2.5 by PVII
var
g,gg,lp=0,tp=0,aL,lh,lw,ww,wh,pa='px',args=P7_alignWD2.arguments;if(document
.layers||window.opera){pa='';}
for(var
i=0;i<args.length;i+=4){if((g=MM_findObj(args))!=null){gg=(document.layer
s)?g:g.style;

mm=parseInt(args[i+1]);mr=parseInt(args[i+2]);ml=parseInt(args[i+3]);ww=pars
eInt(P7_getWD('width'));

wh=parseInt(P7_getWD('height'));aL=P7_getLDims(args);lh=aL[2];lw=aL[3];tp
=aL[1];lp=aL[0];

if(mm==1){lp=mr;}if(mm==2){lp=parseInt((ww-lw-mr)/2);if(lp<0){lp=0;}}if(mm==
3){lp=ww-lw-mr;if(lp<ml){lp=ml;}}

if(mm==4){tp=parseInt((wh-lh-mr)/2);if(tp<0){tp=0;}}if(mm==5){tp=parseInt((w
h-lh)/2);lp=parseInt((ww-lw)/2);

if((lp-mr)<=0){lp=mr;}if((tp-ml)<=0){tp=ml;}}if(mm==6){tp=wh-lh-mr;}gg.top=t
p+pa;gg.left=lp+pa;
if(!document.p7alignRR){p7aRR=new
Array();document.p7alignRR=true;document.p7RR=0;

if(document.layers){document.p7RRiw=innerWidth;document.p7RRih=innerHeight;}
onresize=P7_alignRR;}

if(document.p7RR==0){p7aRR[p7aRR.length]="P7_alignWD2('"+args+"',"+mm+","
+mr+","+ml+")";}}}
}
//-->
</script>
</head>

<body onload="P7_alignWD2('Layer1',6,0,0)">
<div id="Layer1" style="position:absolute; width:100%; z-index:1;
visibility: visible; background-image: url(border1.jpg); border: 1px none
#000000; height: 170;" class="bkgrnd">

<table width="100%" height="100%" border="0">
<tr>
<td width="22%" height="65" valign="bottom"> </td>
<td width="62%" valign="bottom"> </td>
<td width="16%" valign="bottom"> </td>
</tr>
<tr>
<td height="39" valign="bottom"><a href="www.costill.com">prev
project</a></td>
<td valign="bottom"><div align="center">
<h2>Healdsburg Senior Apartments</h2>
</div></td>
<td valign="bottom"><div align="right"><a href="www.costill.com">next
project</a></div></td>
</tr>
<tr>
<td valign="bottom"> </td>
<td valign="middle" class="bodycopy"><p>Healdsburg Senior Apartments
offer affordable housing
for seniors. There are four floorplans, plus a clubhouse.</p></td>
<td valign="bottom"> </td>
</tr>
</table>
</div>

<table width="100%" height="75%">
<tr>
<td align="center" valign="top"><img src="hbgs.jpg" width="445"
height="297" vspace="25" border="0" usemap="#Map" /></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="127,220,171,259" href="ptest.htm" />
<area shape="rect" coords="37,154,90,203" href="ptest.htm" />
<area shape="rect" coords="349,194,388,242" href="ptest.htm" />
<area shape="rect" coords="151,65,209,117" href="ptest.htm" />
</map>
</body>
</html>
 
It looks like your webpage in Safari is doing exactly what the HTML code is telling it to do. If it looks different in IE, I don't know why. But at the risk of being too honest, let me mention a few things:

1. Dreamweaver, even if it is the best WYSIWYG editor, still produces awful HTML, especially when style sheets are involved.

2. There's no need for that ugly mess of tables. And what is 10KB of Javascript doing in there? Nothing useful, that's what. A few clean divs and some proper style sheets should produce better results and look the same on every browser.

I'm a professional designer, and while I used to use Dreamweaver and code for IE, now I just code by hand in an app like skEdit or Hyperedit. It's actually easier to make clean, cross-browser XHTML code by hand once you get over the moderate learning curve.
 
I have to agree, as you are already using xhtml, you might as well take the next step and separate style and content. This page could be pretty easily put together with a few divs and a bit of css... You would save yourself a ton of trouble in the long run.
 
Ideas anyone?

The problem I was trying to overcome with all the Javascript is to put the border on the absolute bottom of the page. The only way I could find to do that is to use a layer containing the border and a table with the text. Next, I use a Javascript utility to redefine the screen coordinates. It would be great if there was another way and I would love any suggestions. This seemingly small problem has gotten me. Thanks for your input --

Monique.
 
Monique, here's a reference that might help:
http://www.quirksmode.org/css/100percheight.html

Specifically, if you're doing a layout with divs only (no tables), you need the following style sheets:

html, body {
height: 100%;
}

div#wrapper {
height: 100%;
}
​

where "wrapper" is the name of your full-screen div. Then it's a trivial matter to nest a smaller div inside it, absolute-position it, and attach it to the bottom. Example code (off the top of my head, may need tweaking):

<div id="wrapper">
<div id="bottom-border"></div>
</div>

And then your style sheet would include:

div#wrapper {
height: 100%;
position: relative;
}

div#bottom-border {
position: absolute:
bottom: 0px;
height: 10px;
background-image: url(border-you-want.jpg);
}

All your other content also gets nested in the wrapper div. Your entire web page is going to end up being 3-5 divs and a few style sheets.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back