SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Trouble :( HELP!!! Please

    hi all,

    I have designed this site for a client & there is a problem with my nav bar it looks all mangled up.

    Taken from Sitepoint Book CSS Ant 3rd Edition.

    http://rip-rugga.com/ in IE7 that is the only error I spotted.
    Any help will be highly appreciated.

    <div id="nav-bar"> <ul>
    <li class="buy"><a href="contact-us.html">Contact Us</a></li>

    <li class="articles"><a href="rates.html">Rates</a></li>
    <li class="contact"><a href="feedback.html">Guest Feedback</a></li>
    <li class="buy"><a href="gallery.html">Gallery</a></li>
    <li class="articles"><a href="cape-town.html">Cape Town</a></li>
    <li class="contact"><a href="accommodation.html">Accommodation</a></li>
    <li class="recipes"><a href="index.html">Home</a></li>

    </ul>
    </div>
    Html Above

    Css Below

    #nav-bar {
    float: right;
    width: 958px;
    border-bottom: 5px solid #2582b6;
    border-left: 2px solid #2582b6;
    margin-bottom: 0;
    display:inline;

    }

    #nav-bar ul {
    margin: 0;
    padding: 2em 10px 0 10px;
    list-style: none;
    }

    #nav-bar li {
    float: right;
    background-image:url(../images/tab_left.gif);
    background-repeat: no-repeat;
    list-style:none;
    margin: 0 1px 0 0;
    padding: 0 0 0 8px;
    }

    #nav-bar a {
    float: right;
    display: block;
    background-image:url(../images/tab_right.gif);
    background-repeat: no-repeat;
    background-position: right top;
    padding: 0.2em 10px 0.2em 0;
    text-decoration: none;
    font-weight: bold;
    color: #155070;
    }
    #recipes #nav-bar li.recipes,
    #contact #nav-bar li.contact,
    #articles #nav-bar li.articles,
    #buy #nav-bar li.buy {
    background-image:url(../images/tab_active_left.gif);
    }
    #recipes #nav-bar li.recipes a,
    #contact #nav-bar li.contact a,
    #articles #nav-bar li.articles a,
    #buy #nav-bar li.buy a {
    background-image:url(../images/tab_active_right.gif);
    background-color: transparent;
    color:#FFFFFF;
    }


    /* End Nav-Bar */
    Thank
    Yourself

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove float: right; from #nav-bar a

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dude.
    Much Appreciated


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
  •