I am having a hard time understanding how the rounded corners work on the Fabrikam website. I originally thought that it was using the corresponding tl.gif (top-left), bl.gif, tr.gif, and br.gif images for the rounding, but I have removed these files and it still works. So there must me some magic that I don't know about in the style sheets. Here is the aspx markup in MasterPage.master:
<div id="nav-main">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal"
Width="400px" CssClass="menu-main" MaximumDynamicDisplayLevels="0" StaticSelectedStyle-CssClass="StaticSelectedStyle" />
<div> </div>
</div>
Now here are the corresponding css elements in the style sheet:
#nav-main {
background:#608fc8 url(../../images/bg-nav.png) no-repeat;margin-left:auto;
margin-right:auto;width:740px;
padding:.8em 0 1em 20px;position:relative;
font-weight:bold;
}
#nav-main div {
background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;width:25%;
_width:25.5%;position:absolute;
top:0;right:0;padding:.8em 0 1em 0;
}
Can someone please explain to me where the magical rounding takes place, or a link to a site that can explain it to me. I would greatly appreciate it. Thanks.