Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde amigos,
Fiz um layout usando CSS, mas quando visualizo a pagina no IE 6 o as DIVS ficam todas posicionadas certinhas sem problemas, mas quando visualizo no IE 7 duas DIVS ficam fora de posição, como posso resolver isso amigos?
index.asp
>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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">](http://www.w3.org/1999/xhtml%22)
<head>
<title></title>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems*.className == "menuparent") {*
* navItems**.onmouseover=function() { this.className += " over"; }*
* navItems**.onmouseout=function() { this.className = "menuparent"; }*}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body {
font: normal 70% verdana;
margin-left: 0px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
width:auto;
}
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 130px; / Width of Menu Items /
border-bottom: 1px solid #000000;
background: #DFF2FF; / Cor de fundo dos menus /
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #000;
padding: 4px;
border: 1px solid #FFFFFF;
border-bottom: 0;
}
/ Fix IE. Hide from IE Mac \/
** html ul#primary-nav li { float: left; height: 1%; }*
** html ul#primary-nav li a { height: 1%; }*
/ End /
ul#primary-nav ul {
position: absolute;
display: none;
left: 129px; / Set 1px less than menu width /
top: 0;
}
ul#primary-nav li ul li a { padding: 4px 5px; } / Sub Menu Styles /
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } / Hide sub-menus initially /
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } / The magic /
ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #CCCCCC; }
ul#primary-nav li a:hover { color: #0066FF; }
*</style>*
*<meta **http**-equiv="Content-Type" content="text/html; charset=iso-8859-1">*
*<link rel="stylesheet" href="css/layout.css" type="text/css" />*
*</head>*
*<body>*
*<div id="total">*
*<div id="pagewidth" >*
* <div id="header"><img src="imagens/jpeg/topo.jpg" width="766" height="162" /></div>*
* <div id="wrapper" class="clearfix" > *
* <div id="maincol" >*
* <p>*
* <iframe id="principal" name="principal" width="650" height="400" scrolling="No" frameborder="0" marginwidth="0" marginheight="0"></iframe>*
* </p>*
* </div>*
*<div id="leftcol">*
*<ul id="primary-nav">*
* <li class="menuparent"><a href="busca.asp" target="principal">:: Home </a></li>*
* <li class="menuparent"><a href="busca.asp" target="principal">:: Procedimentos</a> </li>*
* <li class="menuparent"><a href="cad_proc.asp" target="principal">:: Organograma </a></li>*
* <li class="menuparent"><a href="" target="principal">:: Metodologia </a></li>*
* <li class="menuparent"><a href="" target="principal">:: Turma </a></li>*
*</ul>*
* </div>*
*</div>*
*<div id="rodape">*Help Desk 2200
*</div>*
*</div>*
*</div>*
*</body>*
*</html>**layout.css** *
>
/ generated by csscreator.com /
html, body{
margin:5;
padding:5;
text-align:center;
width:: 766px;
}
#total{
width:766px;
text-align:left;
margin-left:auto;
margin-right:auto;
border: 0px solid #000000;
}
#pagewidth{
width:700px;
text-align:left;
margin-left:auto;
margin-right:auto;
border: 1px solid #000000;
}
#header{
position:relative;
height:80;
background-color:#FFFFFF;
width:766px;
}
#leftcol{
width:130px;
float:left;
position:relative;
background-color:#F8F8F8;
height: 600px;
border: 0px solid #000000;
}
#maincol{
background-color: #FFFFFF;
float: center;
display:inline;
position: absolute;
width:541px;
left: 171px;
top: 184px;
height: 353px;
}
#rodape{
height:40px;
background-color:#DFF2FF;
clear:both;
width:700px;
position: relative;
}
/ *** Float containers fix:*
http://www.csscreator.com/attributes/containedfloat.php* *** /
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/ Hides from IE-mac \/
** html .clearfix{height: 1%;}*
.clearfix{display: block;}
/ End hide from IE-mac /
/printer styles/
@media print{
/hide the left column when printing/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Vlw amigos...
Carregando comentários...