CSS Forum

**pealo86** · 06:02 PM

I am having trouble centering a div vertically, as seen here (I've set #wrapper to have a red background and .section1 to be blue to outline the two):

I am having different problems in FF and Safari. Shockingly, it works fine in IE.

Firefox: When the paragraph fades out and the new one fades in, the whole thing (.section1) seems to shift down. There appears to be no margins set in Firebug so I cannot understand why this is happening.

Safari: There is a horizontal scroll bar, with room to scroll to the right. I assume this is due to the width, position and margins of #wrapper, however I read a tutorial saying how to vertically centre absolutely positioned elements and supposedly it's cross browser compatible?

Here is my code:
HTML:

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" />
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="scripts/pngFix.js"></script>
    <script type="text/javascript" src="scripts/splash.js"></script>
    <link rel="stylesheet" href="css/thehelpagency-intro.css" type="text/css" />
    <title>That Day Has Arrived | ******</title>
</head>
<body onload="buttontest();">
    <div id="wrapper">
        <div id="section1">
            <div id="splashcontainer">
                <div id="splash1"><div class="anibox"><img src="templateimages/intro1.png" alt="The" /></div></div>
                <div id="splash2"><img src="templateimages/intro2.png" alt="Help" /></div>                
                <div id="splash3"><div class="anibox"><img src="templateimages/intro3.png" alt="Agency" /></div></div>
                <div class="clearer"></div>
            </div>    
            <div id="intro-text">
                <p>Did you ever think you would see the day when an advertising and marketing company was created that was open, honest, generous and had a conviction to help orgnisations that helped others?</p>
                <p>And shared its success with those organisations?</p>
            </div>
            <div id="final-text">
                <p class="day-arrived">That day has arrived.</p>
                <p><a href="home.aspx"><img id="help-button" src="templateimages/btn-help.gif" alt="That Day Has Arrived" /></a></p>
            </div>            
        </div>
    </div>
</body>
</html>

CSS:

Code:

/* general styles */

* {
    margin: 0;
    padding: 0;
    outline: none;
}

html, body {
    height: 100%;
}

body {
    font-family: arial, sans-serif;
    color: #222;
    font-size: 16px;
}

p {
    margin: .25em 0 .5em;
    line-height: 1.5em;
    color: #333;
}

.clear {
    clear: both;
}

.day-arrived {
    margin-top: 50px;
    text-align: center;
}

.highlight {
    color: #a2224e;
}

.nolink {
    text-decoration: none;
    color: #333;
}

.clearer {    
    clear:both;
}


/* div id */

#wrapper {
    width: 920px;
    margin: -150px 0 0 -250px;
    background:red;
    position:absolute;
    top:50%;
    left:50%;
    height:300px;
    width:500px
    overflow: auto;
}

#section1 {
    margin:0;
    width: 385px;
    font-family: 'gill sans', arial, sans-serif;
    color: #969696;
    background:blue;
}

#final-text {
    min-height:100px;
}

#help-button {
    display: block;
    margin: 0 auto;    
    border:none 0px #FFFFFF;
}

#splashcontainer {
    width:394px;
}

#splash1 {
    width:100px;
    height:71px;
    float:left;
}

#splash2 {
    width:108px;
    height:71px;
    float:left;
}

#splash3 {
    width:186px;
    height:71px;
    float:left;
}

.anibox {
}

#final-text {
    display:none;
}

Any help is much appreciated

**LadynRed** · 03-04-2010, 02:18 PM

http://www.webmaster-talk.com/css-fo...r-website.html

**pealo86** · 03-04-2010, 06:02 PM

Thanks