Forum Moderators: not2easy
I have an asp.net application which I am having an issue with in IE6 as the horizontal menu I have is displaying correctly, including drop down options, apart from the labels which are not aligning correctly until I mouseover them :(. I have a live sample of the page <> and I've pasted the output html and the two css files (ie6.css and the basicstyle.css) at the base of this message. I have read a lot of articles trying to pinpoint the issue and believe it is related to the redraw issue however I am still unable to resolve the problem so I'm wondering if I have identified the correct problem?
Hope you can help. Thanks in advance
Andrew
output html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
</title>
<!--[if lt IE 7]>
<link rel="stylesheet" href="IE6.css" type="text/css" />
<![endif]-->
<link href="App_Themes/Default/BasicStyle.css" type="text/css" rel="stylesheet" /><style type="text/css">
.Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.Menu1_1 { text-decoration:none; }
.Menu1_2 { width:95%; }
</style></head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY0MDkxNTMyNmRk7hJB+LjO3EbtP1kWTzS6pwuwR7s=" />
</div>
<script src="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JXH1-TLHnI06m--92AG3xMaH7mk5KDkrkdhb4wIyUrhtwhq5hueIbM3ivYBbfVPRaQ2&t=633676280770156250" type="text/javascript"></script>
<script src="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JXH1-TLHnI06m--92AG3xMbu1EldAoTx7jSKAK5OqY6yLn8rE-76OEBAKFwCTl0YOA2&t=633676280770156250" type="text/javascript"></script><link href="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JTdbeevEhDWr9jeYtkH3jnMQsDquDCNfuqDtE7Q6-UG10&t=633676280770156250" type="text/css" rel="stylesheet"></link><link href="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JUHcwXrnRufyXxLbR2qMPndXEJGx6dTchRra8_XRneTIShQzkKDQGg9w8adhkIkRQg2&t=633676280770156250" type="text/css" rel="stylesheet"></link>
<div id="Page">
<div id="Container">
<div id="Header">
<div id="HeaderRow1">
<div id="HeaderRow1Left">
</div>
</div>
</div>
<div class="AspNet-Menu-Horizontal" id="Menu1">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="/TestWebSite/tightening.aspx" class="AspNet-Menu-Link">
Menu1</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/tightening.aspx?DefaultStandard=0" class="AspNet-Menu-Link">
Menu1a</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/tightening.aspx?DefaultStandard=1" class="AspNet-Menu-Link">
Menu1b</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/tightening.aspx?DefaultStandard=2" class="AspNet-Menu-Link">
Menu1c</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/Clamp.aspx" class="AspNet-Menu-Link">
Menu1d</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/CustomCalculation.aspx" class="AspNet-Menu-Link">
Menu1e</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/Procedures.aspx" class="AspNet-Menu-Link">
Menu2</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/Documentation.aspx" class="AspNet-Menu-Link">
Menu3</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/ContactUs.aspx" class="AspNet-Menu-Link">
Menu4</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/TestWebSite/Enquiries.aspx" class="AspNet-Menu-Link">
Menu5</a>
</li>
</ul>
</div>
<div class="Breadcrumbs">
<span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/TestWebSite/WebResource.axd?d=hGEbn_xkDJGNIpQ2bNvjmQ2&t=633736600769125000" style="border-width:0px;" /></a><span>Home</span><a id="SiteMapPath1_SkipLink"></a></span>
<h1>
<span id="lblMain">Page Heading</span>
</h1>
</div>
<div id="Main">
</div>
<div id="footer">
</div>
</div>
</div>
</form>
</body>
</html>
ie6.css
.AspNet-Menu-Horizontal
{
width: 100%;
}
.AspNet-Menu-Horizontal ul.AspNet-Menu li
{
width: 89px !important;
height: 18px !important; /*text-align:center;*/
}
.AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
width: 180px !important;
}
.AspNet-Menu-Horizontal ul.AspNet-Menu ul li a:hover
{
width: 180px !important;
}/* Fix IE. Hide from IE Mac \*/
* html .AspNet-Menu-Horizontal ul.AspNet-Menu ul li { float: left; height: 1%; }
* html .AspNet-Menu-Horizontal ul.AspNet-Menu ul li a { height: 1%; }
/* End */
basicstyle.css
body
{
background: #dddddd;
font-family: Tahoma, Arial, Verdana, Times New Roman;
font-size: 0.7125em;
margin: 0;
}
div
{
z-index: 9999;
}
h1
{
font-size: 2.0em;
font-weight: bold;
padding: 0 0 1.5% 1.5%;
overflow: auto;
}
h2
{
font-size: 1.5em;
font-weight: bold;
}
input
{
font-size: 1em;
font-family: Tahoma, Arial, Verdana, Times New Roman;
}
p
{
clear: both;
}
select
{
font-size: 1em;
font-family: Tahoma, Arial, Verdana, Times New Roman;
}
textarea
{
font-size: 1em;
font-family: Tahoma, Arial, Verdana, Times New Roman;
}
#Container
{
margin: auto;
width: 960px;
background: #ffffff;
top: 0;
}
#footer
{
bottom: 0px;
clear: both;
text-align: justify;
width: 100%;
overflow: auto;
text-indent: 1%;
}
#footer ul
{
padding: 0;
margin: 0;
white-space: nowrap;
list-style-type: none;
}
#footer li
{
display: inline;
}
#Header
{
/* width: 100%;*/
overflow: visible;
top: 0;
background: #000000;
clear: both;
}
#Main
{
border-bottom: solid 1px black;
width: 96%;
overflow: auto;
margin: 2% 2% 2% 2%;
clear:both;
}
.Breadcrumbs
{
background: url(images/breadcrumb.gif) repeat-x;
padding: 0% 1% 0% 0%;
}
.clear
{
font-size: 1px;
height: 1px;
}
.HiddenButton
{
display: none;
}
/* Menu Styling */
ul.AspNet-Menu
{
position: relative;
}
ul.AspNet-Menu, ul.AspNet-Menu ul
{
margin: 0;
padding: 0;
display: inline-block; /*border-left: solid 2px #222222;*/
}
ul.AspNet-Menu li
{
position: relative;
width: 9.79%;
}
ul.AspNet-Menu li a, ul.AspNet-Menu li span
{
display: block;
color: #F1F1F1;
}
ul.AspNet-Menu li:hover ul, ul.AspNet-Menu li li:hover ul, ul.AspNet-Menu li li li:hover:ul, ul.AspNetMenu li.AspNet-Menu-Hover ul, ul.AspNetMenu li li.AspNet-Menu-Hover ul, ul.AspNetMenu li li li.AspNet-Menu-Hover ul
{
display: block;
}
.AspNet-Menu-Horizontal
{
border-top: solid 1px grey;
background: url('images/navbackground.gif') repeat-x;
margin: 0;
height: auto; /*z-index: auto;*/
}
.AspNet-Menu-Horizontal ul.AspNet-Menu li
{
color: #F1F1F1;
background: url('images/navbackground.gif') repeat-x;
border-left: solid 2px #222222;
padding: 1% 5% 1.1% 5%; /*padding: 1% 5% 1% 5%;*/
margin: 0;
font-weight: bold;
font-size: larger;
text-align: center;
}
.AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
left: 0;
top: 2.7em;
width: 100%;
}
.AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
/*background: url(images/navbackground.gif) repeat-x;*/
background: #333333; /*#3f3f3f;*/
color: #F1F1F1;
width: 100%;
padding: 2% 0% 2% 0%;
margin: 0% 0% 0% 0%;
font-size: 0.8em;
font-weight: normal;
}
.AspNet-Menu-Horizontal ul.AspNet-Menu ul li a:hover
{
background: url('images/navbackground.gif') repeat-x;
}
[edited by: SuzyUK at 11:45 am (utc) on May 1, 2009]
[edit reason] No personal URLs : see TOS #13 [WebmasterWorld.com], thanks [/edit]
Unfortunately there is a little too much code there to get more specific in this reply, however.. I'll try
your 2 x scripts:
<script src="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JXH1-TLHnI06m--92AG3xMaH7mk5KDkrkdhb4wIyUrhtwhq5hueIbM3ivYBbfVPRaQ2&t=633676280770156250" type="text/javascript"></script>
<script src="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JXH1-TLHnI06m--92AG3xMbu1EldAoTx7jSKAK5OqY6yLn8rE-76OEBAKFwCTl0YOA2&t=633676280770156250" type="text/javascript">
Well one of them at least, are responsible for making IE6 add a classname to hovered list element. IE6 requires something as it does not support :hover on anything but an <A>nchor element.
I don't know asp.net (nor need to I hope ;)) but because we don't have access to those scripts, I replaced the script with a quick JS snippet to try and test the actual CSS code for you.
* html li {
behavior: expression(
this.onmouseover = new Function("this.className += ' AspNet-Menu-Hover'"),
this.onmouseout = new Function("this.className = this.className.replace(' AspNet-Menu-Hover','')"),
this.style.behavior = null
);
}
I know nothing of the performance issues of this little snippet, but seeing as only IE6 needs this "nudge" be worth a further look?
When I tested your CSS with that piece of code for the IE nudge, IE6 worked absolutely fine, so I can only suggest that the problem is not so much the CSS, but the ASP.NET function which is trying to the same thing as the above snippet?
It's cold guessing as I cannot fully test the ASP script, nor really want to ;) - But I did look at your link before I had to remove it, and the symptoms are not really what I would class a IE6 CSS symptom. the "labels" as you call them, I think you're meaning the dropped links, these links get a partial background color which kind of rolls as your mouse moves over them, but never really "blocks" to fill the whole link - this is not something I've ever seen with CSS (IE issues included) alone, so I really do think this is behaviour related
Anyway I hope that helps narrow it down a bit for you or at least pinpoint where to start your troubleshooting.
My advice is for you to get the menu working outwith your Application, then when you incorporate it if there are problems when you're using a different script you'll know it's the script.
HTH
Suzy
<script src="/TestWebSite/WebResource.axd?d=TJBg4Drk8pbf9y6qhv22JXH1-TLHnI06m--92AG3xMbu1EldAoTx7jSKAK5OqY6yLn8rE-76OEBAKFwCTl0YOA2&t=633676280770156250" type="text/javascript"></script>which is added by the css adapters in asp.net and all of the menu displays correctly plus the dropdown items display. I'm going to have to post this back to the developers who created the adapters and find out if I've identified a new bug or there is a work around somewhere.
Thanks
Andrew
I'm sorry for my terminology, I didn't even know they were called adapters! I hope it's not a bug, but being ASP.net it *could* be a little IE/Microsoft centric, so it's possible the developers are aware but can't quite fix within their remit
anyway do let us know the outcome, if you can, as it's always useful when working with development teams
thanks
Suzy
[edited by: SuzyUK at 5:37 pm (utc) on May 1, 2009]
