[Resolvido] Problema Layout Firefox x IE + CSS
Bom dia amigos, estou montando um layout utilizando somente CSS, porém estou com um problema, no IE a DIV do meio que será onde irei inserir forms, está ficando de forma correta, porém no Firefox a DIV do meio, invade a area que sera a div do menu. Aqui segue o link dos layouts.
http://img29.imageshack.us/gal.php?g=23029184.jpg
É a primeira vez que começo a usar CSS. Segue tb os codigos, se alguem puder mim ajudar, desde já agradeço pela atenção.
<!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)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Templates</title>
<link rel="stylesheet" type="text/css" href="arquivo.css"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css"><!--
a:link {
color: #005C96;
}a:hover {
color: #005C96;
}a:active {
color: #005C96;
}-->
</style></head>
<body>
<div id="geral"><br/>
<div id="cabeçalho">
cabeçalho
</div>
<div id="linha">
linha
</div>
<div id="menuesq">
<div id="menu"><center>MENU</center></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">»CADASTRO</a>
<ul>
<li><a href="#"> »FUNCIONÁRIO</a></li>
<li><a href="#">»USUÁRIOS</a></li>
</ul>
</li>
</ul>
</div>
<div id="menu">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">»AGENDAR</a>
<ul>
<li><a href="#">»AGENDAR</a></li>
<li><a href="#">»ALTERAR</a></li>
<li><a href="#">»EXCLUIR</a></li>
</ul>
</li>
</ul>
</div>
<div id="menu">
<ul id="MenuBar3" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">»RELATÓRIO</a>
<ul>
<li><a href="#">»RELATÓRIO</a></li>
</ul>
</li>
</ul>
</div>
<div id="menu">
<ul id="MenuBar4" class="MenuBarVertical">
<li><a href="#">»LOGOFF</a> </li>
</ul>
</div>
</div>
<div id="meio"><br />
meio conteudoddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
conteudodddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<div id="rodape">
rodape</div>
</div>
<script type="text/javascript"><!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});//-->
</script>
</body>
</html>Aqui o arquivo.css
div{
border:1 solid black;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}div#geral{
margin:0 auto;
width:700px;
margin-right:auto;
margin-left:auto;
}div#cabeçalho{
height:150px;
background:#66FF99;
/*background-position:center;*/
}div#menuesq{
width:100px;
height:200px;
float:left;
/*background:#993300;*/
border:1px;
}div#rodape{
width:700px;
float: left;
background:#66FF99;
}div#meio{
width:: 300px;
height:300px;
float:rigth;
background:#666699;
padding-top:inherit;
padding: 10px;
}div#menu{
border:1px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
}Discussão (3)
Carregando comentários...