...

View Full Version : CSS Background Interfering with Rollover Button



LRRoberts0122
07-01-2011, 09:35 PM
I'm trying to do a Guild portal page for TERA Online. I have a centered background image, background color (for what isn't covered by part of the image) and a Rollover Button.

My problem seems to be that the Rollover Button and the Background image share the same body {} tag and the top padding keeps conflicting between the two. If I change the padding to place the background image exactly where I want it, the Rollover Button goes way too far down. But if I center out my Rollover Button, it clips off the top of my background image.

I posted my code below, so maybe someone else knows what's going on. I'm completely stumped. I've tried unsuccessful attempts and DIV tags, I've tried different style layouts, to no avail.

If anyone needs a sample link you can use the following:
http://www.colossal3d.net/omnipotenceparadox/portal.php

Thank you for any help.



<!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: 400px;
background-repeat: no-repeat;
background-position: center;
background-color: #151515;
padding-left: 745px;
padding-top: 700px;
}
</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)"><img src="images/bttn1.png" name="enterButton" width="176" height="62" border="0" id="enterButton" /></a>
</body>
</html>


*Update:
In this particular code, everything is aligned, however there is too much space on top and below the background image.

LRRoberts0122
07-01-2011, 10:17 PM
Thank you for looking. I was able to solve it by editing two different paddings.
Here is my "After" code. (The code that works.)



<!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-left: 745px;
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)"><img src="images/bttn1.png" name="enterButton" width="176" height="62" border="0" id="enterButton" /></a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum