elements inside of ul not working in IE
Asked By: AirTrickz
Originally Asked On: 2014-01-02 08:40:20
Asked Via: stackoverflow
I have a UL that doesn’t Work in IE, but Works fine in chrome, safari and firefox.
<div id="header"> <div id="default_header"> WebAppName <asp:Label ID="LabelUserId" runat="server" Text=""></asp:Label> </div> <div id="lookup_header" style="display:none" class="buttonHeader"> <a id="lookup_cancel" class="cancelButton button blue" href="javascript:PrismeLookup.cancelLookup();">Cancel</a> <asp:Label ID="lookup_selected_value" runat="server" Text=""></asp:Label> <a id="lookup_set" class="setButton button blue" href="javascript:PrismeLookup.setLookup();">Ok</a> <ul class='lookup' id='lookup_search'> <li> <button tabindex='2' onclick='PrismeLookup.search(); return false;'>Search</button> <span> <input id='lookup_searchField' tabindex='1' type='text' value='' /> </span> </li> </ul> </div> </div>If i’m tabbing, I can get to the button and input element, but I can’t click with my mouse on those elements.
It seems like the button and input element is behind some other element, making them not able to be clicked on.
The CSS for the header:
#header { text-align: center; color:#FFF; height: 45px; position:fixed; z-index:5; top:0px; width:100%; top:0; left:0; padding:0; background-color:#2785c7; /* Old browsers */ background: -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */ background: linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* W3C */ background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); /* Chrome,Safari4+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0 ); /* IE6-9 */ }Here is a image of the site:
Image may be NSFW.
Clik here to view.It seems like IE does something with the header. When I changes the height from 45px to 90px, it Works, but that will screw up the other pages.
Here is the head element:
<head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0"/>--> <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/> <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height, target-densityDpi=device-dpi, maximum-scale=1.0"/>--> <!--<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>--> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"/> <link rel="apple-touch-icon" href="images/logo.png"/> <link rel="apple-touch-startup-image" href="images/startup.png"/> <link rel="shortcut icon" href="/images/favicon.ico" /> <title>WebAppName</title> <link href="css/style.css?prisme=#VERSION" rel="stylesheet" type="text/css"/> <link href="css/divScroll.css?prisme=#VERSION" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.6.4.min.js?prisme=#VERSION" type="text/javascript"></script> <script src="js/divScroll.js?prisme=#VERSION" type="text/javascript"></script> <script src="js/javascript.js?prisme=#VERSION" type="text/javascript"></script> </head>Solution
Added this in a JavaScript file when showing the page:$('#header').height('90px');and this when hiding the page:
$('#header').height('45px');This will be the solution for now.
He received 1 answers
eventually accepting:
Yagnesh Agola’s answer to
elements inside of ul not working in IE
You just need to add
overflow:autoor set a specific height more than your current div height45pxto some more number.Your current div height prevent your
ulpart (textbox and button) to display on page in IE.OR
you can remove yourulelement from<div id="header">or add into another div outside of main header div.
For example :<div style="width: 100%;position: relative;top: 45px;text-align: center;"> <ul class='lookup' id='lookup_search' style="list-style: none;"> <li> <button tabindex='2' onclick='PrismeLookup.search(); return false;'>Search</button> <span> <input id='lookup_searchField' tabindex='1' type='text' value='' /> </span> </li> </ul> </div>
If the selected answer did not help you out, the other answers might!
All Answers For: elements inside of ul not working in IE
Yagnesh Agola’s answer to
elements inside of ul not working in IE
You just need to add
overflow:autoor set a specific height more than your current div height45pxto some more number.Your current div height prevent your
ulpart (textbox and button) to display on page in IE.OR
you can remove yourulelement from<div id="header">or add into another div outside of main header div.
For example :<div style="width: 100%;position: relative;top: 45px;text-align: center;"> <ul class='lookup' id='lookup_search' style="list-style: none;"> <li> <button tabindex='2' onclick='PrismeLookup.search(); return false;'>Search</button> <span> <input id='lookup_searchField' tabindex='1' type='text' value='' /> </span> </li> </ul> </div>
Of course, you should really check out the original question.
The post elements inside of ul not working in IE [ANSWERED] appeared first on Tech ABC to XYZ.