SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floated list troubles with IE7

    Hello,
    I'm new to this forum and I'm trying to improve my CSS skills, therefore please be kind if I'm a bit slow in getting your answers..


    Here's the problem:
    My navigation is set up in a list, but in IE7 instead of being in a straight row the navigation looks like a set of steps, each item is slightly lower than the previous.

    It is the same problem posted here: http://www.sitepoint.com/forums/show...d-List-problem

    but the thread was closed and the given solutions didn't work out for me...where am I wrong?

    You can find the original code and CSS (I mean before I tried to apply post solutions) at www.faqtotum.eu/prova/bio.html

    Thank you very much

    Matteo

  2. #2
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello everybody,
    I figured out a workaround using a div container with absolute position to place the navigation bar and a separate div with absolute position for every button.
    Now the HTML code looks like:
    <div id="nav">
    <div id="nav_home"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></div>
    <div id="nav_servizi"><a href="http://www.faqtotum.eu" class="selected" title="Pagina principale per creare un sito internet artigianale"></a></div>
    <div id="nav_portfolio"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></div>
    <div id="nav_bio"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></div>
    <div id="nav_contatti"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></div>
    </div>

    with its CSS:
    #nav {
    position:absolute;
    width:600px;
    right:20px;
    top:176px;
    height:25px;
    margin:0;
    padding:0;
    }

    #nav_home {
    position:absolute;
    top:176;
    right:480px;
    width:120px;
    height:25px;
    background-position:top right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_home a {
    position:absolute;
    width:120px;
    height:25px;
    background-position:top right;
    background-image:url(immagini/home.gif);
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_home a:hover {
    position:absolute;
    width:120px;
    hieght:25px;
    background-position:bottom right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_home a.selected {
    background-position: bottom right;
    border:0px;
    }

    #nav_servizi {
    position:absolute;
    top:176;
    right:360px;
    width:120px;
    height:25px;
    background-position:top right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_servizi a {
    position:absolute;
    width:120px;
    height:25px;
    background-position:top right;
    background-image:url(immagini/servizi.gif);
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_servizi a:hover {
    position:absolute;
    width:120px;
    hieght:25px;
    background-position:bottom right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_servizi a.selected {
    background-position: bottom right;
    border:0px;
    }

    #nav_portfolio {
    position:absolute;
    top:176;
    right:240px;
    width:120px;
    height:25px;
    background-position:top right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_portfolio a {
    position:absolute;
    width:120px;
    height:25px;
    background-position:top right;
    background-image:url(immagini/portfolio.gif);
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_portfolio a:hover {
    position:absolute;
    width:120px;
    hieght:25px;
    background-position:bottom right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_portfolio a.selected {
    background-position: bottom right;
    border:0px;
    }

    #nav_bio {
    position:absolute;
    top:176;
    right:120px;
    width:120px;
    height:25px;
    background-position:top right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_bio a {
    position:absolute;
    width:120px;
    height:25px;
    background-position:top right;
    background-image:url(immagini/bio.gif);
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_bio a:hover {
    position:absolute;
    width:120px;
    hieght:25px;
    background-position:bottom right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_bio a.selected {
    background-position: bottom right;
    border:0px;
    }

    #nav_contatti {
    position:absolute;
    top:176;
    right:0px;
    width:120px;
    height:25px;
    background-position:top right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_contatti a {
    position:absolute;
    width:120px;
    height:25px;
    background-position:top right;
    background-image:url(immagini/contatti.gif);
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_contatti a:hover {
    position:absolute;
    width:120px;
    hieght:25px;
    background-position:bottom right;
    border:0px;
    outline:none;
    margin:0;
    padding:0;
    }

    #nav_contatti a.selected {
    background-position: bottom right;
    border:0px;
    }

    I found it a bit redundant, but I've not been able to find out a different solution.

    Thnx

    Matteo

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You may need to adjust the #nav positioning using a relative position instead of an absolute position so it sits properly.

    HTML
    Code:
    <ul id="nav">
        <li id="nav_home"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
        <li id="nav_servizi"><a href="http://www.faqtotum.eu" class="selected" title="Pagina principale per creare un sito internet artigianale"></a></li>
        <li id="nav_portfolio"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
        <li id="nav_bio"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
        <li id="nav_contatti"><a href="http://www.faqtotum.eu" title="Pagina principale per creare un sito internet artigianale"></a></li>
    </ul>
    CSS
    Code:
    #nav {
        float: right;
        height: 25px;
        margin: 0;
        padding: 0;
    }
    
    #nav li { float: left; }
    
    #nav li a {
        display: block;
        height: 25px;
        width: 120px;
    }
    
    #nav_home a      { background-image: url('immagini/home.gif'); }
    #nav_servizi a   { background-image: url('immagini/servizi.gif'); }
    #nav_portfolio a { background-image: url('immagini/portfolio.gif'); }
    #nav_bio a       { background-image: url('immagini/bio.gif'); }
    #nav_contatti a  { background-image: url('immagini/contatti.gif'); }
    
    #nav li a:hover,
    #nav li a.selected {
        background-position: left bottom;
    }

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you SgtLegend, very nice solution!
    Unfortunately, as you can see on the webpage, I have to put the navigation list inside the header <div> and below the logo <div>...so I think relative position is not the right way...or at least I don't see how to let it work...if I leave the command float:right; I'm only able to have the list on the upper right corner of the page, that is not my will...

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I didn't pay too much attention...I've used the same solution, putting SgtLegend suggestion inside a absolute-positioned div nav_container...it works!

    Thnx

  6. #6
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok...sorry to bother you, but there's another problem...same page, you can find it here:

    www.faqtotum.eu/prova/index_2.html

    I followed SgtLegend suggestion for all the three navigation bars (one in the header and two in the footer).
    If you open the page with Firefox everything works just perfectly!
    But know...some cross-browser disaster:
    - in Chrome the navigation bars work perfect...only point, the absolute top positioning of the div nav_container in the header turns out to be "not absolute" going far more down than expected. Same situation in Safari.
    - in IE7 is the left nav_bar of the footer that drives me crazy:
    1 - the absolute positioning of the div container using "left" does not work. the two images are shown below the right nav_bar.
    2 - I tried to use the command "right" to set the positioning (just to try, I want to use the left to have a footer width of 100% and have the two navbars at the two ends with no concerns about browser's width) and it worked...but in any case the rollover effect does not.
    The code is exactly the same, but the rollover works just on the other two navbars...

    ...any idea???

    Thank you

    Matteo
    If you open it with IE7...it's a mess...


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
  •