Welcome to WebmasterWorld Guest from 50.17.5.36

Forum Moderators: not2easy

Message Too Old, No Replies

IE9 menu hover problem

     
8:52 am on Apr 30, 2013 (gmt 0)

New User

joined:Apr 30, 2013
posts: 5
votes: 0


CSS

ul#topnav {
margin:0; padding: 0;
float: left;
height:35px;
width: 100%;
list-style: none;
position: relative;
font-size: 14px;
background:#000;
text-align:center;
top: 0px;
left: 0px;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
width:15.5%;
height:35px;
border-left: 1px solid #555;
top:0;
}
ul#topnav li a {
display: block;
padding-top:8px;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li a:hover {


font-weight:bold;

}

ul#topnav li:hover
{
height:35px;
background-color: Red;
}

ul#topnav li span
{
font-size:x-small;
padding-top:8px;
padding-bottom:8px;
float: left;
height:27px;
position:absolute;
display: none;
background-color: Red;

border-color:#637a59 #000 #000 #000 ;

border-style:solid;
border-width:0px;
color: #fff;
border-right: 1px solid #000;
}

ul#topnav li span a{
width:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;

display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;

}

ul#topnav li:hover span
{
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;



}

ul#topnav li span a { display: inline; }
ul#topnav li span a:hover
{
font-weight:bolder;
width:100%;
}


HTML

<ul id="topnav">
<li><a href='../home.aspx'>Home</a></li>
<li><a href='#'>User</a><span><a href='../UserList.aspx'>User Setting</a>|
<a href='../Group.aspx'>Group Setting</a>|
<a href='../FTP.aspx'>FTP activation</a>
</span></li>
</ul>


Hover can work in firefox. But IE9 and IE10 can't. Anyone help?
9:39 am on Apr 30, 2013 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10544
votes: 8


welcome to WebmasterWorld, tester88!


first thing i would try is validating your html and css.

Unicorn - W3C's Unified Validator:
http://validator.w3.org/unicorn/ [validator.w3.org]
8:21 pm on Apr 30, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


Hi,

I assume you have a valid doctype or you send IE back to the dark ages and it behaves much like IE5 and won't understand hover on anything but anchors.

Your code works for me with a doctype:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul#topnav {
margin:0;
padding: 0;
float: left;
height:35px;
width: 100%;
list-style: none;
position: relative;
font-size: 14px;
background:#000;
text-align:center;
top: 0px;
left: 0px;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
width:15.5%;
height:35px;
border-left: 1px solid #555;
top:0;
}
ul#topnav li a {
display: block;
padding-top:8px;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li a:hover { font-weight:bold; }
ul#topnav li:hover {
height:35px;
background-color: Red;
}
ul#topnav li span {
font-size:x-small;
padding-top:8px;
padding-bottom:8px;
float: left;
height:27px;
position:absolute;
display: none;
background-color: Red;
border-color:#637a59 #000 #000 #000;
border-style:solid;
border-width:0px;
color: #fff;
border-right: 1px solid #000;
}
ul#topnav li span a {
width:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li:hover span {
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {
font-weight:bolder;
width:100%;
}
</style>
</head>

<body>
<ul id="topnav">
<li><a href='../home.aspx'>Home</a></li>
<li><a href='#'>User</a><span><a href='../UserList.aspx'>User Setting</a>| <a href='../Group.aspx'>Group Setting</a>| <a href='../FTP.aspx'>FTP activation</a> </span></li>
</ul>
</body>
</html>

3:47 am on May 2, 2013 (gmt 0)

New User

joined:Apr 30, 2013
posts: 5
votes: 0


Thanks. It works in my small testing HTML. but can't work in my big asp.net project.

it has 3 things in that page.

master site page, menu.ascx and home (content) page.

i tried to put doctype in master site and menu.ascx. can't work.

any idea?
6:46 am on May 2, 2013 (gmt 0)

New User

joined:Apr 30, 2013
posts: 5
votes: 0


master site page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
.
.
.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:ContentPlaceHolder ID="Content_menu" runat="server">
<mnu:ucMenu ID="ucMenu1" runat="server" />
</asp:ContentPlaceHolder>
</td>
</tr>
</table>



Menu.ascx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
.
.
<table id="tblMenu" width="100%" border="5" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td>
<ul id="topnav">
<asp:Literal ID="lt_list" runat="server" ></asp:Literal>
</ul>
</td>
</tr>
</table>


In Menu.ascx.cs, bind data into ID "lt_list"

string Home = "<li><a href='../home.aspx'>Home</a></li>";
string UserMgt = "<li><a href='#'>User</a> " +
"<span id='mnuspan'>" +
"<a href='../UserList.aspx'>User Setting</a>| " +
"<a href='../Group.aspx'>Group Setting</a>| " +
"<a href='../FTP.aspx'>FTP activation</a> " +
"</span>" +
"</li>";
7:14 am on May 2, 2013 (gmt 0)

New User

joined:Apr 30, 2013
posts: 5
votes: 0


this is original css. the css above is that i modified to simple one. the difference between the css above and this css is

filter: progid:DXImageTransform.Microsoft.gradient(.....);
background: -webkit-gradient(.....);
background: -moz-linear-gradient(....);

CSS

ul#topnav {
margin:0; padding: 0;
float: left;
height:35px;
width: 100%;
list-style: none;
position: relative;
font-size: 14px;
background:#000;
text-align:center;
top: 0px;
left: 0px;
}

ul#topnav li {
float: left;
margin: 0; padding: 0;
width:15.5%;
height:35px;
border-left: 1px solid #555;
top:0;
}
ul#topnav li a {
display: block;
padding-top:8px;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li a:hover {
font-weight:bold;
}

ul#topnav li:hover
{
height:35px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', EndColorStr='#637a59');
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#637a59)); /* for webkit browsers */
background: -moz-linear-gradient(top, #000, #637a59);
}

ul#topnav li span
{
font-size:x-small;
padding-top:8px;
padding-bottom:8px;
float: left;
height:27px;
position:absolute;
display: none; /*--Hide by default--*/

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637a59', EndColorStr='#000000');
background: -webkit-gradient(linear, left top, left bottom, from(#637a59), to(#000000));
background: -moz-linear-gradient(top, #637a59, #000000);
border-color:#637a59 #000 #000 #000 ;
border-style:solid;
border-width:0px;
color: #fff;
border-right: 1px solid #000;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

ul#topnav li span>a{
width:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}

ul#topnav li:hover span
{
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}

ul#topnav li span a { display: inline; }
ul#topnav li span a:hover
{
font-weight:bolder;
width:100%;


}
3:20 am on May 3, 2013 (gmt 0)

New User

joined:Apr 30, 2013
posts: 5
votes: 0


I just solved it. I tried to test it in new page and new master page. Both are fine. So I thought the fault should be in old master page, not CSS. I removed few codes from old master page and it is working now.

Thanks everyone for help.