homepage Welcome to WebmasterWorld Guest from 54.234.217.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
IE9 menu hover problem
tester88




msg:4569268
 8:52 am on Apr 30, 2013 (gmt 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?

 

phranque




msg:4569289
 9:39 am on Apr 30, 2013 (gmt 0)

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]

Paul_o_b




msg:4569421
 8:21 pm on Apr 30, 2013 (gmt 0)

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>


tester88




msg:4569880
 3:47 am on May 2, 2013 (gmt 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?

tester88




msg:4569913
 6:46 am on May 2, 2013 (gmt 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>";

tester88




msg:4569929
 7:14 am on May 2, 2013 (gmt 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%;


}

tester88




msg:4570202
 3:20 am on May 3, 2013 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved