Results 1 to 4 of 4

Thread: Horizontal css menu too many problem

  1. #1
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Horizontal css menu too many problem

    Ho to all!
    I'm new here...
    I have a question that I can't solve on my own and I need your precious help!
    I have to build a wordpress template for my g/f blog...(that isn't online yet)
    But I have a really big problem with the menu!

    Before start to tell you my problem:
    Here is the CSS:
    Code:
    /*HORIZONTAL MENU*/
    
    .menu{ /*Container per il menu*/
    float:left;
    overflow: hidden;
    width: auto;
    background: url(images/blog_bg_r.jpg) repeat-y; /*menu background*/
    padding:10px 0px 20px 0;
    padding-left:70px
    }
    
    * html .menu{ /*h a c k for IE6*/
    width: 100%;
    }
    
    .menu a.animebtn:link, .menu a.animebtn:visited, .menu a:active{
    color: #000000; /*colore del link*/
    }
    
    .menu a.animebtn:hover span{ 
    color: #CC00FF;/*colore del link al passaggio del mouse*/
    }
    
    a.animebtn{ /*pulsanti eredita dalla classe .btn_* l'immagine del pulsante*/
    display: block;
    float: left;
    font: bold italic 13px Georgia, "Times New Roman", Times, serif; /*dimensione del testo del link*/
    line-height: 75px; /* definisce la posizione del link*/
    height: 53px; /* altezza e larghezza del pulsante*/
    width:130px;
    text-decoration: none;
    padding-left:20px;
    }
    
    /*BUTTON IMAGES*/
    .btn_panda{
    background: transparent url('images/pulsante_panda.png') no-repeat top left;
    }
    .btn_ring{
    background: transparent url('images/pulsante_ring.png') no-repeat top left;
    }
    .btn_witch{
    background: transparent url('images/pulsante_witch.png') no-repeat top left;
    }
    .btn_nana{
    background: transparent url('images/pulsante_nana.png') no-repeat top left;
    }
    .btn_sunako{
    background: transparent url('images/pulsante_sunako.png') no-repeat top left;
    }
    .btn_zero{
    background: transparent url('images/pulsante_zero.png') no-repeat top left;
    }
    /*END BUTTON IMAGES*/
    
    /*END MENU*/
    And here the html code in the header.php:
    Code:
            <div class="menu">
    			<a href="http://www.dynamicdrive.com" class="btn_sunako animebtn"><span>home</span></a> 
    			<a href="http://www.dynamicdrive.com/style/" class="btn_zero animebtn"><span>recensioni</span></a> 
    			<a href="http://www.dynamicdrive.com/forums/" class="btn_ring animebtn"><span>OST</span></a> 
    			<a href="http://tools.dynamicdrive.com" class="btn_nana animebtn"><span>guestbook</span></a> 
    			<a href="http://www.javascriptkit.com" class="btn_witch animebtn"><span>affiliati</span></a> 
    			<a href="http://www.cssdrive.com" class="btn_panda animebtn"><span>chi siamo</span></a>
    		</div>
    OK here is the result on IE7:



    And this is the result on Firefox 3


    Now as you can see Firefox display the menu correctly...but IE no...
    I can edit the menu to be well displayed on IE?

    Thanks in advance for the answer
    Thanks really thanks

    bye

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    you could give it its own stylesheet http://www.quirksmode.org/css/condcom.html

  3. #3
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks but how can I solve the float problem on ie?

  4. #4
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    no one? please?

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
  •