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>