views:

233

answers:

2

Hi guys.

My CSS looks like this:

#menu 
{
 width: 1024px;
 height: 25px;
 margin: 0 auto;
 text-align: right;
 background-color: Red;
}

My asp page looks like this, (in fragment):

        <asp:Menu ID="mnuMainMenu" runat="server" BackColor="#F7F6F3" 
            DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Medium" 
            ForeColor="#7C6F57"  
            Orientation="Horizontal" StaticSubMenuIndent="10px" Font-Bold="True">
            <StaticSelectedStyle BackColor="#5D7B9D" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <DynamicMenuStyle BackColor="#F7F6F3" />
            <DynamicSelectedStyle BackColor="#5D7B9D" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <Items>
                <asp:MenuItem Text="Projekty" Value="Projekty"></asp:MenuItem>
                <asp:MenuItem Text="Licencje" Value="Licencje"></asp:MenuItem>
                <asp:MenuItem Text="Kontrahenci" Value="Kontrahenci"></asp:MenuItem>
            </Items>
        </asp:Menu>

I want to have menu aligned to the right side of my div tag. Aligment must be done automaticaly, if I add more menu items menu should realign itself. This works as expected under split view in VS 2008, however in IE and FireFox the menu is aligned to the left. How to fix this problem?

Thanks for your time.

A: 

You can wrap the menu in a div tag and set it to float right, this however makes it that certain html tags may float to its side as well.

Joakim
A: 

I have copied / paste your code into a new webform. Maybe this will work for you: (I have added a class to the div around your menu and floated it to the right)

<head runat="server">
<title></title>
<style type="text/css"">
#menu 
{
 width: 1024px;
 height: 25px;
 margin: 0 auto;
 text-align: right;
 background-color: Red;
}

#menuContainer{float: right;}

</style></head>

<body><form id="form1" runat="server">
<div id="menuContainer">

<asp:Menu ID="mnuMainMenu" runat="server"  BackColor="#F7F6F3" 
        DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Medium" 
        ForeColor="#7C6F57"  
        Orientation="Horizontal" StaticSubMenuIndent="10px" Font-Bold="True">
        <StaticSelectedStyle BackColor="#5D7B9D" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
        <DynamicMenuStyle BackColor="#F7F6F3" />
        <DynamicSelectedStyle BackColor="#5D7B9D" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />

        <Items>
            <asp:MenuItem Text="Projekty" Value="Projekty"></asp:MenuItem>
            <asp:MenuItem Text="Licencje" Value="Licencje"></asp:MenuItem>
            <asp:MenuItem Text="Kontrahenci" Value="Kontrahenci"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>
</form>

Roger
Thanks Roger, Joakim was first so I'll give him the answer.
Wodzu
Well, your problem is solved. That is important here!
Roger