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

[dotneto]

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.

[ilearneditonline]

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

[dotneto]

Maybe your stylesheet? Please include some code sample you have. There are certain styles that function differently in ie6/ie7

            <td height="66px" valign="bottom">
                    <asp:Image ID="imgAdmin" runat="server" Height="19px" Width="241px" ImageAlign="Top"></asp:Image>
                    <asp:Menu  ID="Menu2" runat="server" CssClass="menu" Height="1px" Orientation="Horizontal" Width="297px" DataSourceID="SiteMapDataSource1"
                        MaximumDynamicDisplayLevels="0">
                        <LevelMenuItemStyles>
                            <asp:MenuItemStyle BorderColor="#FFC080" BorderStyle="Solid" BorderWidth="1px" Font-Underline="False"
                                Height="35px" HorizontalPadding="5px" ItemSpacing="0px" VerticalPadding="10px"
                                Font-Names="Arial" Font-Size="X-Small" ForeColor="Black" />
                        </LevelMenuItemStyles>
                        <StaticHoverStyle BorderColor="#FFE0C0" BorderStyle="Solid" BorderWidth="1px"
                            Font-Names="Arial" BackColor="#FFE0C0" />
                        <LevelSelectedStyles>
                            <asp:MenuItemStyle BackColor="LightBlue" Font-Underline="False" BorderColor="LightBlue"
                                BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" Font-Size="X-Small"
                                ForeColor="Black" HorizontalPadding="0px" ItemSpacing="0px" VerticalPadding="10px" />
                        </LevelSelectedStyles>
                    </asp:Menu>
                </td>

This is my menu, that works on IE7 but not in IE6. And this is my styles:

body
{
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(images/bg.gif);
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
/* Apply to table tag of any table used in the datagrid */
.Grid
{
    padding: 1px;
    border-color: #5aaac5;
    border-width: 1px;
    border-style: solid;
}
/*This is necessary to force styles on the nested tables within the custom grids*/
.Grid tr td
{
    padding: 1px;
    border-color: #5aaac5;
    border-width: 1px;
    border-style: solid;
}
 
/* Apply to header table of the datagrid */
.GridHeaderItem
{
    background-color: #0f7095;
    color: #f1e7d3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
}
/*This is necessary to force styles on the nested tables within the custom grid headers*/
.GridHeaderItem tr td
{
    text-align: center;
    padding: 1px;
    border-color: #5aaac5;
    border-width: 1px;
    border-style: solid;
}
 
/* Apply to odd number rows in the datagrid */
.GridListItem
{
    background-color: #ffffff;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
 
 
/* Apply to even number rows in the data grid */
.GridListItemAlt
{
    background-color: #f1e7d3;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
 
 
/* Apply to any row that needs to be added above the header of the datagrid to divide the datagrid into sections */
.GridSpecialItem
{
    background-color: #5aaac5;
    color: #264564;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: right;
    font-weight: bold;
}
 
 
/* Apply to columns in the datagrid that contain letters */
.GridAlpha
{
    text-align: left;
    valign: top;
    vertical-align: top;
}
 
 
/* Apply to columns in the datagrid that contain numbers */
.GridNumeric
{
    text-align: right;
    valign: top;
    vertical-align: top;
}
 
 
/* 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 */
.GridCentered
{
    text-align: center;
    valign: top;
    vertical-align: top;
}
 
/* Grid header link styles */
.GridHeaderItem A:link
{
    color: #f1e7d3;
    text-decoration: none;
}
 
.GridHeaderItem A:visited
{
    color: #f1e7d3;
    text-decoration: none;
}
 
.GridHeaderItem A:active
{
    text-decoration: underline;
    color: #f1e7d3;
}
 
.GridHeaderItem A:hover
{
    text-decoration: underline;
    color: #f1e7d3;
}
/* Apply to all buttons */
.inadsButtons
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    background-color: #cc9933;
    border-color: #bd6c19;
    border-width: 1px;
    border-style: solid;
}
.tableStyle
{
    background-color: #FFFFFF;
    background-position: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    text-align: left;
    vertical-align: top;
}
.smallType
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
}
.formElement
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}
.tableStyle td
{
    vertical-align: text-top;
}
/* Grid header link styles */
A:link
{
    color: #cc9933;
    text-decoration: underline;
    font-weight: bold;
}
 
A:visited
{
    color: #cc9933;
    text-decoration: underline;
    font-weight: bold;
}
 
A:active
{
    text-decoration: underline;
    color: #bd6c19;
    font-weight: bold;
}
 
A:hover
{
    text-decoration: underline;
    color: #bd6c19;
    font-weight: bold;
}
.highlight
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #bd6c19;
}
h1
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #bd6c19;
    margin-top: 0px;
    margin-bottom: 0px;
}
h2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #3c90bd;
}
.formAlignRight
{
    text-align: right;
    vertical-align: bottom;
}
.staticField
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    border: 0px;
    font-weight: bold;
}
.inadsSmallButtons
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    background-color: #cc9933;
    border-color: #bd6c19;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 2px;
}
 
.wingdingStyle
{
    font-family: Wingdings;
    text-decoration: none;
    font-size: 20px;
}
 
.wingding2Style
{
    font-family: Wingdings 2;
    text-decoration: none;
    font-size: 20px;
}
 
.webdingStyle
{
    font-family: Webdings;
    text-decoration: none;
    font-size: 20px;
}
.menu
{
    font-family: Arial;
    font-size: XX-Small;
    color: black;
}
.menu a:link
{
    font-family: Arial;
    font-size: XX-Small;
    color: Black;
    text-decoration: none;
}
 
.menu a:visited
{
    font-family: Arial;
    font-size: XX-Small;
    color: Black;
    text-decoration: none;
}
 
.menu a:hover
{
    font-family: Arial;
    font-size: XX-Small;
    color: Black;
    text-decoration: none;
}
 
.menu a:active
{
    font-family: Arial;
    font-size: XX-Small;
    color: Black;
    text-decoration: none;
}
 
.tableStylemenu
{
    background-color: white;
    background-position: center;
    font-family: Arial;
    font-size: XX-Small;
    color: Black ;
    text-align:center;
    vertical-align:text-bottom;
}
.tableStylemenu td
{
vertical-align:bottom;
}

Thanks.

[drhowarddrfine]

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?

[dotneto]

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:

<!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

 <table class="tableStylemenu" cellspacing="0" cellpadding="0" width="720" align="center" border="0">
            <tr>
                <td style="height: 66px">
                    <asp:Image ID="imgLogo" runat="server" ImageUrl="~/images/cls_logo.gif" AlternateText="CLS Logo.">
                    </asp:Image></td>
                <td height="66px" valign="bottom">
                    <asp:Image ID="imgAdmin" runat="server" Height="19px" Width="241px" ImageAlign="Top"></asp:Image>
 
  <asp:Menu  ID="Menu2" runat="server" CssClass="menu" Height="1px" Orientation="Horizontal" Width="297px" DataSourceID="SiteMapDataSource1"
                        MaximumDynamicDisplayLevels="0">
                        <LevelMenuItemStyles>
                            <asp:MenuItemStyle BorderColor="#FFC080" BorderStyle="Solid" BorderWidth="1px" Font-Underline="False"
                                Height="35px" HorizontalPadding="5px" ItemSpacing="0px" VerticalPadding="10px"
                                Font-Names="Arial" Font-Size="X-Small" ForeColor="Black" />
                        </LevelMenuItemStyles>
                        <StaticHoverStyle BorderColor="#FFE0C0" BorderStyle="Solid" BorderWidth="1px"
                            Font-Names="Arial" BackColor="#FFE0C0" />
                        <LevelSelectedStyles>
                            <asp:MenuItemStyle BackColor="LightBlue" Font-Underline="False" BorderColor="LightBlue"
                                BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" Font-Size="X-Small"
                                ForeColor="Black" HorizontalPadding="0px" ItemSpacing="0px" VerticalPadding="10px" />
                        </LevelSelectedStyles>
                    </asp:Menu>
 
                </td> . . .some <td>. . <table/> etc