Tag Archive : Asp.net Menu

IE8 Beta 2 and Asp.net rendering issues

Posted on October 20, 2008 in: Asp.Net, Tips and Tricks|7 Comments

2
Digg me

IE8 Beta 2 and Asp.net Menu Control rendering issues

If your code works on IE 6,7 and Firefox even on chrome it may not work on IE8. The reason being Microsoft suddenly woke up and started to be strict with design and style standards.

For styles not working the way it should or DHTML not appearing on screen the problem is inline styling. IE 8 doesnt parse the code if its inline styling.
So the simple fix is move all the style=” “  to stylesheet class
This is better way to clean your code too.

skmMenu 2.3 : Consolidated Post IE8, Firefox, Chrome

Posted on October 20, 2008 in: Asp.Net, skmmenu|32 Comments

7
Digg me

I have been fixing and updating skmMenu for sometime now. Thought of writing a consolidated post with all the fixes and sourcecode for easy reference. For skmMenu fans and for those who are migrating from 1.1 to 2.0, I have rebuilt the dll on 2.0 framework.

Based on this article by Chris , I have incorporated Javascript changes so that skmMenu works on FireFox, IE and Chrome.
Download skmMenu 2.3 – DLL
Download skmMenu 2.3 Source Code
 The project was checked out from Source Safe. You “may” experience Source Safe binding issues. Please ignore it and remove all the source safe bindings.

Wherever I have made the fix I have marked it as  //GC  with relevant comment next to it. Hope its easy to understand.

The changes are updated in “Readme.txt” file.
 skmMenu Version 2.3 (Bug-Fixes and Changes)

Fixed:
 Recompiled for framework 2.0 and fixed the obselete methods with new methods.
 Change javascript to work with IE 8, Firefox 2,3

Changed: Added <statusbar> to XML element
  Example: <statusbar> </statusbar>

  Added IE 8 (beta 2) support. As IE8 is doesnt like inline styling, two more stylesheet items needed to be added to your stylesheet.
�
  1. td.skmcur
�
  Example: td.skmcur{cursor:hand;}
�
  2. iframe.skm
�
  Example: iframe.skm {position:absolute;top:0px;left:0px;display:none;}
�
  Removed the auto generating z-index for submenu. Again IE 8 doesnt like inline styling. Its now done via css class.

Sample Menu Control (.aspx / .ascx)  (replace all [ & ] with < & > respectively)

 [cc1:menu id="Menu1" Layout="Horizontal" HighlightTopMenu="False" ItemPadding="0" ItemSpacing="1" runat="server" SubMenuCssClass="skmsubmenu"]
 [SelectedMenuItemStyle cssclass="skmSelMenuItem"][/SelectedMenuItemStyle]
[/cc1:menu]

Sample CSS  

iframe.skm {position:absolute;top:0px;left:0px;display:none;}

td.skmcur{cursor:hand;}

 

.skmsubmenu{ text-align : left; border : solid 1px #FBBD05;color:Black;
background-color:#FFEFC0;cursor:pointer; z-index:auto;
font-family : Verdana; font-size : small; font-weight : bold; width : 175px;line-height:20px;
vertical-align:middle;}

.skmSelMenuItem{background-color: #FBBD05
;} 
 

Screen Shots

 

IE 8

FireFox 3.01

IE 7.0

Google Chrome

Hopefully it works on all browsers from now on. Lets carry it to .net 4.0 too :)