PDA

View Full Version : my text is popping out of the #right_content div in IE6, and is not centered in FF


silverglade
05-19-2009, 12:40 AM
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

@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 to the page .

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

Cary
05-19-2009, 04:27 AM
You have this html...

<a href="http://derekvanderven.com/angels_raw/index.html"><img src="background_images/home_slices/nav.jpg" border="0" usemap="#Map" /a></a>

The image-map should not be within an anchor tag. Instead you should have this:

<img src="background_images/home_slices/nav.jpg" border="0" usemap="#Map" />

Also, try adding inline styling to #right_content:

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

Cary
05-19-2009, 04:37 AM
Looks like the width of #wrapper can be reduced to about 927px.

silverglade
05-19-2009, 03:06 PM
omg Cary you are a genius!!! that fixed every one of my problems. i waited a whole day stuck with these problems. so thank you very much!!!!:mrgreen::mrgreen::mrgreen::mrgreen: