...

View Full Version : Mac vs. PC: Website Layouts



LRRoberts0122
07-01-2011, 09:20 PM
I'm working on a Guild portal website, and I literally just finished the layout for the Portal Page. While it looks good through the browsers on my PC (Windows), the "Enter Site" button seems to be offset to the right on me mac, where I would like it to be centered.

Does anyone know how to fix this?

Temporary link:
http://www.colossal3d.net/omnipotenceparadox/portal.php

Fugix
07-01-2011, 09:25 PM
most likely has to do with the way your browser interprets the padding of your body image...I would tamper with this and confirm

LRRoberts0122
07-01-2011, 09:33 PM
Yes, I think that's exactly what it is. I'm going to try to get rid of the padding and try something else. I'll let you know if it works.

Fugix
07-01-2011, 09:39 PM
what exactly are you trying to accomplish with the padding?
The padding does not effect anything in the body except for most likely your "ENTER SITE" image(s)

LRRoberts0122
07-01-2011, 09:40 PM
You're right it was reading the padding wrong. I took out the padding from the left and instead inserted an HTML <center> tag.

Here's the code that made it work:


<!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>Omnipotence Paradox Guild Portal</title>
<style type="text/css">
body {
background-image: url(images/background.png);
padding: 240px;
background-repeat: no-repeat;
background-position: center;
background-color: #151515;
padding-top: 540px;
}
</style>
<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>
</head>

<body onload="MM_preloadImages('images/bttn2.png')">
<a href="http://www.colossal3d.net/omnipotenceparadox/home.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enterButton','','images/bttn2.png',1)"><center><img src="images/bttn1.png" name="enterButton" width="176" height="62" border="0" id="enterButton" /></center></a>
</body>
</html>

Fugix
07-01-2011, 09:43 PM
excellent, there are normally better ways of doing things like that rather than using huge padding or margin numbers. Good solution



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum