|
-
Oct 12th, 2007, 07:01 AM
#1
Thread Starter
Fanatic Member
help!! css hover effect compatability
Code:
<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 to fix this:
make the block line same in all browser
Last edited by jlbantang; Oct 12th, 2007 at 08:45 AM.
-
Oct 12th, 2007, 12:12 PM
#2
Re: help!! css hover effect compatability
Reset margin and padding of the list element.
Code:
ul.itemmenu li { margin : 0; padding : 0; }
As for the border, you can't get the exact same result for Firefox and IE. Firefox does dots, IE does dashes, even if you tell to do dots.
-
Oct 12th, 2007, 01:11 PM
#3
Thread Starter
Fanatic Member
Re: help!! css hover effect compatability
its the same hover effect after i add the li{} code.
what i am missing? im using w3c 4 standard btw.
 Originally Posted by Merri
Reset margin and padding of the list element.
Code:
ul.itemmenu li { margin : 0; padding : 0; }
As for the border, you can't get the exact same result for Firefox and IE. Firefox does dots, IE does dashes, even if you tell to do dots.
-
Oct 12th, 2007, 08:18 PM
#4
Re: help!! css hover effect compatability
Show also the HTML.
Althought setting display:inline; to the li elements might also help (there is a bug related to this in IE, although it seems not to be triggered in this case; in the other hand, I don't know if we're talking about IE6 or IE7).
-
Oct 13th, 2007, 12:56 AM
#5
Thread Starter
Fanatic Member
Re: help!! css hover effect compatability
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>item 1</title>
<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 { margin : 0; padding : 0; }
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>
</head>
<body bgcolor=#C0C0C0>
<ul class="itemmenu">
<li ><a href=# onclick="alert('item 1')">item 1</a></li>
<li><a href=# onclick="alert('item 2')">item 2</a></li>
<li><a href=# onclick="alert('item 3')">item 3</a></li>
<li><a href=# onclick="alert('item 4')">item 4</a></li>
</ul>
</body>
</html>
im using IE7 and FF2
THANKS!
-
Oct 13th, 2007, 08:48 AM
#6
Re: help!! css hover effect compatability
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>item 1</title>
<style type=text/css>
body { background : #C0C0C0; }
ul.itemmenu{
padding: 10px 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*/
}
/*make list item an inline element and remove margin and padding*/
ul.itemmenu li { display : inline; margin : 0; padding : 0; }
/*apply exclusive hyperlink list formatting to the itemmenu class.
any hyperlink declared outside the itemmenu class
will render unformatted*/
ul.itemmenu li a{
border: 1px dotted #FFFFFF; /*and set its border to dotted lines (hide with white color) */
text-decoration: none; /*remove hyperlink underline formatting*/
display: block; /*make list clickable in any list portion*/
margin: 0 10px;
width: 180px; /*set the display block width*/
}
ul.itemmenu li a:hover{
background-color: #B9BB79; /*change hovered list background color to emphasize*/
border-color: #000000; /*show the border by changing border's color*/
}
ul.itemmenu li a:active{
font-weight: bold; /*make the selected link bold*/
}
</style>
</head><body>
<ul class="itemmenu">
<li><a href="" onclick="alert('item 1');return false">item 1</a></li>
<li><a href="" onclick="alert('item 2');return false">item 2</a></li>
<li><a href="" onclick="alert('item 3');return false">item 3</a></li>
<li><a href="" onclick="alert('item 4');return false">item 4</a></li>
</ul>
</body></html>
Humm, and it was some earlier version of IE that didn't show dotted correctly. You had an error in the border code as you didn't have all the required styles. I fixed the page bouncing problem when hovering links.
I changed the list to look like what I assumed you were after. It now looks the same in Firefox, IE, Opera and Safari.
-
Oct 14th, 2007, 12:39 AM
#7
Thread Starter
Fanatic Member
Re: help!! css hover effect compatability
that was outstanding! keep it up!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
