View Full Version : Mac vs. PC: Website Layouts

07-01-2011, 10: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:

07-01-2011, 10: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

07-01-2011, 10: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.

07-01-2011, 10: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)

07-01-2011, 10: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">
<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;
<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];}

<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>

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