css hover effect error

jlbantang · #1 Oct 12th, 2007, 14:56

<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 · #2 Oct 12th, 2007, 15:09

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 · #3 Oct 12th, 2007, 15:16

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 · #4 Oct 13th, 2007, 01:26

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 · #5 Oct 13th, 2007, 09:32

Quote:

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 · #6 Oct 13th, 2007, 09:33

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 · #7 Oct 13th, 2007, 12:30

perfect!!!

thanks a lot!

i should be reading more.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
open_basedir restriction in effect error in PHP	BenR41	PHP Forum	0	Feb 25th, 2008 12:20
Hover effect for sub menus ?	Oak	Web Page Design	28	Feb 22nd, 2008 23:40
CSS Hover Effect In IE	Monie	Web Page Design	6	Feb 12th, 2008 00:43
Keep getting error message Microsoft VBScript runtime error '800a01a8'	cpando1974	Classic ASP	2	Aug 7th, 2007 12:00

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css hover effect error