I used to have an object that was perfectly centered with a fading opaque box around it. But now, the text is in the corner and the box has disappeared. Despite everything appearing fine with the CSS positioning, I can't seem to figure out why this is happening. Any help on why my item is no longer centered with a box would be greatly appreciated. You can view an example here (scroll down to the last slide, the contact me page)
You can find the CSS for the box and the text below.
Text CSS:
#slide4 .contact{
color: red;
position: relative;
font-size:70px;
top: 30px;
left: 36%;
}
#slide4 .contact1{
color: rgba(51,51,51,.3);
position: relative;
font-size: 40px;
top: 100px;
left: 8%;
}
#slide4 .contact2{
position: absolute;
font-size: 40px;
top: 140px;
right: 21%;
color: rgba(51,51,51,.3);
}
#slide4 .box{
position:relative;
width: 400px;
height: 200x;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
background: rgba(255,255,255,.9);
top: 100px;
left: 32%;
opacity: 0;
filter:alpha(opacity=0);
}
Box CSS:
<div class="box">
<span class="contact1">This is a test</span>
<span class="contact2">This is a test</span></div>
</div>
To summarize, why is my box no longer centered with properly styled text?