Need help with IE6 CSS problem

**ColinHughes** · Feb 13, 2010 12:42

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:

Code 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:

Code HTML4Strict:

 
<!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

**RyanReese** · Feb 13, 2010 16:37

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

Code:

#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;
}

**ColinHughes** · Feb 14, 2010 05:27

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

**RyanReese** · Feb 14, 2010 11:47

You're welcome

.

User Tag List

Thread: Need help with IE6 CSS problem

Thread Tools

Display

Need help with IE6 CSS problem

Bookmarks

Bookmarks

Posting Permissions