SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist ColinHughes's Avatar
    Join Date
    Sep 2004
    Location
    Spain
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with IE6 CSS problem

    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
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist ColinHughes's Avatar
    Join Date
    Sep 2004
    Location
    Spain
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •