<h1> header tags display differently in IE7 and Firefox

This is a simple one, but still rather frustrating.

If you use the <h1> tag, you'll notice that it display differently in different browsers. You might think it's just the font-size, but if you customize h1 in css, you'll find that the space above and below the text inside the <h1> tags is larger in Firefox than it is in IE7.

It's an easy, if unintuitive fix... specify the margins.

The Solution:


h1
{
font-size: large;
margin-top: 0;
margin-bottom: 1em;
}

How to get transparent backgrounds in an ASP.NET Menu Control's DynamicMenuItem

I'm working on this project currently, and the client wants translucent backgrounds on the drop-down menu.

I'm creating this website in ASP.NET 2.0, using Visual Studio.NET 2005. The menu is dynamically created and added to the page in an empty panel control.

The Problem:

I'm using a skin file and css to control the styles, and although everything is set up correctly, the background of the Dynamic Menu Items is still not translucent when rendered in IE. In Firefox, it renders correctly.

How have I set this up?
In my skin file, notice that the DynamicMenuStyle (the div that contains all of the divs that make up the individual DynamicMenuItems) the BackColor is set to Transparent:

<asp:Menu runat="server" orientation="Horizontal" CssClass="menu" >

<StaticSelectedStyle CssClass="menuItemSelected" />
<StaticMenuItemStyle CssClass="menuItem" />
<DynamicHoverStyle CssClass="dynItemHover" />
<DynamicMenuStyle BackColor="Transparent" />
<DynamicMenuItemStyle CssClass="dynItem" />

</asp:Menu>

In the css, take note that the background-image is set to a semi-transparent png. Since the background of the div containing the Dynamic Menu Items is transparent, the translucent png should show the page behind it:

.dynItem
{
background-image:url(../../images/transpix.png);
border-bottom: solid 1px #EEE;
color: White;
height: 22px;
padding: 1px 15px 0px 5px;
display: block;
width: 100%;
}

The reason this doesn't work is that the rendered html code only ever sets the div that contains the dynamic menu's background-color to white, no matter what you do. I've read that you can override the pre-render function of the control, but honestly, the Menu control ought to just work.

Here's a snippet from the rendered HTML code:

.ctl00_ctl03_0 { background-color:white;visibility:hidden;display:none;
position:absolute;left:0px;top:0px; }

That represents the style of container div that holds the dynamic menu (the bit that pops up when you mouse over the static part).

The Solution:

I initially spent hours searching online only to find nothing of immediate use. All other solutions would added many more hours on to the project.

Eventually, I accidentally found the solution, and it's a simple one. Change the DynamicMenuStyle's Width to zero. The Dynamic Menu Items contained within the div will still display, despite being within a 0-width container. However, the annoying white background disappears.

So, in my skin file, I made this change...

<DynamicMenuStyle BackColor="Transparent" Width="0" />

... et voila, it fucking works.