SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile firefox dont take this nav css

    Hi,

    Check the horizontal navigation for this site
    In firefox I get it weird compared to Ie6:

    1) border-top: 1px solid FFFFFF; dont exist
    2) #nav ul {margin-top: 5px; padding: 3px; } dont get
    3) the rss feed icon looks not aligned properly as in Ie6

    in Ie looks fine

    Check the css here the nav css is at the very bottom

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

    Because you have floated the header then the margins padding and borders of elements beneath a float will slide under the float because floats are removed from the flow.

    You need to set clear both on your nav.
    Code:
    #nav {
        background: #000;
        width: 840px;
        color: #FFFFFF;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 9pt;
        font-weight: bold;
        margin: 0px auto 0px;
        padding: 7px 0px 7px 0px;
        border-top: 1px solid #FFFFFF;
      border-bottom: 1px solid #FFFFFF;
        clear:both
        }
    Your nav is also invalid because you have put the pipe character in no-mans-land.

    e.g.

    Code:
    <ul>
                    <li ><a href="http://www.ilreca.it">Home</a> </li>
                    |
                    <li ><a href="http://www.ilreca.it/biogra
    Nothing can exist between the closing list tag and the next opening tag.

    <li>Content......... </li> nothing can exist here <li>more content </li>

    All content goes inside the li pair just in the same way that a table has all content inside td tags and not between the rows.

    The nav should be like this:

    Code:
    <div class="alignleft">
                <ul>
                    <li ><a href="http://www.ilreca.it">Home</a> |</li>
                    <li ><a href="http://www.ilreca.it/biografia/">Biografia</a>|</li>
                    <li ><a href="http://www.ilreca.it/chi-e-il-reca/">Chi &#232; il Reca</a> |</li>
                    <li ><a href="http://www.ilreca.it/foto/">Gallery</a> |</li>
                    <li ><a href="http://www.ilreca.it/links/">Links</a> |</li>
                    <li ><a href="http://www.ilreca.it/coach-corner/">Coach Corner</a> |</li>
                    <li ><a href="http://www.ilreca.it/redazione/">Redazione</a> |</li>
                    <li ><a href="http://www.ilreca.it/scrivimi/">Scrivimi</a> |</li>
                </ul>
            </div>
    Also why have you wrapped a div around it with no styling applied as that is just a waste. Indeed the #nav div is also unnecessary and styles could be applied directly to th ul.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank u! it's fixed now!

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd go one further and remove the DIV element and the pipe characters as well, replacing the pipes with right borders on the list items.


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
  •