CSS - Blonde Newbie - Small Css Problem Would Luv An Answer

Hi,
I'm new to using forums, and need a little help trying to fix an IE6 problem.
My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6.

Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div.

The widths and padding for all of the 5 divs equals 956px's
But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div.
As you can see i have tried using line height:0; and that did not help.

Here is my code...........Any idea's

HTML:

<div id="lower-links">
<div id="lower1"></div>
<div id="lower2"></div>
<div id="lower3"></div>
<div id="lower4"></div>
<div id="lower5"></div>
</div>

CSS:
#links {
margin:0;
padding:0;
background-color: #FFFFFF;
width: 956px;
height:374px;
float: right;
line-height:0;
}

#lower1,#lower3 {
background-color: #FFFFFF;
width: 161px;
height:308px;
float: left;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}
#lower2,#lower4 {
background-color: #FFFFFF;
width: 162px;
height:308px;
float:left;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}
#lower5 {
background-color: #FFFFFF;
width: 160px;
height:308px;
float: right;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}

Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out?

www.etwcweb.com/ETWC.html

Here is the CSS code also:

Code:

/* Main Part */

body {
     font-family: Arial, Helvetica, sans-serif;
     background: #333333 url(Images/mainbacknew.png) repeat-y;
     font-size: 14px;
     margin: 0px;
}

h1 {
   font-size: 115%
   font-weight: bold;
   color: #000000;
}

p, ol, ul {
   line-height: 145%
}

a {
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
	color: #CCCCCC;
	font-weight: bold;
	text-decoration: none;
}


ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}

ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}

img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}

hr {
display:none;
}


/* Floating part of Page */

#main_content {
	      width: 800px;
	      margin: 0pt auto;
	      background: url(Images/bg_content.jpg) repeat;
}

#main_content a {
	      color: #000000;
	      text-decoration: underline;
}

#main_content a:hover {
	      color: #666666;
}


/* The Top Picture */

#top_area {
	  background: url(Images/CSSHeader.png);
	  height: 433px;
	  width: 100%;
}

#top_area li {
	  display: block;
}

#top_area a {
	  color: #FFFFFF;
	  display: block;
	  float: left;
	  padding: 40px 20px 0pt;
	  text-decoration: none;
}


/* Search Form */

.search {
	float: right;
	padding-right: 20px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.search h1 {
	color: #FFFFFF;
	font-size: 150%;
}

/* Top Links */

#main_links {
	   /* background-color: #000000;
	    opacity: 0.7; */
	    width: 800px;
	    margin: 0pt auto;
}

#main_links ul {
	    list-style-image: none;
	    list-style-position: outside;
	    list-style-type: none;
	    margin-left: 0pt;
	    padding-left: 0pt;
}


/* Right Side of Floating Page */

#stories {
	 background: transparent url(Images/bg_content.jpg) repeat;
	 width: 535px;
       	 padding: 30px;
       	 float: right;
	 margin: 0pt auto;
}

#stories h2 {
	 padding-left: 20px;
	 padding-top: 15px;
}

/* Left Side */

#left_bar {
	  background: transparent url(Images/bg_content.jpg) repeat;
	  float: left;
	  width: 205px;
	  margin: 0pt auto;
}

.left {
      padding-right: 10px;
      padding-top: 0px;
}

.left_list {
	   padding: 20px;
}

.left_list ul li {
	   border-top: 1px solid #CCCCCC;
	   padding: 10px 15px;
}

#left_bar h1 {
	  background: url(Images/LeftHeaders.png) repeat-x;
	  padding-left: 20px;
	  padding-top: 5px;
	  color: #FFFFFF;
}

/* Message */
#top_footer {
	    width: 800px;
	    margin: 0pt auto;
	    background-color: #666666;
	    color: #FFFFFF;
	    font-size: 90%;
	    font-weight: bold;
	    padding-top: 4px;
	    padding-bottom: 4px;
	    text-align: center;
	    line-height: 150%;
}

/* Bottom Links */
#links {
       width: 800px;
       margin: 0pt auto;
       text-align: center;
       background: #000000;
       color: #FFFFFF;
       font-size: 90%;
       line-height: 160%;
       padding-top: 8px;
       padding-bottom: 3px;
}

#links a, #links a:hover {
       text-decoration: none;
       font-weight: bold;
}

#links .contact {
}

#links .contact a, #links .contact a:hover {
	       text-decoration: underline;
	       color: #0000CC;
}

Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three

Hi everyone,

I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet.

I would post a link but can't because i'm too new.

I'm new to this, so be kind on my coding

The code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
	<style type="text/css" media="screen">
body		
		{
			margin: 0;
			padding: 0;
			text-align: center;
		}
		
div#container		
		{
	
	width: 100%;
	
	background-color: #EAFBFF;
	width:760px;
	height:220px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0066FF;
	border-right-color: #0066FF;
	border-bottom-color: #0066FF;
	border-left-color: #0066FF;
		}
div#container2		
		{
	width: 760px;
	background-color: #ddd;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 15px;
	padding-bottom: 15px;
		}
div#container3		
		{
	width: 760px;
	background-color: #666666;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 13px;
	padding-bottom: 10px;	
		}
#container {
}
    #Layer1 {
	position:absolute;
	width:760px;
	height:115px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container2 {
}
    #Layer2 {
	position:relative;
	width:760px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container4 {
	font-family: Arial, Helvetica, sans-serif;
	width: 500px;
	font-size: 14px;
	font-style: normal;
	color: #DDDDDD;
	text-decoration: none;
	text-align: left;
	margin-right: 110px;
	margin-left: 125px;
	background-color: #999999;
	border: thin solid #999999;
	padding-left: 15px;
}


    #Layer3 {
	position:relative;
	width:200px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
    .style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
    .style2 {
	font-family: Arial, Helvetica, sans-serif; 
	color: #FFFFFF;
}


    #navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #666666;
	margin: 0px;
	padding: 0px;
	height: 20px;
}
    #navbar ul {
	padding: 0;
  	margin: 0;
  	list-style: none;

}
    #navbar li {
	float: left;
	text-align: center;
	background-color: #666666;
  	position: relative;
  	width: 130px;
}
	#navbar li ul{
	position: absolute;
	display: none;
	text-align: center;
	line-height: 25px;
	padding-top: 7px;
}
	#navbar li > ul {
	top: auto;
	left: auto;
}
	#navbar li:hover ul { 
	display:block;
	text-align: center;
	text-indent: 0;
}
	#content {
	clear: left;
}

    
    #mainphoto {
	padding: 0px;
	float: right;
	border: 1px solid #0066FF;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}
    
    #container6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	padding-right: 30px;
	padding-left: 30px;
}
    .style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
    .style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
    a {
	font-size: 12px;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #CC6600;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}
    </style> 
</head>
<body>
<div id="container">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
    <param name="movie" value="(URL address blocked: See forum rules)">
    <param name="quality" value="high">
    <embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
  </object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
  <li><a href="(URL address blocked: See forum rules)">Home</a></li>
  
   <li>About the Office
    <ul>
      <li><a href="">Meet Dr. Toolson
        </a></li>
      <li><a href="">Meet the Team</a></li>
      <li><a href="">Office Tour</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
  
  <li>About Orthodontics
    <ul>
      <li><a href="">Adults</a></li>
      <li><a href="">Children</a></li>
		</ul>
	</li>

  <li>Life with Braces</li>

  <li>Contact Us
    <ul>
	  <li><a href="">Contact Information</a></li>
      <li><a href="">Request Appointment</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>
<div id="container2">
  <div id="container4">
    <p class="style3">Contact Information Form</p>
	
    <form action="(URL address blocked: See forum rules)" method="post" class="style4">
      <span class="style1">
      <label>Name
        <br>
        <input type="text" name="Name">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Email
        <br>
        <input type="text" name="Email Address">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Phone Number
        <br>
        <input type="text" name="Phone Number">
      </label>
      </span>
   
        <span class="style5">
		<br>
		<br>
        <label><span class="style4">Description (if neccessary)</span> </label>
      </span>
        <span class="style4">
		
        </span>
	
      <label><br>
        <textarea name="Description" rows="5"></textarea>
      </label>
  
    
      <label>
	  <br><br>
      <input name="Submit" type="submit" class="style1" value="Submit">
      </label>
      <label>
      <input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
      </label>
      <input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
	  
	  <input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">  
    
	</form>
  </div>
</div>
  
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p>&nbsp;</p>

</body>
</html>

Hi,

I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out.

http://donimusic.com/test/

In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF).

Thank you kindly for your help.

Stacey

im making a panel with rounded corners

just 4 divs , topLeft, topRight etc...

i have them inside 1 container div that is 80% width,
the 4 corner div's are all 50% width and 50% height

it's all floated left and theres a <BR> between the top en bottom section

but it works only in firefox...in IE they just line up below eachother unless i make the width of them 49%....so wheres the 1 ****ing % ?