CODEWITHSUNDEEP
asp.netcss
P.Brian.Mackey
P.Brian.Mackey

Reputation: 44285

ASP.NET Menu control not respecting padding values in IE or FF

I have set ridiculous padding values and cannot get padding to extend the total width beyond the content size. Isn't FF supposed to follow a "box model" whereby padding is added to the content size? Here's the relevant code.

Environment: IE7, FF 3.6.8

CSS:

.StaticMenuStyle
{
    width: auto;
    background-image: url(../images/nav_repeat.gif);
    background-repeat:repeat-x;
    padding-left: 100px;
    /*padding-top: 10px;
    margin-top: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;*/
    float:left;
}  
.StaticMenuStyle a:link
{
    padding-left: 100px;
    text-decoration: none;
}  
.StaticMenuItemStyle
{
    height: 38px;
    /*min-width: 75px;*/
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: center;    
    color:#006c56;
    padding-left: 100px;
    /*padding-left: 100px;
    padding-right: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    border:5px solid clear;
    /*margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;*/
    /*background: right 50% url(../images/nav_div.gif) no-repeat;*/
    background-image: url(../images/nav_div.gif);
    background-repeat:no-repeat;
    background-position:right;
    /*text-indent:5px;*/
}
/*
.StaticSelectedStyle
{
    color:#006c56;
    height: 38px;
    background-image: url(../images/nav_over.gif);
    background-position:center bottom;
    overflow:hidden;
}
*/
.StaticHoverStyle
{
    /*color:Black;*/
    /*color:White;*/
    /*height: 38px;*/
    /*background-image: url(../images/nav_over.gif);*/
    /*background-position:center bottom;*/
    /*overflow:hidden;*/
}
.StaticMenuStyle a:hover
{
    /*background-image: none;*/
    height: 38px;
    background-image: url(../images/nav_over.gif);
    background-position:center bottom;
    color:Black;
    text-decoration: none;
}
.DynamicMenuStyle
{
    height: 38px;
    /*width: auto;*/
}

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SJMTemplateDot4.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false"  />
     <asp:Menu 
                ID="MenuMain" 
                runat="server" 
                DataSourceID="SiteMapDataSource2"
                Orientation="Horizontal"
                StaticMenuStyle-cssClass="StaticMenuStyle"
                StaticMenuItemStyle-cssClass="StaticMenuItemStyle"
                StaticHoverStyle-cssClass="StaticHoverStyle"
                />
    </div>
    </form>
</body>
</html>

Upvotes: 1

Views: 3298

Answers (1)

MikeWyatt
MikeWyatt

Reputation: 7871

Is the padding being overiden in another CSS file, perhaps? Try padding-left: 100px !important.

Also, as I mentioned in my comment, you should install Firebug. It can both tell you the actual computed padding value of each element AND it can show you excellent visual models of the exact dimensions of an element, including padding and margin.

IE Developer Toolbar can help with IE.

Upvotes: 2

Related Questions