CODEWITHSUNDEEP
htmlcss
Naterade
Naterade

Reputation: 2675

Absolute positioned div is different in Chrome and IE as opposed to Firefox

So I am developing my site in Firefox, but I checked it in Chrome and IE and the divs- s1, s2, s3, s4 shift up about 25 to 50 px in the other browsers. I think it has to do with the absolute positioning and changing their parent div to relative but I can't get it to work.

CSS:

root { 
display: block;
}

body, html {
width:100%;
height:100%;
overflow: hidden;
margin: 0;
padding: 0;
background: #6899D3; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebfaff', endColorstr='#fff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebfaff),  to(#fff)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ebfaff,  #fff); /* for firefox 3.6+ */ 
}

#main-lead {
width: 500px;
height: 200px;
position: absolute;
top: 150px;
left: 150px;
}

#main-lead-header {
font-family: arial, tahoma, veranda;
font-size: 30px;
color: # 4a4a4a;
}

#main-lead-header-summary {
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #153E7E;
}

#navcontainer {
position: absolute;
bottom: 0px;
width: 100%;
height: 300px;
margin: 0;
padding: 0;
clear: both;
}

#summary-lead {
margin: auto;
border-spacing: 30px;
}

#summary-lead td {
width: 225px;
height: 50px;
padding-right: 10px;
text-align: center;
font-family: arial, tahoma, veranda;
font-size: 25px;
color: #036;
}

#summary {
position: absolute;
border-spacing: 30px;
}

#s1 {
position: absolute;
left: 125px;
bottom: 75px;
width: 200px;
max-height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E;
}

#s2 {
position: absolute;
left: 415px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}

#s3 {
position: absolute;
left: 700px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}

#s4 {
position: absolute;
left: 935px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}

#social {
position: absolute;
right: 25px;
top: 10px;
margin-right: 25px;
margin-top: 25px;
}

#login-wrapper {
right: 10px;
top: 75px;
font-family: arial, tahoma, veranda;
color: #24293f;
padding: 10px;
}

#login-wrapper label{
float: left;
width: 100px;
margin-top: 1px;
font-weight: bold;
}

#signup {
position: absolute;
right: 100px;
top: 200px;
width: 400px;
height: 250px;
background: #fff;
border: 1px dotted #000;
padding: 25px;
}

#signup label {
float: left;
width: 120px;
margin-right: 5px;
margin-top: 3px;
padding-top: 0.3em;
text-align: right;
font-weight: bold;
font-size: 15px;
font-family: arial;
color: #036;
}

.signup-input {
margin-bottom: 5px;
margin-left: 20px;  
border: 1px solid #000;
background: #fff;
padding-left: 10px; 
width: 190px;
height: 30px;
font-family: tahoma;
}

#signup-button {
float: right;
margin-right: 52px;
width: 75px;
background-color: #036;
border: 1px solid #000;
color: #ffffff;
font-size: 15px;
font-family: arial, tahoma, veranda;
padding: 5px;
}

#year {
margin-bottom: 5px; 
border: 1px solid #000;
background: #fff;
padding-left: 1px; 
width: 57px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}

#month {
margin-bottom: 5px; 
margin-left: 20px;
border: 1px solid #000;
background: #fff;
padding-left: 1px; 
width: 94px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}

#day {
margin-bottom: 5px; 
border: 1px solid #000;
background: #fff;
padding-left: 1px; 
width: 43px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}

#signup-lead {
position: absolute;
right: 150px;
top: 135px;
width: 400px;
font-family: serif, tahoma, arial;
font-size: 50px;
color: #ed1b23;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel='stylesheet' type='text/css' href='./css/index3.css' />
</head>
<body>


            <span id="signup-lead"><i>Sign up!</i></span>
            <div id="signup">
                    <form id="signup-form" action="">
                    <label>First Name:</label>
                        <input type="text" class="signup- input" id ="firstname" name="firstname" /><br />
                    <label>Last Name:</label>
                        <input type="text" class="signup-input" id="lastname" name="lastname" /><br />
                    <label>Birthday:</label>
                        <select id="month" name="month">
                            <option  value="1">January</option>
                            <option value="2">February</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                        <select id="day" name="day">
                            <?php for ($i=1; $i<=31;  $i++) { echo "<option value='$i'>$i</option>"; } ?>
                        </select>
                        <select id="year" name="year">
                            <?php for ($i=2012; $i>=1900; $i=$i-1) { echo "<option value='$i'>$i</option>"; } ?>
                        </select><br />
                    <label>Email:</label>
                        <input type="text" class="signup-input" id="signup-email" name="signup-email" /><br />
                    <label>Password:</label>
                        <input type="password" class="signup-input" id="signup-password" name="signup-password" /><br />
                    <label>Verify Password:</label>
                        <input type="password" class="signup-input" id="signup-password-v" name="signup-password-v" /><br />
                        <input type="button" id="signup-button" name="signup-button" value="Join!" />
                </form>
            </div>


    <div id="social">
        <img src="./images/twitter.png" alt="twitter" />
        <img src="./images/facebook.png" alt="facebook" />
        <img src="./images/flickr.png" alt="flickr" />
        <img src="./images/youtube.png" alt="youtube" />

    </div>
    <div id="main-lead">
        <span id="main-lead-header">The Most Crockin Site on the <b>Web! </b></span><br /><br />
        <span id="main-lead-header-summary">Crockshark.com is striving to  be the go to spot on the
        net for all your crock pot recipe needs. Join, submit, save, and  track-you can do it all here.</span>
    </div>
    <div id="navcontainer">
        <table id="summary-lead">
            <tr>
                <td>Find Great Recipes.</td>
                <td>Post Your Own.</td>
                <td>Save Some.</td>
                <td>Is Yours Popular?</td>
            </tr>
        </table>
        <table id="summary">
            <tr>
                <td id="s1">
                    <p>At Crockshark.com you can find tons of  great user submitted crock pot recipes.
                    From casual to gourmet, all recipes will prove to be crowd pleasing, time saving, and delicious.
                    Looking for a great crock pot meal?  You can find one here!</p>
                </td>
                <td id="s2">
                    <p>Whenever you want to share your  crockin' culinary skills with the world, just
                    submit a recipe.  It's easy! Just add the recipe name, ingredients, directions,
                    and chef extras to our easy to fill out form. It's time to show the world how you crock!</p>
                </td>
                <td id="s3">
                    <p>Scroll through our wide array of recipes and save them to your account with the click
                    of a button. You can sort by the newest recipes, by ingredient, and even by cuisine.
                    Preview the recipe before you save it or remove it just as easily!</p>
                </td>
                <td id="s4">
                    <p>With our recipe tracking engine, you can see how popular your recipes are by the number of times they are saved by other users.
                    Start using Crockshark.com today. It's free, easy to use, and signing up takes just 
                    few moments. Enjoy!</p>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

The variances can be seen by going to http://crockshark.com/index3.php in diff. browsers. Any ideas, I can't figure this one out. Thanks!

EDIT *

So I figured it out. I moved the 2 separate tables into there own divs and out of the "navcontainer". Aligned them both with absolute positions at the appropriate heights for a stacking look. The real kicker is that both the newly created divs were too big and overlapping causing them to align different in opposing browsers. I tightened them up so there was no overlapping and now they are almost identical in all browsers.

Upvotes: 0

Views: 7170

Answers (1)

David Gallagher
David Gallagher

Reputation: 733

It's because the position of #navcontainer is relative to the bottom of the screen. If you want #navcontainer to stay in the a consistent position you will need to set something like top: 200px; (change 200px until it looks right) instead of bottom: 0px;.

Upvotes: 3

Related Questions