CSS Forum

**jim.thornton** · 09-29-2008, 02:30 PM

http://www.mysamplesite.info/doctor

When viewing the above link in IE there is a blank space showing up under the green box but above the line that goes across. I cannot figure out how to get rid of this line. This appears correctly in FF.. Any suggestions?

When viewing the above link in FF the grey background behind the two lower boxes will not expand down to take up the whole space. It correctly renders in IE (well IE6, I haven't test IE7 yet) so you can see what I mean. I have tried clearing my floats but it isn't working... Suggestions appreciated here too.

HTML:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xml:lang="en" lang="en" xml?ns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
   <title></title>
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 <meta name="robots" content="noindex,nofollow" />
   <link rel="stylesheet" type="text/css" href="template_css.css"></link>
 </head>
 <body>
 	  <div id="container">
 	  	   <div id="header">
 		   		<div id="header-left">
 					 <img src="images/logo.gif" width="244" height="91" alt="Company Logo" />
 					 <ul id="mainlevel-navmenu">
 						     <li><a href="#">Contacts</a></li>
 							 <li><a href="#">Help</a></li>
 							 <li><a href="#">Home</a></li>
 						     <li><a href="#">Contacts</a></li>
 							 <li><a href="#">Help</a></li>
 							 <li class="last"><a href="#">Home</a></li>
 					 </ul>
 				</div>  <!-- #header-left -->
 				
 				<div id="header-right">
 					 <img src="images/doctor.jpg" class="doctor" alt="doctor" width="238" height="306" /> <!-- .doctor -->
 					 <div class="moduletable-mainmenu">
 					 	  <ul id="mainlevel-mainmenu">
 						     <li><a href="#">Contacts</a></li>
 							 <li><a href="#">Help</a></li>
 							 <li><a href="#">Home</a></li>
 						  </ul>
 					 </div> <!-- .moduletable-mainmenu" -->
 				</div>  <!-- #header-right -->
 		   </div>  <!-- #header -->
 		   
 		   <div id="mainbody">
 		   		<div id="content">
 				</div>  <!-- #content -->
 				
 				 <div id="left-menu">
 				 </div>  <!-- #left-menu -->
 				 
 				 <div class="clrboth"></div>
 			</div>  <!-- #mainbody -->
 			
 			<div id="bottom-container">
 				 <div id="bottom-modules">
 				 	  <div class="moduletable-bottomleft">
 				 	  </div>  <!-- .moduletable-bottomleft -->
 
 				 	  <div class="moduletable-bottomright">
 				 	  </div>  <!-- .moduletable-bottomright -->
 				 </div>  <!-- #bottom-modules -->
 			</div>  <!-- #bottom-container -->
 			
 			<div id="footer">
 			</div>  <!-- #footer -->
 	  </div>  <!-- #container -->
 </body>
 </html>

CSS:

Code:

/* CSS Document */
/************************************
  #d6d6d6 - Container Border (Grey)
  #ebebeb - Body background (light grey)
  #e5e7e6 - Bottom modules bg (grey)
  #83a7c9 - Blue Text
*************************************/
  
* {
   margin: 0;
   padding: 0;
}

/*******************************************************/
/****  TYPOGRAPHY  ****/
/*******************************************************/
h1, h2, h3, h4, h5, h6, p { margin-bottom: 1em; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }

body { 
   font-family: sans-serif, helvetica, verdana, arial; 
}

/*******************************************************/
/****  PAGE LAYOUT  ****/
/*******************************************************/

body { 
   background: #ebebeb;
   padding: 20px 0;
   font-size: 88%;
}

#container {
   position: relative;
   width: 780px;
   margin: 0 auto;
   background: white;
   border: 2px solid #d6d6d6;
}

#header {
   width: 774px;
   height: 280px;
   padding: 3px 0 3px 0;
   margin: 0 auto;
   border-bottom: 2px solid #d6d6d6;
}

#header-left {
   position; relative;
   float: left;
   width: 250px;
   height: 280px;
}

#header-left img {
   margin: 0 auto;
 }
 
ul#mainlevel-navmenu {
   position: relative;
   top: -20px;
   width: 80%;
   margin: 0 auto;
   list-style: none inside none;
 }
 
ul#mainlevel-navmenu li {
   border-bottom: 1px dashed #d6d6d6; 
 }

ul#mainlevel-navmenu li.last {
   border: none;
 } 

ul#mainlevel-navmenu li a {
   display: block;
   width: 100%;
   padding: 8px 0;
   text-decoration: none;
   font-size: 1.1em;
   font-weight: bold;
   
 }
 
#header-right {
   position: relative;
   background: #81992b;
   float: right;
   width: 518px;
   height: 280px;
}

#header-right img.doctor {
   position: absolute;
   bottom: 0;
   left: 0;
}

.moduletable-mainmenu {
   width: 100%;
   height: 50px;
   background: white;
 }

ul#mainlevel-mainmenu {
   list-style: none inside none;
   width: 320px;
   float: right;
}

ul#mainlevel-mainmenu li {
   float: right;
   height: 50px;
   width: 30%;
 }

ul#mainlevel-mainmenu li a {
   display: block;
   width: 100%;
   height: 20px;
   padding: 15px 0;
   text-align: center;
   text-decoration: none;
   color: #83a7c9;
}

ul#mainlevel-mainmenu li a:hover {
   text-decoration: underline;
}

#mainbody {
   width: 774px;
   margin: 3px auto 0 auto;
   background: orange;
}

#left-menu {
   width: 250px;
   background: purple;
   height: 150px;
   float: left;
   height: 150px;
}

#content {
   width: 518px;
   float: right;
   height: 200px;
   background: yellow;
}

#bottom-container {
   background: #e5e7e6;
   width: 100%;
   padding: 10px 0;
   clear: both;
 }
 
#bottom-modules {
   width: 760px;
   margin: 0 auto;
}

.moduletable-bottomleft {
   width: 300px;
   height: 165px;
   float: left;
   background: blue;
}

.moduletable-bottomright {
   width: 450px;
   height: 165px;
   float: right;
   background: blue;
}
  
#footer {
   width: 100%;
   height: 40px;
   clear: both;
}

/*********************************************/
   CLASSES
/*********************************************/
.clrboth { 
   clear: both;
   width: 100%;
}

**LadynRed** · 09-29-2008, 04:39 PM

For your second problem, make sure you CLEAR your floats.

**jim.thornton** · 09-29-2008, 04:45 PM

I tried... I've included the revised HTML below showing the changes. If you go to the link again in FF, you will see that the problem is still there.

I had done this before and it still didn't work. But, so you can see what I did, I've put it back.

Code:

<div id="bottom-container">
				 <div id="bottom-modules">
				 	  <div class="moduletable-bottomleft">
				 	  </div>  <!-- .moduletable-bottomleft -->

				 	  <div class="moduletable-bottomright">
				 	  </div>  <!-- .moduletable-bottomright -->

				 </div>  <!-- #bottom-modules -->
				 
				 <div class="clrboth"></div>
			</div>  <!-- #bottom-container -->

**LadynRed** · 09-30-2008, 03:33 PM

Your clear for the #bottom-container is in the wrong place. Move it as shown here:

Quote:

**jim.thornton** · 09-30-2008, 11:55 PM

Thank you for your help...

Both problems were caused because I didn't have /* infront of my CLASSES notes in the CSS file.

LadynRed: I notice that you always use br for your clearing of the floats. If I do this instead of the DIV, will it add a line break, or do I have to set the height to 1px or something?

**wayfarer07** · 10-01-2008, 09:00 AM

There is nothing wrong with using <div>, and it won't have a height unless you have set it, however, <br> is a little faster, self closing, and more semantically meaningful. Those things aside, you could use just about anything. I often use elements that are already in the natural flow of the page, so I don't need to add anything extra.

**LadynRed** · 10-01-2008, 03:14 PM

I used to use a div for clearing, but it adds an unnecessary block to the document. I specify my clearing <br /> like this:

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

It takes up no space that way.