html/css background issue

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
Hi again guys! It has been awhile since I have had an issue with html/css because it is pretty straight forward but I am having trouble figuring this problem out:

I am designing a profile page for members who join my website and I got it to look just how I want it with one major problem. I want to set the background of the wrapper div so that it is white and will be visible when it is laid against the checkerboard background of my site but the wrapping div is not stretching to fit everything that is inside of it in the code! It works fine in IE 6, IE 7 but every other browser that I test in (firefox, safari, IE 8) it just has a small strip of white at the top (from the padding I am assuming).

Here is a picture:
HtmlCssDesignProblem.png


Here is the Code (don't mind the blank lines I have that there so I can easily insert new code with php):
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" />
<link rel="stylesheet" type="text/css" href="../../styles.css" />
<style type="text/css">
#MainInfoWrapper{
    background: #FFF; 
    position: relative;
    width: 964px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 15px;
}
#UserPictureWrapper{
    position: relative;
    float: left;
    height: 150px;
    width: 150px;
    margin-right: 15px;
}
#UserInfo{
    position: relative;
    float: left;
    padding: 15px;
    width: 379px;
    height: 120px;
}
#Filler {
    position: relative;
    height: 120px;
    padding: 15px;
    width: 358px;
    float: right;
    border: 1px #ccc solid;
}
#ExtraInfo {
    position: relative;
    float: left;
}
.InfoDivs {
    position: relative;
    width: 939px;
    margin: 15px;
    font-style: italic;
    font-size: small;
}
.Contents{
    border: 1px #CCC solid;
    position: relative;
    width: 924px;
    min-height: 15px;
    padding: 5px;
    font-style: normal;
    font-size: medium;
}
.UserName {
    color: #354E6D;
    font-size: x-large;
    font-weight: bold;
}
.Statistics {
    font-style: italic;
}
</style>
<title>Username's Profile</title>
</head>

<body>
<div id="MainInfoWrapper">
    <div id="UserPictureWrapper">
        <img src="../images/default.jpg" />
    </div>
    <div id="UserInfo">
        <p class="UserName">
            Username
            <em style="font-size: medium;">(500)</em>
        </p>
        <p class="Statistics">
            Male,
            100 years old,
            Member
        </p>
    </div>
    <div id="Filler">
    
    </div>
    <div id="ExtraInfo">
        <hr style="color: #354E6D;" />
        <div id="Favorites" class="InfoDivs">
            My Favorites
            <div id="FavoritesContents" class="Contents">
                Favorite Opening as White:
                
                Favorite Opening as Black:
                
                Favorite Piece:
                
            </div>
        </div>
        <div id="AboutMe" class="InfoDivs">
            About Me
            <div id="AboutMeContents" class="Contents">
            
            </div>
        </div>
        <div id="ChessCareer" class="InfoDivs">
            Chess Career
            <div id="ChessCareerContents" class="Contents">
            
            </div>
        </div>
        <div id="BestGame" class="InfoDivs">
            My Best Game
            <div id="BestGameContents" class="Contents">
            
            </div>
        </div>
        <div id="HomePage" class="InfoDivs">
            Homepage
            <div id="HomepageContents" class="Contents">
            
            </div>
        </div>
        <center>
        <em>
            <a href="../reportprofile.php">Report This Profile</a>
            <a href="../editprofile.php">Edit Your Profile</a>
        </em>
        </center>
    </div>
</div>
</body>
</html>
 

ichwar

Community Advocate
Community Support
Messages
1,454
Reaction score
7
Points
0
Can you let me see a screenshot of it in IE?
 

ichwar

Community Advocate
Community Support
Messages
1,454
Reaction score
7
Points
0
try adding height: 100%; to your main wrapper.
 

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
try adding height: 100%; to your main wrapper.

i tried that it didnt help, on all my other pages i can just leave the height attribute blank and it will automatically stretch to fit everything that is supposed to be inside of it...
 
Last edited:

ichwar

Community Advocate
Community Support
Messages
1,454
Reaction score
7
Points
0
Do you mind linking to your sight so I can see it full?
 

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
unfortunately i am just running it through a localhost server, i think i figured it out though, i added overflow: hidden; to the wrapper and now it seems to be working
 
Top