html/css background issue

**garrensilverwing** · 09-21-2009 12:08 PM

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

it just has a small strip of white at the top (from the padding I am assuming).

Here is a picture:

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** · 09-21-2009 12:41 PM

Can you let me see a screenshot of it in IE?

**garrensilverwing** · 09-21-2009 12:51 PM

This is it in IE7 and 6 (they look the same pretty much)

**ichwar** · 09-21-2009 12:59 PM

try adding height: 100%; to your main wrapper.

**garrensilverwing** · 09-21-2009 01:01 PM

Originally Posted by ichwar

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...

**ichwar** · 09-21-2009 01:15 PM

Do you mind linking to your sight so I can see it full?

**garrensilverwing** · 09-21-2009 01:20 PM

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

**ichwar** · 09-21-2009 01:26 PM

Ok, sounds good.

**garrensilverwing** · 09-21-2009 01:31 PM

ok thanks for trying to help anyway :D

**kbjradmin** · 09-22-2009 02:04 AM

i don't see that you've cleared your floats...

Thread: html/css background issue

LinkBack

Thread Tools

Display

html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Re: html/css background issue

Similar Threads

HTML/CSS issue

integration issue between support, cpanel, forum ????

Background Checks Safety First - Free and Paid Background check

can anyone convert a CSS into an IPB skin for me?

html/css help

Posting Permissions