I challenge you.. I dare you...

G

gatzke

New Member
After hours upon hours of failed attempts, I challenge all of mankind to solve the following:

1. The text must appear in the middle/center of the orange div.
2. The orange box must appear in the middle/center of the outer div.
3. Nothing else should move!
4. Firefox 3.0.5

HTML: 
<style>
.pOne { font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#fff; font-weight:bold; }
#optionsBtns { background-color:#999; margin:10px auto 15px auto; width:500px; height:50px; }
#optionsBtnsOver { background-color:#CCC; margin:10px auto 15px auto; width:500px; height:50px; cursor:pointer; }
#optionsBtnsInside {  background-color:#fc0; margin:5px auto 0 auto; height:30px; width:350px; text-align:center; }
</style>

<a href='http://www.google.com'>
    <div id="optionsBtns" onmouseover=this.id='optionsBtnsOver' onmouseout=this.id='optionsBtns'>
        <div id="optionsBtnsInside">
            <p class="pOne">text n stuff 1</p>
        </div>
    </div>
</a>
<a href='http://www.google.com'>
    <div id="optionsBtns" onmouseover=this.id='optionsBtnsOver' onmouseout=this.id='optionsBtns'>
        <div id="optionsBtnsInside">
            <p class="pOne">text n stuff 2</p>
        </div>
    </div>
</a>
<a href='http://www.google.com'>
    <div id="optionsBtns" onmouseover=this.id='optionsBtnsOver' onmouseout=this.id='optionsBtns'>
        <div id="optionsBtnsInside">
            <p class="pOne">text n stuff 3</p>
        </div>
    </div>
</a>
 
jnjc

jnjc

New Member
This should work in IE and FF

HTH,
JC

Code: 
<html>

<head>
<style>
body  {text-align:center}
.pOne { font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#fff; font-weight:bold; }
#optionsBtns { align:center;background-color:#999; margin:10px auto 15px auto; width:500px; height:50px;display:block; }
#optionsBtnsOver { background-color:#CCC; margin:10px auto 15px auto; width:500px; height:50px; cursor:pointer; }
#optionsBtnsInside {  background-color:#fc0; margin:auto;position:relative;top:10px; height:30px; width:350px; text-align:center;display:block; }
</style>
</head>
<body>


<a href='http://www.google.com'>
    <div id="optionsBtns" onmouseover=this.id='optionsBtnsOver' onmouseout=this.id='optionsBtns'>
        <div id="optionsBtnsInside">
            <p class="pOne">text n stuff 1</p>
        </div>
    </div>
    <div id="optionsBtns" onmouseover=this.id='optionsBtnsOver' onmouseout=this.id='optionsBtns'>
        <div id="optionsBtnsInside">
            <p class="pOne">text n stuff 2</p>
        </div>
    </div>
    <div id="optionsBtns" onmouseover=this.id='optionsBtnsOver' onmouseout=this.id='optionsBtns'>
        <div id="optionsBtnsInside">
            <p class="pOne">text n stuff 3</p>
        </div>
    </div>
</a>

</body>

</html>
 
You must log in or register to reply here.
Top