Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation CSS Background Interfering with Rollover Button

    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.

    Code:
    <!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.
    Last edited by LRRoberts0122; 07-01-2011 at 08:40 PM.

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Solved

    Thank you for looking. I was able to solve it by editing two different paddings.
    Here is my "After" code. (The code that works.)

    Code:
    <!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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •