CSS and Standard ASP.net Menu control

Last post 12-08-2006 12:07 AM by ChefGroovy. 2 replies.

Sort Posts:

  • CSS and Standard ASP.net Menu control

    12-07-2006, 11:24 PM
    • Member
      16 point Member
    • ChefGroovy
    • Member since 12-07-2006, 11:16 PM
    • Posts 7

    OK, here is a small same sample of a problem I've been having.

    I want just a regulat horizontal asp.net menu control inside a div.  Sounds easy enough, and it is, EXCEPT in Opera (and I assume other programs).

    Please consider this code:

    1    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
    2    
    3    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    4    
    5    <html xmlns="http://www.w3.org/1999/xhtml" >
    6    <head runat="server">
    7        <title>Untitled Page</title>
    8       <style type="text/css">
    9        
    10     #MainNavBar
    11   {
    12       clear: both;
    13       height: 25px;
    14       width:500px;  
    15       border-style:dotted;
    16   }
    17       
    18       </style>
    19       
    20   </head>
    21   
    22   <body>
    23       <form id="form1" runat="server">
    24       <div>
    25   
    26   <div id="MainNavBar">
    27       <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="aspMenu">
    28           <Items>
    29               <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
    30               <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
    31               <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
    32               <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
    33           </Items>
    34       </asp:Menu>
    35   </div>
    36       
    37       </div>
    38       </form>
    39   </body>
    40   </html>
    

     

    Looks great in IE7 and Firefox.  The menu is surrounded by the div (I put dots on div for clarification).  But in Opera v9.02 its messed up.Is there something I am missing or is this just a Opera bug?  DOes it work on Mac or IE5?

    Thanks

    Dan

     

  • Re: CSS and Standard ASP.net Menu control

    12-07-2006, 11:44 PM
    • Star
      13,979 point Star
    • DMW
    • Member since 09-04-2002, 6:25 AM
    • Posts 2,006
    • Moderator

    Firstly, can you provide a definition of "messed up". Secondly, you've applied the CssClass attribute to the menu, but I don't see the stylesheet referenced that contains the style for that class. Can you provide it (and are you actually bringing in the style sheet that contains that style)?

    Finally, I've run your page in Opera 9.02 on Windows XP SP2 and it looks identical to the IE 7 version, so long as you change the doctype to 1.0 transitional, rather than 1.1. As the code that is generated fails the W3C 1.1 validator, you might want to consider resetting the doctype to 1.0 transitional (which it passes).

    Regards

    Dave
  • Re: CSS and Standard ASP.net Menu control

    12-08-2006, 12:07 AM
    Answer
    • Member
      16 point Member
    • ChefGroovy
    • Member since 12-07-2006, 11:16 PM
    • Posts 7

    thanks a lot for the quick reply! Changing the Doctype to the MS default 1.0 trans did the trick.  Not sure what I was thinking there, shoulda checked that first thing. And to think, when I made that test page, I intentionally copied and pasted the incorrect doctype line from my real project.  <SmackForehead="1">

    and no, no other style sheet, the cssclass in the asp:menu  was just leftover from some experimentation I was trying.

    the exact problem is when its in "1.1 mode" , opera inserts a white space above the menu and moves it down to overlap the bottom border.  Firefox and IE7 deal with it. 

     All fixed now, great.

     

    Dan

     

     

     

     

Page 1 of 1 (3 items)