By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,621 Members | 1,186 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,621 IT Pros & Developers. It's quick & easy.

aspnet menu looks fine in IE7 but not in IE6 or firefox.

dotneto
P: 36
Hi, i have a menu in aspnet that used to be fine, now, my user wants it to work in ie6 as well as in IE7, it used to be ok in ie7, in ie6 the menu looks just like links. It doesn't works well in firefox but now my big problem is to get it working on IE6.
The menu is in a master page and I use a sitemap data source to feed the menu. the problem is basically the way it looks.
Any idea?
Thanks.
Jul 12 '07 #1
Share this Question
Share on Google+
5 Replies

ilearneditonline
Expert 100+
P: 130
Hi, i have a menu in aspnet that used to be fine, now, my user wants it to work in ie6 as well as in IE7, it used to be ok in ie7, in ie6 the menu looks just like links.
Any idea?
Thanks.
Maybe your stylesheet? Please include some code sample you have. There are certain styles that function differently in ie6/ie7
Jul 12 '07 #2

dotneto
P: 36
Maybe your stylesheet? Please include some code sample you have. There are certain styles that function differently in ie6/ie7
Expand|Select|Wrap|Line Numbers
  1.             <td height="66px" valign="bottom">
  2.                     <asp:Image ID="imgAdmin" runat="server" Height="19px" Width="241px" ImageAlign="Top"></asp:Image>
  3.                     <asp:Menu  ID="Menu2" runat="server" CssClass="menu" Height="1px" Orientation="Horizontal" Width="297px" DataSourceID="SiteMapDataSource1"
  4.                         MaximumDynamicDisplayLevels="0">
  5.                         <LevelMenuItemStyles>
  6.                             <asp:MenuItemStyle BorderColor="#FFC080" BorderStyle="Solid" BorderWidth="1px" Font-Underline="False"
  7.                                 Height="35px" HorizontalPadding="5px" ItemSpacing="0px" VerticalPadding="10px"
  8.                                 Font-Names="Arial" Font-Size="X-Small" ForeColor="Black" />
  9.                         </LevelMenuItemStyles>
  10.                         <StaticHoverStyle BorderColor="#FFE0C0" BorderStyle="Solid" BorderWidth="1px"
  11.                             Font-Names="Arial" BackColor="#FFE0C0" />
  12.                         <LevelSelectedStyles>
  13.                             <asp:MenuItemStyle BackColor="LightBlue" Font-Underline="False" BorderColor="LightBlue"
  14.                                 BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" Font-Size="X-Small"
  15.                                 ForeColor="Black" HorizontalPadding="0px" ItemSpacing="0px" VerticalPadding="10px" />
  16.                         </LevelSelectedStyles>
  17.                     </asp:Menu>
  18.                 </td>
This is my menu, that works on IE7 but not in IE6. And this is my styles:

Expand|Select|Wrap|Line Numbers
  1. body
  2. {
  3.     font-family: Arial, Helvetica, sans-serif;
  4.     background-image: url(images/bg.gif);
  5.     margin-left: 0px;
  6.     margin-top: 0px;
  7.     margin-right: 0px;
  8.     margin-bottom: 0px;
  9. }
  10. /* Apply to table tag of any table used in the datagrid */
  11. .Grid
  12. {
  13.     padding: 1px;
  14.     border-color: #5aaac5;
  15.     border-width: 1px;
  16.     border-style: solid;
  17. }
  18. /*This is necessary to force styles on the nested tables within the custom grids*/
  19. .Grid tr td
  20. {
  21.     padding: 1px;
  22.     border-color: #5aaac5;
  23.     border-width: 1px;
  24.     border-style: solid;
  25. }
  26.  
  27. /* Apply to header table of the datagrid */
  28. .GridHeaderItem
  29. {
  30.     background-color: #0f7095;
  31.     color: #f1e7d3;
  32.     font-family: Arial, Helvetica, sans-serif;
  33.     font-size: 11px;
  34.     text-align: center;
  35.     font-weight: bold;
  36. }
  37. /*This is necessary to force styles on the nested tables within the custom grid headers*/
  38. .GridHeaderItem tr td
  39. {
  40.     text-align: center;
  41.     padding: 1px;
  42.     border-color: #5aaac5;
  43.     border-width: 1px;
  44.     border-style: solid;
  45. }
  46.  
  47. /* Apply to odd number rows in the datagrid */
  48. .GridListItem
  49. {
  50.     background-color: #ffffff;
  51.     color: black;
  52.     font-family: Arial, Helvetica, sans-serif;
  53.     font-size: 11px;
  54. }
  55.  
  56.  
  57. /* Apply to even number rows in the data grid */
  58. .GridListItemAlt
  59. {
  60.     background-color: #f1e7d3;
  61.     color: black;
  62.     font-family: Arial, Helvetica, sans-serif;
  63.     font-size: 11px;
  64. }
  65.  
  66.  
  67. /* Apply to any row that needs to be added above the header of the datagrid to divide the datagrid into sections */
  68. .GridSpecialItem
  69. {
  70.     background-color: #5aaac5;
  71.     color: #264564;
  72.     font-family: Arial, Helvetica, sans-serif;
  73.     font-size: 11px;
  74.     text-align: right;
  75.     font-weight: bold;
  76. }
  77.  
  78.  
  79. /* Apply to columns in the datagrid that contain letters */
  80. .GridAlpha
  81. {
  82.     text-align: left;
  83.     valign: top;
  84.     vertical-align: top;
  85. }
  86.  
  87.  
  88. /* Apply to columns in the datagrid that contain numbers */
  89. .GridNumeric
  90. {
  91.     text-align: right;
  92.     valign: top;
  93.     vertical-align: top;
  94. }
  95.  
  96.  
  97. /* Apply to columns in the datagrid that contain icons or check boxes- or other things that need to be centered- should not be used for any data values */
  98. .GridCentered
  99. {
  100.     text-align: center;
  101.     valign: top;
  102.     vertical-align: top;
  103. }
  104.  
  105. /* Grid header link styles */
  106. .GridHeaderItem A:link
  107. {
  108.     color: #f1e7d3;
  109.     text-decoration: none;
  110. }
  111.  
  112. .GridHeaderItem A:visited
  113. {
  114.     color: #f1e7d3;
  115.     text-decoration: none;
  116. }
  117.  
  118. .GridHeaderItem A:active
  119. {
  120.     text-decoration: underline;
  121.     color: #f1e7d3;
  122. }
  123.  
  124. .GridHeaderItem A:hover
  125. {
  126.     text-decoration: underline;
  127.     color: #f1e7d3;
  128. }
  129. /* Apply to all buttons */
  130. .inadsButtons
  131. {
  132.     font-family: Arial, Helvetica, sans-serif;
  133.     font-size: 11px;
  134.     font-weight: bold;
  135.     color: #ffffff;
  136.     background-color: #cc9933;
  137.     border-color: #bd6c19;
  138.     border-width: 1px;
  139.     border-style: solid;
  140. }
  141. .tableStyle
  142. {
  143.     background-color: #FFFFFF;
  144.     background-position: center;
  145.     font-family: Arial, Helvetica, sans-serif;
  146.     font-size: 11px;
  147.     color: #000000;
  148.     text-align: left;
  149.     vertical-align: top;
  150. }
  151. .smallType
  152. {
  153.     font-family: Arial, Helvetica, sans-serif;
  154.     font-size: 10px;
  155.     color: #333333;
  156. }
  157. .formElement
  158. {
  159.     font-family: Arial, Helvetica, sans-serif;
  160.     font-size: 11px;
  161.     color: #000000;
  162. }
  163. .tableStyle td
  164. {
  165.     vertical-align: text-top;
  166. }
  167. /* Grid header link styles */
  168. A:link
  169. {
  170.     color: #cc9933;
  171.     text-decoration: underline;
  172.     font-weight: bold;
  173. }
  174.  
  175. A:visited
  176. {
  177.     color: #cc9933;
  178.     text-decoration: underline;
  179.     font-weight: bold;
  180. }
  181.  
  182. A:active
  183. {
  184.     text-decoration: underline;
  185.     color: #bd6c19;
  186.     font-weight: bold;
  187. }
  188.  
  189. A:hover
  190. {
  191.     text-decoration: underline;
  192.     color: #bd6c19;
  193.     font-weight: bold;
  194. }
  195. .highlight
  196. {
  197.     font-family: Arial, Helvetica, sans-serif;
  198.     font-size: 16px;
  199.     font-weight: bold;
  200.     color: #bd6c19;
  201. }
  202. h1
  203. {
  204.     font-family: Arial, Helvetica, sans-serif;
  205.     font-size: 12px;
  206.     font-weight: bold;
  207.     color: #bd6c19;
  208.     margin-top: 0px;
  209.     margin-bottom: 0px;
  210. }
  211. h2
  212. {
  213.     font-family: Arial, Helvetica, sans-serif;
  214.     font-size: 11px;
  215.     font-weight: bold;
  216.     color: #3c90bd;
  217. }
  218. .formAlignRight
  219. {
  220.     text-align: right;
  221.     vertical-align: bottom;
  222. }
  223. .staticField
  224. {
  225.     font-family: Arial, Helvetica, sans-serif;
  226.     font-size: 11px;
  227.     color: #000000;
  228.     border: 0px;
  229.     font-weight: bold;
  230. }
  231. .inadsSmallButtons
  232. {
  233.     font-family: Arial, Helvetica, sans-serif;
  234.     font-size: 10px;
  235.     font-weight: bold;
  236.     color: #ffffff;
  237.     background-color: #cc9933;
  238.     border-color: #bd6c19;
  239.     border-width: 1px;
  240.     border-style: solid;
  241.     margin-bottom: 2px;
  242. }
  243.  
  244. .wingdingStyle
  245. {
  246.     font-family: Wingdings;
  247.     text-decoration: none;
  248.     font-size: 20px;
  249. }
  250.  
  251. .wingding2Style
  252. {
  253.     font-family: Wingdings 2;
  254.     text-decoration: none;
  255.     font-size: 20px;
  256. }
  257.  
  258. .webdingStyle
  259. {
  260.     font-family: Webdings;
  261.     text-decoration: none;
  262.     font-size: 20px;
  263. }
  264. .menu
  265. {
  266.     font-family: Arial;
  267.     font-size: XX-Small;
  268.     color: black;
  269. }
  270. .menu a:link
  271. {
  272.     font-family: Arial;
  273.     font-size: XX-Small;
  274.     color: Black;
  275.     text-decoration: none;
  276. }
  277.  
  278. .menu a:visited
  279. {
  280.     font-family: Arial;
  281.     font-size: XX-Small;
  282.     color: Black;
  283.     text-decoration: none;
  284. }
  285.  
  286. .menu a:hover
  287. {
  288.     font-family: Arial;
  289.     font-size: XX-Small;
  290.     color: Black;
  291.     text-decoration: none;
  292. }
  293.  
  294. .menu a:active
  295. {
  296.     font-family: Arial;
  297.     font-size: XX-Small;
  298.     color: Black;
  299.     text-decoration: none;
  300. }
  301.  
  302. .tableStylemenu
  303. {
  304.     background-color: white;
  305.     background-position: center;
  306.     font-family: Arial;
  307.     font-size: XX-Small;
  308.     color: Black ;
  309.     text-align:center;
  310.     vertical-align:text-bottom;
  311. }
  312. .tableStylemenu td
  313. {
  314. vertical-align:bottom;
  315. }
Thanks.
Jul 13 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
What doctype are you using?
There is no such thing as valign in CSS.

IE7 is more standards compliant than IE6 and Firefox is more compliant than IE7. So I'm not surprised that you are having problems with IE6 but you should always use Firefox as your reference browser.

With all the asp code, it's difficult to extract the html so do you have a link or can you post the html by itself?
Jul 13 '07 #4

dotneto
P: 36
What doctype are you using?
There is no such thing as valign in CSS.

IE7 is more standards compliant than IE6 and Firefox is more compliant than IE7. So I'm not surprised that you are having problems with IE6 but you should always use Firefox as your reference browser.

With all the asp code, it's difficult to extract the html so do you have a link or can you post the html by itself?

Yes, I corrected the css. Well, the big problem is with the menu. I'm using this doc type:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I changed it, but it just made the menu look bad in IE7. Thats the doc type that Visual studio puts by default, i haven't changed it my self. The menu looks good in firefox and IE7.

This is the code for the menu

Expand|Select|Wrap|Line Numbers
  1.  <table class="tableStylemenu" cellspacing="0" cellpadding="0" width="720" align="center" border="0">
  2.             <tr>
  3.                 <td style="height: 66px">
  4.                     <asp:Image ID="imgLogo" runat="server" ImageUrl="~/images/cls_logo.gif" AlternateText="CLS Logo.">
  5.                     </asp:Image></td>
  6.                 <td height="66px" valign="bottom">
  7.                     <asp:Image ID="imgAdmin" runat="server" Height="19px" Width="241px" ImageAlign="Top"></asp:Image>
  8.  
  9.  <asp:Menu  ID="Menu2" runat="server" CssClass="menu" Height="1px" Orientation="Horizontal" Width="297px" DataSourceID="SiteMapDataSource1"
  10.                         MaximumDynamicDisplayLevels="0">
  11.                         <LevelMenuItemStyles>
  12.                             <asp:MenuItemStyle BorderColor="#FFC080" BorderStyle="Solid" BorderWidth="1px" Font-Underline="False"
  13.                                 Height="35px" HorizontalPadding="5px" ItemSpacing="0px" VerticalPadding="10px"
  14.                                 Font-Names="Arial" Font-Size="X-Small" ForeColor="Black" />
  15.                         </LevelMenuItemStyles>
  16.                         <StaticHoverStyle BorderColor="#FFE0C0" BorderStyle="Solid" BorderWidth="1px"
  17.                             Font-Names="Arial" BackColor="#FFE0C0" />
  18.                         <LevelSelectedStyles>
  19.                             <asp:MenuItemStyle BackColor="LightBlue" Font-Underline="False" BorderColor="LightBlue"
  20.                                 BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" Font-Size="X-Small"
  21.                                 ForeColor="Black" HorizontalPadding="0px" ItemSpacing="0px" VerticalPadding="10px" />
  22.                         </LevelSelectedStyles>
  23.                     </asp:Menu>
  •  
  •                 </td> . . .some <td>. . <table/> etc
  • Thanks
    Jul 13 '07 #5

    dotneto
    P: 36
    I finally found a solution to this. Thanks to
    this blog

    And thank you guys for your help.
    Jul 13 '07 #6

    Post your reply

    Sign in to post your reply or Sign up for a free account.