SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP: I need help with CSS and IE7 problem

    Hi guys,
    I'm having trouble making my navigation bar on my site look right in IE7.
    The navigation looks good in FF and IE6 but once you open it in IE7 the borders go crazy. Here is what the navigation looks like :
    http://www.univsystems.com/products/default.asp

    It is all CSS and I got the code from http://css.maxdesign.com.au/listamatic/horizontal15.htm

    Can anyone please assist me?
    Here is the CSS

    Code:
    #navcontainer
    
    {
    
    background: #369;
    
    border-top: 1px solid #9CC;
    
    font: normal bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    
    }
    
    
    
    #navlist
    
    {
    
    list-style: none outside none;
    
    margin: 0;
    
    padding: 0;
    
    }
    
    
    
    @media all {
    
    #navlist {
    
    text-align: center
    
    }
    
    }
    
    
    
    #navlist li
    
    {
    
    bottom: 11px;
    
    display: inline;
    
    line-height: 1.2em;
    
    margin: 0;
    
    padding: 0;
    
    position: relative;
    
    }
    
    
    
    html>body #navlist li
    
    {
    
    background: #000;
    
    margin: 0 3px 0 0;
    
    padding: 4px 0px 4px 0;
    
    }
    
    
    
    #navlist a, #navlist a:link, #navlist a:visited
    
    {
    
    background: #B6B6B6;
    
    border: 1px solid #FFF;
    
    bottom: 2px;
    
    color: #FFF;
    
    cursor: pointer;
    
    display: inline;
    
    height: 1em;
    
    margin: 0;
    
    padding: 3px 5px 3px 5px;
    
    position: relative;
    
    right: 2px;
    
    text-decoration: none;
    
    }
    
    
    
    #navlist a:hover
    
    {
    
    background: #880020;
    
    bottom: 1px;
    
    color: #FFF;
    
    position: relative;
    
    right: 1px;
    
    }
    
    
    
    #navlist a:active
    
    {
    
    background: #999;
    
    bottom: 0px;
    
    color: #FFF;
    
    position: relative;
    
    right: 0px;
    
    }
    
    
    
    #navlist li#active
    
    {
    
    background: #369;
    
    bottom: 13px;
    
    display: inline;
    
    margin: 0 3px 0 0;
    
    padding: 0;
    
    position: relative;
    
    }
    
    
    
    html>body #navlist li#active
    
    {
    
    background: #000;
    
    margin: 0 4px 0 4px;
    
    }
    
    
    
    #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover
    
    {
    
    background: #369;
    
    border-bottom: none;
    
    border-left: 1px solid #9CC;
    
    border-right: 1px solid #9CC;
    
    border-top: 1px solid #9CC;
    
    bottom: 0;
    
    color: #FFF;
    
    cursor: text;
    
    margin: 0;
    
    padding: 2px 5px 0 5px;
    
    position: relative;
    
    right: 0;
    
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you look at the page from the listamatic link you will see that the original doesn't work in ie6 or ie7 either.

    Inline elements are very difficult to style cross browser (if at all) and I would usually use floats as they give a more consistent base for styling.

    The first problem with inline elements is that they are susceptible to whitespace bugs in the html. We can fix that with the following code which just puts a space before the closing anchor in each list which cancels out the whitespace bug (don't ask me why).

    Code:
        <div id="navcontainer">
            <ul id="navlist">
                <li><a href="/default.asp" title="Home">Home </a></li>
                <li id="active"><a href="/products/default.asp" title="Products">Products </a></li>
                <li><a href="/services/default.asp" title="Services">Services </a></li>
                <li><a href="/support/support.asp" title="Support">Support </a></li>
                <li><a href="/news/default.asp" title="News and Information">News </a></li>
                <li><a href="/symposium/default.asp" title="News and Information">Events </a></li>
                <li><a href="/about_us.asp" title="About Us">About Us </a></li>
                <li><a href="/employment/employment.asp" title="Employment">Employment </a></li>
                <li><a href="/exchange" title="Outlook" target="_blank">Outlook </a></li>
            </ul>
        </div>
    Then the css needs a complete re-write and this is about as close as you can get using inline elements. All dimensions are critical
    .

    Code:
    /**********************new style ********************/
    
    
    
    #navcontainer
    {
    background: #369;
    border-top: 1px solid #9CC;
    font: normal bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    
    #navlist
    {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    
    #navlist {
    text-align: center
    }
    
    #navlist li {
    bottom: 11px;
    display: inline;
    background:#000;
    margin:3px;
    display:inline;
    position:relative;
    padding-bottom:4px
    }
    #navlist a{
    padding:2px 5px 2px 8px;
    background:#B6B6B6;
    position:relative;
    top:-1px;
    left:-2px;
    border:1px solid #fff;
    text-decoration: none;
    color: #FFF;
    }
    #navlist a:hover{background: #880020;}
    #navlist a:active{background: #999;}
    
    #navlist li#active{
    background: transparent;
    bottom: 13px;
    margin:0
    }
    
    #navlist li#active{margin: 0 4px 0 4px;}
    
    #navlist #active a
    {
    background: #369;
    border-left: 1px solid #9CC;
    border-right: 1px solid #9CC;
    border-top: 1px solid #9CC;
    border-bottom:none;
    bottom: -1px;
    cursor: text;
    margin: 0;
    }
    Then you need some specific IE code to go in the head (or to put the css only in an external file but call it from within the conditional comments.). This must follow after the other normal css.

    Code:
    <!--[if IE ]>
    <style type="text/css">
    #navlist li{padding-bottom:0}
    #navlist a{top:-2px;}
    </style>
    <![endif]-->

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul


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
  •