Need help with IE6 CSS problem

HTML & CSS
1

Hi

I am fairly new to CSS layouts and am experiencing a problem with <IE6. (Oh big surprise!!) My CSS validates but displays incorrectly in IE6 or less. Can somebody assist please.

Attached images show misalignment problem.

CSS:





/****************************** Set all elements to zero **********************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}

body {
  font-family: Verdana, Helvetica, Arial, Sans-serif;
  font-size: 100.1% ;
  color:#000000;
  text-align: center; /* Centers the page content container in IE 5 browsers. */

}


h1 {
  font-size: 1.125em;
  font-weight: normal;
  line-height: 1.375em;
}


h2 {
  font-size: 1.125em;
  font-weight: normal;
  line-height: 1.125em;
}

/* Style for unvisited links. */
a:link {
  color: Black;
  background: #ffffff;
  text-decoration: none;
}

/* Style for visited links. */
a:visited {
  color: Black;
  background: #ffffff;
  text-decoration: none;
}

/* Style for links on mouseover. */
a:hover {
  color: #ff6600;
  background: #ffffff;
  text-decoration: none;
}

/* Style for a link that has focus. */
a:focus {
  color: Black;
  background: #ffffff;
  text-decoration: none;
}

/* Style for a link that is being clicked. */
a:active {
  color: #ff6600;
  background: #ffffff;
  text-decoration: none;
}

#wrapper {
  margin: 0 auto 0 auto; /* Shorthand notation (top, right, bottom, left) */
  text-align: left; /* Redefines the text alignment defined by the body element. */
  width: 60em; 
  position: relative;
     
}

#clear {
  clear: both;
}

#top {
    background:#ffffff;
    height: .75em;
}

#logo {
    background: #ffffff;
    margin-right: 28.125em;
}

#rss {
   background: #ffffff;
   float: right;
   width: 28.125em;
   height: 6.25em;
   text-align: right;
  
}

#rss-text {
   background: #ffffff;
   font-size: 12px;
   text-align: left;
   margin: 0 0 0 10em; /* Shorthand notation (top, right, bottom, left) */
}

#crumbs {
    background: #ffffff;
    font-size: 0.689em;
    text-align: left;
    margin: 1em auto 1em 1em; /* Shorthand notation (top, right, bottom, left) */
    
}


/************************************* Main menu****************************************************/

#nav-menu ul
{
   list-style: none;
   float: right;
   text-align:left;
   margin: 5em 2.0em 0 auto; /* Shorthand notation (top, right, bottom, left) */
}

#nav-menu li
{
   float: right;
   margin: .625em;
}

#nav-menu li a
{
   color: #000000;
   text-decoration: none;
} 

#nav-menu li a:hover
{
   color: #ff6600;  
   text-decoration: none;
}

#search-bar {
    background:#CCCCCC;
    height: 1.5em;
    border:1px solid #000000;
    margin: 1em 0 0 0; /* Shorthand notation (top, right, bottom, left) */
    padding: .2em 0 .5em .5em; /* Shorthand notation (top, right, bottom, left) */
}

Page Code:



<!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=iso-8859-1" />

<link rel="stylesheet" href="css/main.css" type="text/css" /> 

</head>

<body>

  <div id="wrapper">
   
   <div id="top">
   
   </div>

   <div id="rss">
   

     
   <div id="rss-text">Call Us Now: +34 12345678.  +34 24681012. 
     
    <a href="feed.html"><img src="images/rss.png" alt="RSS feed image" title="Subscribe to our feed" class="rss" width="20" height="20" border="0" /></a>

    </div>
    <!-- Navigation Menu -->  
   
    <div id="nav-menu">
       <ul>
              <li><a href="contact.html">Contact Us</a></li>
                <li><a href="spanish-property/index.html">About Us</a></li>
                     <li><a href="index.html">Homepage</a></li>
       </ul>
   </div>        
       
</div>
   
   <div id="logo">
     <a href="index.html" title="Link to Homepage"><img src="images/blank-logo.jpg" alt="Logo" width="500" height="130" border="0" /></a></div>
   
   
   
   
   
   <div id="crumbs">

Bread Crumbs go here
          

</div>
    

   <!-- Start Search Bar -->    
    
       <div id="search-bar">
       <form method="post" action="">
       
        <span class="search-text">Information Search:</span>
        <input name="ref" type="text" class="ref"  id="ref" maxlength="6" />
       </form>
       
       </div>
    
    
    <!-- End Header -->

Thanks in advance

C

2

Hi, can you give us a link to the page in question?

Just by looking at the CSS add display:inline; to each of these

#nav-menu ul
{
   list-style: none;
   float: right;
   text-align:left;
   margin: 5em 2.0em 0 auto; /* Shorthand notation (top, right, bottom, left) */
}
 
#nav-menu li
{
   float: right;
   margin: .625em;
}
3

Thanks for the reply.

Sorry no can do with page link site only on my dev box at the moment.

I have added the display:inline; and this has cured the problem.

Thanks very much

C

4

You’re welcome :).