css hover effect error

[jlbantang]

HTML: Select all

<style type=text/css>

ul.itemmenu{
    padding:            0;
    margin:                0;

    list-style:            none;                /*remove the bullets points*/
    background-color:     #FFFFFF;            /*make container background color white*/
    width:                200px;                /*set list container to fix width*/
    border:                1px solid;            /*make container border visible*/

    font-family:        tahoma;
    font-size:             0.8em;
    
    text-align:            center;                /*makes menu align horizontally*/            
}

/*apply exclusive hyperlink list formatting to the itemmenu class.
any hyperlink declared outside the itemmenu class
will render unformatted*/

ul.itemmenu li a{
    text-decoration:    none;                /*remove hyperlink underline formatting*/
    display:            block;                /*make list clickable in any list portion*/
    width:                180px;                /*set the display block width*/
    /*padding:            2px 10px;*/
    /*float:left;*/
}

ul.itemmenu li a:hover{
    background-color:    #B9BB79;            /*change hovered list background color to emphasize*/
    border:                1px dotted;            /*and set its border to dotted lines*/
    }

ul.itemmenu li a:active{
    font-weight:        bold;                /*make the selected link bold*/
}

</style>

how can i make the hover effect in Ff the same as in IE

[AdRock]

Both IE and Firefox display things defferently

Your could try using dashed instead of dotted and see if that makes any difference and create a conditional IF so firefox uses dashed and IE uses dotted (if you know whjat i mean)

[jlbantang]

AdRock: i tried using dashed but im having the same hover effect in FF where block hover effect is located in the left most side while on IE it is center. i want both of them to be centered. for the IF condtion i will really look unto it but if you have sample that will be even great.

THANKS!

[Lchad]

I'm no genius when it comes to navigation but I'm curious about this in red.

Code: Select all

ul.itemmenu li a{
    text-decoration:   none;        /*remove hyperlink underline formatting*/
    display:           block;       /*make list clickable in any list portion*/
    width:             180px;     /*set the display block width*/
    /*padding:         2px 10px;*/
    /*float:left;*/
}

Did you comment that out?
I think the float: left is still being read by FF.

[AdRock]

Originally Posted by jlbantang

AdRock: i tried using dashed but im having the same hover effect in FF where block hover effect is located in the left most side while on IE it is center. i want both of them to be centered. for the IF condtion i will really look unto it but if you have sample that will be even great.

THANKS!

Here is a thread i started that might be of use http://www.webforumz.com/css-forum/6...stylesheet.htm

Why don't you delete these lines that you have in red that Lchad pointed out and see if that solves your problem with the centering

If not have a look at what i did with my navigation. My nav is in a div so i haven't set a width but look at the padding. The 5px on the end is the padding on the left so it's really indenting the link. You may have to do something like that...say about 30px or something.

Code: Select all

 
ul#menu li a, .menu2 li a {
   display:block;
   background-color: #F9DBD9;
   color: #000000;
   text-decoration: none;
   outline: none;
   padding: 0px 0px 1px 5px;
}
ul#menu li a:hover, .menu2 li a:hover {
   display:block;
   background-color: #D6DDE6;
   color: #000000;
   text-decoration: none;
   outline: none;
   padding: 0px 0px 1px 5px;
}

Just looking at the difference between borders in IE and FF and they both render differently for the dotted border but not the dashed border, so if you want to use a dotted border you may have to except that there is going to be a difference unless you specify a thickness of 1px by doing border: 1px dotted #000;

[Jack Franklin]

I'll see what I can do but can I see the html? Is it just a normal ul list?

edit: GOT IT!! I just fiddled with the width and text-align and it works in IE & FF!

Code: Select all

<ul class="itemmenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

Code: Select all

ul.itemmenu{
    padding:            0;
    margin:                0;
    list-style:            none;                /*remove the bullets points*/
    background-color:     #FFFFFF;            /*make container background color white*/
    width:                200px;                /*set list container to fix width*/
    border:                1px solid;            /*make container border visible*/
    font-family:        tahoma;
    font-size:             0.8em;
    
    text-align:            center;                /*makes menu align horizontally*/            
}
/*apply exclusive hyperlink list formatting to the itemmenu class.
any hyperlink declared outside the itemmenu class
will render unformatted*/
ul.itemmenu li a{
    text-decoration:    none;                /*remove hyperlink underline formatting*/
    display:            block;                /*make list clickable in any list portion*/
    width:                80%;                /*set the display block width*/
 text-align: center;
 margin: 0 auto;
}
ul.itemmenu li a:hover{
    background-color:    #B9BB79;            /*change hovered list background color to emphasize*/
    border:                1px dotted;            /*and set its border to dotted lines*/
 width: 80%;
 text-align: center;
 margin: 0 auto;
    }
ul.itemmenu li a:active{
    font-weight:        bold;                /*make the selected link bold*/
}

I've changed the bits in red.

I've uploaded an example as well:
http://www.jackfranklin.co.uk/jlbantang/navigation.html

Cheers!

Jack

[jlbantang]

perfect!!!

thanks a lot!

i should be reading more.