Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Igor FV

Posição de DIVS no IE 7...

Por , em Desenvolvimento frontend

Recommended Posts

Igor FV    0

Igor FV
Postado

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">

<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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Pode compartilhar conosco a solução do problema Igor?Valeu[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito