PDA

View Full Version : odd space between divs in Explorer


carrollm5
07-29-2008, 10:16 PM
I'm hoping someone can help me eliminate the odd space between divs in the left sidebar of this page:
http://www.renegadegraphics.biz/renegade_graphics_contact_us.htm

It only shows up in Explorer.

Thanks in advance for your help.

Cary
07-30-2008, 06:34 AM
Try this styling:

#content {
margin: 0;
padding: 0;
float: left; /* so it extends around floated contents */
background-color: #FFF; /* to fill in gap with white */
}

Cary
07-31-2008, 01:28 AM
I saw on the Adobe forum how it was suggested you string lines of code end to end to avoid gaps in your page. This isn't necessary and only makes it harder to read the code. The following code displays fine. The secret is using "display:block" styling on the images with gaps under them.

<!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" />
<title>All Contact Information - Renegade Graphics - Affordable Web Solutions</title>
<style type="text/css">
body {
background-color: #ced5e9;
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
text-align: left;
width: 828px;
margin-top: 36px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin: 0px;
padding: 0px;
}
#header img { /* remove gap below image */
display: block;
}
#content {
margin: 0;
padding: 0;
float: left; /* so it extends around floated contents */
background-color: #FFF; /* to fill in gap with white */
}
#footer {
margin: 0px;
padding: 0px;
clear: both;
background-image: url(images/renegade_graphics_footer.jpg);
height: 45px;
width: 828px;
}
#banner {
height: 174px;
width: 828px;
float: none;
margin: 0px;
padding: 0px;
}
#sidebar_index {
float: left;
height: 458px;
width: 250px;
margin: 0px;
padding: 0px;
}
#sidebar_index img { /* remove gap below image */
display: block;
}
#text_index {
background-image: url(images/renegade_graphics_text_contact.jpg);
float: right;
height: 458px;
width: 578px;
margin: 0px;
padding: 0px;
}
#sidebar_content { /* doesn't need to float */
background-color: #FFFFFF;
width: 250px;
margin: 0px;
padding: 0px;
height: 135px;
}
</style>
<link href="RG_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style6 {font-size: 11px}
</style>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style7 {
font-size: 10px;
font-weight: bold;
}
a:link {
color: #777777;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FF6600;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/renegade_graphics_banner.jpg" alt="renegade_graphics_banner" width="828" height="174" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="13,28,186,148" href="index.htm" alt="renegade_graphics_home_page_link" />
</map>
</div>
<div id="content">
<div id="sidebar_index">
<img src="images/renegade_graphics_sidebar_contact.jpg" alt="renegade_graphics_sidebar" width="250" height="323" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="16,29,168,52" href="index.htm" alt="renegade_graphics_home_page_link" />
<area shape="rect" coords="15,62,167,84" href="renegade_graphics_about_us.htm" alt="about_renegade_graphics_link" />
<area shape="rect" coords="13,95,168,118" href="renegade_graphics_testimonials.htm" alt="renegade_graphics_testimonials_ink" />
</map>
<div id="sidebar_content">
<p align="right" class="body_text" style="margin-top:0;margin-right:40px">Renegade
Graphics<br />
303-833-2264<br />
<a href="mailto:info@renegadegraphics.biz">info@renegadegraphics.biz</a></p>
</div>
</div>
<div class="body_text" id="text_index">
...
...
...