CSS Forum

**silverglade** · 09:04 PM

hi, my text is popping out of the #right_content div in IE6, and is not centered in FF> also, the wrapper wont center completely against the background. any help greatly appreciated. derek.
here is the page im talking about.

http://derekvanderven.com/angels_raw/index.html

here is the css to the page

Code:

@charset "utf-8";
/* CSS Document */

body { 
padding: 0px;
margin: 0px;
background-color: #B4C9CB;
}

#wrapper {
overflow: auto;
    margin: 0 auto 0 auto;
    width: 950px;
    /*height: 699px;*/
}

#header {
    float: left;
    background-image: url(background_images/home_slices/header.jpg);
    background-repeat: no-repeat;    
    width: 927px;
    height: 146px;
    }
     
#nav {
float: left;
 
    width: 108px;
    height: 553px;
}

#right_background {
    float: left;
    background-image: url(background_images/home_slices/right_background.jpg);
    background-repeat: no-repeat;    
    width: 819px;
    height: 553px;
 
}

#right_content {
    float: left;
    width: 375px;
    height: 275px;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 220px;

}
#right_content p {
    padding:20px 0 20px 20px;
    text-align: center;
    }

here is the html for the page

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 href="angels.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<title>Angels of Light home</title>
</head>

<body>

<div id="wrapper"> 

  <div id="header"></div>
        <div id="nav"><a href="http://derekvanderven.com/angels_raw/index.html"><img src=                     "background_images/home_slices/nav.jpg" border="0" usemap="#Map" /a></div>
         
         <map name="Map" id="Map"><area shape="rect" coords="7,16,99,49" href="index.html"         alt="home" />
         <area shape="rect" coords="6,83,94,113" href="about.html" alt="about" />
         <area shape="rect" coords="5,151,97,182" href="images.html" alt="images" />
          <area shape="rect" coords="6,221,99,253" href="links.html" alt="links" />
          <area shape="rect" coords="7,290,97,322" href="contact.html" alt="contact" />
          </map> </div>
         
        
            <div id="right_background">
            <div id="right_content">asdfasdfasdf </div> 
            </div>

</div><!--end wrapper-->
</body>
</html>

**LadynRed** · 05-18-2009, 10:25 PM

The validator (ahem) is complaining about an extra </div> in your code.. fix that first.

**silverglade** · 10:58 PM

thanks i forgot to validate. i got rid of the extra div and its giving me an error
"a should be closed before closing div tag" error but i cant find whats wrong. the text still pops out, and the wrapper wont center on the background totally.
any more help greatly appreciated thanks ladynred.

here is my html without the extra div at the bottom.

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 href="angels.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<title>Angels of Light home</title>
</head>

<body>

<div id="wrapper"> 

  <div id="header"></div>
        <div id="nav"><a href="http://derekvanderven.com/angels_raw/index.html"><img src=        "background_images/home_slices/nav.jpg" border="0" usemap="#Map" /a></a>
        <map name="Map" id="Map"><area shape="rect" coords="7,16,99,49" href="index.html"        alt="home" />
        <area shape="rect" coords="6,83,94,113" href="about.html" alt="about" />
        <area shape="rect" coords="5,151,97,182" href="images.html" alt="images" />
        <area shape="rect" coords="6,221,99,253" href="links.html" alt="links" />
        <area shape="rect" coords="7,290,97,322" href="contact.html" alt="contact" />
        </map> </div>
         
        
            <div id="right_background">
            <div id="right_content"><p>asdfasdfasdf</p> </div>  
            </div>

</div><!--end wrapper-->
</body>
</html>

**silverglade** · 05-19-2009, 11:09 AM

ok i worked with the validator until i got no errors finally. then i added the right content div to my display : inline iefixes file. WHICH I FORGOT TO DO grrrrr. then i reduced the wrapper size to 927px which i also FORGOT to do. now the page is centered, and the text stays in the box. this is annoying , but i keep making stupid small errors that add up. i wonder when i ll stop doing that. i guess when i get sick of making them. thanks. derek

**angele803** · 05-19-2009, 11:28 AM

Quote:

Originally Posted by silverglade

... but i keep making stupid small errors that add up. i wonder when i ll stop doing that...

Probably never! lol! I have been doing this stuff for a while and still make some of the dumbest little mistakes. I think that is part of the job...you have to just be prepared to make small errors and not beat yourself up about it. That's why it's always nice to have a second pair of eyes look over your code. And it also helps to walk away from your project for a little while. You will usually come back and see the little mistake.

Anyway, glad you solved your problem!

**silverglade** · 05-19-2009, 02:39 PM

cool thank you. that makes me feel a little better and not beat myself up, at least i know someone else who has been doing it longer than me has the same problem. youre right about having a second pair of eyes to look at it. if it wasnt for this forum and ladynred's help. id know absolutely nothing at this point. derek