Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia!
Pessoal é o seguinte, eu estou desenvolvendo um site para no mínimo IE8, só que tive que fazer para no mínimo IE7, e o menu horizontal ele tem um sub menu em cada item, e esse sub menu fica atrás do banner principal apenas no IE7.
HTML do cabeçalho (no qual está o menu) e o banner
<div class="content_top_header">
<!-- logo -->
<a href="index.php" class="logo"></a>
<span class="subtitle_logo">a tecnologia a favor<br />do homem do campo!</span>
<ul id="menu">
<!-- button 01 -->
<li>
<a class="menu_title" href="javascript: void(0);">
produtos
</a>
<ul id="menu_list">
<li>
<a href="produto.php">
cata-capim
</a>
</li>
<li>
<a href="produto.php">
vagão forrageiro
</a>
</li>
<li>
<a href="produto.php">
concha
</a>
</li>
<li>
<a href="produto.php">
desensilador
</a>
</li>
<li>
<a href="produto.php">
raspo
</a>
</li>
</ul>
</li>
<!-- button 02 -->
<li>
<a class="menu_title" href="javascript: void(0);">
indústria
</a>
<ul id="menu_list">
<li>
<a href="empresa.php">
conheça a schemaq
</a>
</li>
<li>
<a href="qualidade.php">
qualidade
</a>
</li>
</ul>
</li>
<!-- button 03 -->
<li>
<a class="menu_title" href="javascript: void(0);">
programa
</a>
<ul id="menu_list">
<li>
<a href="trabalhe_conosco.php">
trabalhe conosco
</a>
</li>
<li>
<a href="financiamento.php">
financiamento
</a>
</li>
<li>
<a href="eventos.php">
eventos
</a>
</li>
<li>
<a href="seja_um_representante.php">
seja um representante
</a>
</li>
<li>
<a href="seja_um_representante.php">
seja um representante
</a>
</li>
<li>
<a href="seja_um_representante.php">
seja um representante
</a>
</li>
</ul>
</li>
<!-- button 04 -->
<li>
<a class="menu_title" href="javascript: void(0);">
imprensa
</a>
<ul id="menu_list">
<li>
<a href="download.php">
Materiais
</a>
</li>
<li>
<a href="login.php">
download
</a>
</li>
<li>
<a href="download.php">
área do cliente
</a>
</li>
</ul>
</li>
<!-- button 05 -->
<li>
<a class="menu_title" href="javascript: void(0);" style="margin-right: 0px;">
contato
</a>
<ul id="menu_list">
<li>
<a href="contato.php">
fale conosco
</a>
</li>
</ul>
</li>
</ul>
<p id="bread_crumb">
<a href="index.php">
<span>home</span>
</a>
| <a href="javascript: void(0);">
<span>produtos</span>
</a>
| <span>nome do produto</span>
</p>
</div>E o CSS (sem hack para IE7):
.content_top_header {
display: block;
height: 100px;
position: relative;
width: 940px;
}
.logo {
background: url("../../image/default/header/logo.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 80px;
margin-left: 20px;
margin-top: -30px;
width: 215px;
} background-position: 0 -80px;
}
.subtitle_logo {
display: block;
font-size: 11px;
margin-left: 20px;
text-align: center;
text-transform: uppercase;
width: 215px;
}
.fundo_menu {
background: -moz-linear-gradient(top, #FFF100, #FFCC05) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF100), to(#FFCC05)) repeat-X;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05);
border-radius: 5px 5px 5px 5px;
height: 35px;
margin-left: 425px;
margin-top: -58px;
position: absolute;
width: 515px;
}
#menu {
float: right;
margin-top: -58px;
min-width: 445px;
overflow: visible;
padding: 7px;
position: relative;
width: auto;
} display: inline-block;
margin-top: 6px;
} background: url("../../image/default/header/arrow.png") no-repeat scroll 8px -12px transparent;
border-radius: 3px 3px 0px 0px;
color: #4e4e4e;
font-family: 'Swis721', arial;
font-size: 11px;
margin-right: 4px;
padding: 7px 10px 11px 20px;
text-transform: uppercase;
}#menu .class-for-ie7 .menu_title {
}
#menu li a:hover {
background: url("../../image/default/header/arrow.png") no-repeat scroll 8px 11px #4C4C4C;
color: #FFFFFF;
font-family: 'Swis721', arial;
text-decoration: none;
} background: url("../../image/default/header/menu_.png") repeat scroll 0 0 transparent;
display: none;
margin-top: 11px;
min-width: 120px;
position: absolute;
width: auto;
z-index: 1;
} display: block;
margin: 0;
} background: none repeat scroll 0 0 transparent;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: inline-block;
font-family: arial;
font-weight: normal;
height: 10px;
margin-right: 0;
padding: 4px 10px 9px 15px;
text-decoration: none;
text-transform: capitalize;
position: relative;
z-index: 999;
} background: url("../../image/default/header/menu_hover.png") repeat scroll 0 0 transparent;
text-decoration: none;
} background: none repeat scroll 0 0 transparent;
text-decoration: none;
font-family: arial;
}#rotating_banner {
background: url("../../image/default/header/temp.png") no-repeat scroll center top #CCCCCC;
display: block;
height: 420px;
position: relative;
width: 940px;
}
#menu_list {
border-radius: 0px 3px 3px 3px;
}
#bread_crumb {
float: right;
} color: #797A7C;
} color: #006F3D;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}CSS com hack para IE7
.content_top_header {
display: block;
height: 100px;
position: relative;
width: 940px;
}
.logo {
background: url("../../image/default/header/logo.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 80px;
margin-left: 20px;
margin-top: -30px;
width: 215px;
} background-position: 0 -80px;
}
.subtitle_logo {
display: block;
font-size: 11px;
margin-left: 20px;
text-align: center;
text-transform: uppercase;
width: 215px;
}
.fundo_menu {
background: -moz-linear-gradient(top, #FFF100, #FFCC05) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF100), to(#FFCC05)) repeat-X;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05);
border-radius: 5px 5px 5px 5px;
height: 35px;
margin-left: 425px;
margin-top: -58px;
position: absolute;
width: 515px;
}
#menu {
float: right;
margin-top: -58px;
min-width: 445px;
overflow: visible;
padding: 7px;
position: relative;
*position: absolute;
*margin-left: 425px;
width: auto;
} display: inline-block;
*display: inline;
margin-top: 6px;
} *position: relative;
*z-index: 100;
} background: url("../../image/default/header/arrow.png") no-repeat scroll 8px -12px transparent;
border-radius: 3px 3px 0px 0px;
color: #4e4e4e;
font-family: 'Swis721', arial;
font-size: 11px;
/*font-weight: bold;*/
margin-right: 4px;
padding: 7px 10px 11px 20px;
text-transform: uppercase;
}#menu .class-for-ie7 .menu_title {
*padding: 7px 6px 4px 18px;
} background: url("../../image/default/header/arrow.png") no-repeat scroll 8px 11px #4C4C4C;
color: #FFFFFF;
font-family: 'Swis721', arial;
text-decoration: none;
} background: url("../../image/default/header/menu_.png") repeat scroll 0 0 transparent;
display: none;
margin-top: 11px;
min-width: 120px;
position: absolute;
width: auto;
z-index: 1;
*margin-top: 25px;
*margin-left: -17%;
*z-index: 10000000000;
} display: block;
*position: relative;
*z-index: 10000000000;
margin: 0;
} background: none repeat scroll 0 0 transparent;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: inline-block;
*display: block;
font-family: arial;
font-weight: normal;
height: 10px;
margin-right: 0;
padding: 4px 10px 9px 15px;
text-decoration: none;
text-transform: capitalize;
position: relative;
z-index: 999;
} background: url("../../image/default/header/menu_hover.png") repeat scroll 0 0 transparent;
text-decoration: none;
} background: none repeat scroll 0 0 transparent;
text-decoration: none;
font-family: arial;
}#rotating_banner {
background: url("../../image/default/header/temp.png") no-repeat scroll center top #CCCCCC;
height: 420px;
position: relative;
width: 940px;
*z-index: 1;
}
#menu_list {
border-radius: 0px 3px 3px 3px;
}
#bread_crumb {
float: right;
} color: #797A7C;
} color: #006F3D;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}Desde já agradecido! :D
Carregando comentários...