473,326 Members | 2,048 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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

dotneto
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
5 6469
ilearneditonline
130 Expert 100+
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
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
7,435 Expert 4TB
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
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
    36
    I finally found a solution to this. Thanks to
    this blog

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

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

    Similar topics

    2
    by: Admin | last post by:
    Hi Guys, I am creating a CSS menu that works fine in Opera and Firefox (latest versions), but in IE it doesn't work as expected (ok, I know!) :( Do you know what the problem is (the red menu)?...
    6
    by: Andrew Chalk | last post by:
    My application attempts to connect to an SQL Server database as name ASPNET and Login Name SERVERNAME/ASPNET in response to these commands: SqlConnection myConnection = new SqlConnection("Data...
    6
    by: Deborah | last post by:
    I'm a rookie, and I guess I know just enough to be dangerous. I found a great template website, openwebsign.org, and found an open source template I really liked that even came in 2 versions. ...
    1
    by: Ziphyre | last post by:
    Hi, I've got some problems with horizontal drop down menu. It looks fine under Firefox, a mess under IE. I've noticed the following differences/problems: - Extra space between menu items and...
    1
    by: Edward | last post by:
    I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three...
    1
    by: calebih | last post by:
    Here is the link in question: http://www.redchip.com/testing.asp It is simply styled with floating divs. Two floating divs are in a container, and they look fine, until I insert dropdown...
    18
    by: Ste | last post by:
    Hi there, I'm using CSS to highlight main navigation items in a 'suckerfish menu' for the currently loaded page, i.e. when on the home page, the 'home' navigation item should be highlighted. ...
    19
    by: Jim | last post by:
    Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...
    8
    by: Candoer | last post by:
    I am new to both HTML and CSS. Several months ago my High School Alumni association web master died and they asked me to take over the web site. I had never worked with CSS but had some experience...
    0
    by: DolphinDB | last post by:
    Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
    0
    by: ryjfgjl | last post by:
    ExcelToDatabase: batch import excel into database automatically...
    0
    isladogs
    by: isladogs | last post by:
    The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
    0
    by: Vimpel783 | last post by:
    Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
    0
    by: jfyes | last post by:
    As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
    1
    by: PapaRatzi | last post by:
    Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
    0
    by: af34tf | last post by:
    Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
    0
    by: Faith0G | last post by:
    I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
    0
    isladogs
    by: isladogs | last post by:
    The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

    By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

    To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.