IMPORTANTE - Problema renderizado menu IE6 A veces se ven unas "manchas" negras encima de cada menuItem y no siempre se ven en las mismas posiciones. Va cambiando.
Podéis comprobarlo accediendo a www.filocian.com (user:alberto y password:filocian) y ver el estado del menú en la primera carga de la web, luego podéis darle a Contacto, luego las opciones del menú corporativo en la parte más inferior de la web, etc.
Os adjunto el código CSS de la cabecera (defaultIE.css) que es donde se encuentra el menú y también la página maestra donde esta el menú (Template.master). Debo decir que la imagen negra redondeada de la cabecera usa el IEPNGFix de TwinHelix para que IE6 soporte transparencia de PNG's. No es más que aplicar un behavior via CSS (script en javascript).
Gracias de antemano y salu2!
defaultIE.css
Código:
/* Header */
#header
{
width: 961px;
height: 139px;
margin: 10px auto;
background: url(header.png);
}
/* Header > Menu */
/**************************************************/
#menu
{
position: relative;
float: left;
height:139px;
width: auto;
font-family: Times New Roman;
font-size: 12px;
z-index: 100;
}
#menu a
{
color: Black;
}
#menu a:hover
{
color: Black;
}
.menuStyle
{
margin-top: 114px;
margin-left: 15px;
width: auto;
}
.staticMenu
{
}
.staticMenuItem
{
width: 85px;
height: 25px;
background: url(menu.jpg);
background-position: center;
color: Black;
text-align: center;
}
.staticHover
{
/*background: url(menuHover.png);*/
}
.staticHover a
{
color: Black;
}
.staticSelected
{
}
.dynamicMenu
{
}
.dynamicMenuItem
{
width: 100px;
height: 23px;
text-align: center;
text-decoration: none;
background-color: #5593DE;
vertical-align: middle;
color: Black;
border: 1px solid #F46600;
background-color: #FFE4C4;
}
.dynamicHover
{
}
.dynamicHover a
{
color: Black;
font-weight: bold;
}
.dynamicSelected
{
}
Template.master
Código:
...
...
...
<!-- Icon -->
<link rel="Shortcut Icon" href="css/animated_favicon.gif" />
<!-- Image Preload -->
<style type="text/css">
.preload {
display: none;
behavior: url(/css/iepngfix.htc);
}
</style>
<!-- Javascript Blink -->
<script language="javascript" type="text/javascript">
function parpadear() {
with (document.getElementById("parpadeo").style)
visibility = (visibility == "visible") ? "hidden":"visible";
}
</script>
IEPNGFIX
<script type="text/javascript">
//<![CDATA[
if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent) &&
document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule)
{
//document.styleSheets[0].addRule('*', 'behavior: url(iepngfix.htc)');
document.styleSheets[0].addRule('img', 'behavior: url(/css/iepngfix.htc)');
document.styleSheets[0].addRule('div', 'behavior: url(/css/iepngfix.htc)');
//document.styleSheets[0].addRule('div', 'behavior: url(iepngfix.htc)');
}
//]]>
</script>
</head>
<body onload="setInterval('parpadear()',650)">
<form id="Main" runat="server">
<!-- AJAX -->
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" AllowCustomErrorsRedirect="true">
</asp:ScriptManager>
<!-- #### -->
<asp:UpdatePanel ID="mainPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<!-- Main Box: width=1024px -->
<div id="mainBox" runat="server">
<div style="clear: both;"> </div>
<!-- Header -->
<div id="header">
<!-- AJAX login updatePanel -->
<asp:UpdatePanel ID="loginPanel" runat="server" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<!-- Login Box -->
<div id="loginbox">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login" runat="server" FailureAction="RedirectToLoginPage" meta:resourcekey="LoginResource1">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="130px">
<tr>
<td style="color:White; width:10px; text-align:right; height: 19px;">
<asp:Label runat="server" ID="lblUserName" AssociatedControlID="UserName" Text="Usuario:" meta:resourcekey="lblUserNameResource1" />
</td>
<td style="text-align:left; width:125px; height: 19px;">
<asp:TextBox id="UserName" runat="server" Width="75%" meta:resourcekey="UserNameResource2" />
</td>
<td style="width:5px;text-align:right; color:white; height: 19px;">
<asp:RequiredFieldValidator ID="valRequireUserName" runat="server" SetFocusOnError="True"
ControlToValidate="UserName" Text="*" ValidationGroup="Login" meta:resourcekey="valRequireUserNameResource1" />
</td>
</tr>
<tr>
<td style="color:White; width:10px; text-align:right">
<asp:Label runat="server" ID="lblPassword" AssociatedControlID="Password" Text="Contraseña:" meta:resourcekey="lblPasswordResource1" />
</td>
<td style="text-align:left; width:125px">
<asp:TextBox ID="Password" runat="server" TextMode="Password" Width="75%" meta:resourcekey="PasswordResource2" />
</td>
<td style="width:5px;text-align:right; color:White">
<asp:RequiredFieldValidator ID="valRequirePassword" runat="server" SetFocusOnError="True"
ControlToValidate="Password" Text="*" ValidationGroup="Login" meta:resourcekey="valRequirePasswordResource1" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!--<td><asp:CheckBox ID="RememberMe" runat="server" Text="Recordar password" meta:resourcekey="RememberMeResource1"></asp:CheckBox></td>-->
<td style="width:5px"></td>
<td style="text-align:center; width:130px;">
<br />
<asp:Button ID="Submit" runat="server" Width="50px" Text="Entrar"
BackColor="Bisque" CommandName="Login" ValidationGroup="Login" meta:resourcekey="SubmitResource1" />
</td>
<td style="width:5px" align="right"> </td>
</tr>
</table>
<div style="border-top: solid 1px black; margin-top: 1px; padding-top: 1px; text-align:center">
<asp:HyperLink ID="lnkRegister" runat="server" NavigateUrl="~/Register.aspx" meta:resourcekey="lnkRegisterResource1">Crear nueva cuenta</asp:HyperLink><br />
<asp:HyperLink ID="lnkPasswordRecovery" runat="server" NavigateUrl="~/PasswordRecovery.aspx" meta:resourcekey="lnkPasswordRecoveryResource1"></asp:HyperLink>
</div>
</LayoutTemplate>
</asp:Login>
</AnonymousTemplate>
<LoggedInTemplate>
<div id="welcomebox">
<asp:LoginName ID="LoginName1" runat="server" ForeColor="White" FormatString="Bienvenido, {0}" meta:resourcekey="LoginName1Resource1" /><br />
<small>
<asp:HyperLink ID="lnkProfile" runat="server" Text="Editar Perfil" NavigateUrl="~/GeneralProfile.aspx" meta:resourcekey="lnkProfileResource1" /><br />
<asp:LoginStatus ID="LoginStatus1" Runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Default.aspx" meta:resourcekey="LoginStatus1Resource1" />
</small>
</div>
</LoggedInTemplate>
</asp:LoginView>
</div>
<!-- End Login Box -->
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="LoginView1" />
</Triggers>
</asp:UpdatePanel>
<div id="menu">
<!-- Menu -->
<asp:Menu ID="headMenu" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" CssClass="menuStyle"
DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" >
<StaticMenuStyle CssClass="staticMenu" />
<StaticMenuItemStyle CssClass="staticMenuItem" />
<StaticHoverStyle CssClass="staticHover" />
<StaticSelectedStyle CssClass="staticSelected" />
<DynamicMenuStyle CssClass="dynamicMenu" />
<DynamicMenuItemStyle CssClass="dynamicMenuItem" />
<DynamicHoverStyle CssClass="dynamicHover" />
<DynamicSelectedStyle CssClass="dynamicSelected" />
</asp:Menu>
<!-- End Menu -->
</div>
</div>
<!-- End Header -->
...
...
...
