CSS - Left Float Has Extra Space On Top In Ie

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

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

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hi, I have this page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB