[Resolvido] CSS todo desorganizado no Internet Explorer

[squallxxx 0]

Olá pessoal, sou iniciante em CSS e HTML. Com os codigos CSS que aprendi resolvi criar um site para meu colega. Fui fazendo e visualizando no Mozila Firefox e tudo estava certo. Mas porém quando fui testar no Internet Explorer todas as minhas DIVS ficara desorganizadas.

 

Por Favor me Ajudem!!!!

 

Gostaria de saber também como alinhar a página no centro tanto no IE quanto no Firefox.

 

 

 

ARQUIVO CSS --------------------------------------------------

 

 

* {margin:0; padding:0}

 

 

 

body {

background: orange;

 

}

 

p {

margin: 0 0 0 2;

}

 

h2 {

color:#0000CD;

}

 

#container {

background: white;

width: 900px;

 

 

 

 

}

 

#header {

background: blue;

width: 900px;

}

 

#menu {

background: url("images/backbtn/menubtn2.png") repeat-x;

width: 900px;

}

 

 

#menu ul {

 

list-style-type: none;

margin: 0 0 0 300;

}

 

#menu ul li {

display: inline;

list-style-type: none;

margin: 0 0 0 10;

}

 

#menu ul li a:link{

color: white;

background: url("images/backbtn/menubtn3.png") repeat-x;

text-decoration: none;

}

 

#menu ul li a:hover{

color: white;

background: url("images/backbtn/menuhover3.png") repeat-x;

text-decoration: none;

}

 

#menu ul li a:visited{

color: white;

text-decoration: none;

}

 

#banner {

 

width: 728px;

height: 90px;

margin: 2 auto;

}

 

#sidebar {

margin: 10 0 0 2;

background: white;

width: 161px;

height: 530px;

float: left;

}

 

#sidebar ul {

margin: 0 0 0 5;

}

 

#sidebar ul li {

background: orange;

list-style-type: none;

margin: 2 0 0 0;

border-bottom: 1px solid gray;

border-bottom-width: 1px;

 

}

 

 

 

#sidebar ul li a:link{

text-decoration: none;

color: black;

background: orange;

display: block;

}

 

#sidebar ul li a:hover{

color: black;

background: #FAEBD7 repeat-x;

display: block;

}

 

#sidebar ul a:visited{

color: black;

}

 

#contents {

background: white;

width: 900px;

}

 

#box1 {

margin: 4 0 0 30;

background: white;

width: 376px;

height: 202px;

float: left;

border-right: 1px solid #cbc9c9;

}

 

 

 

#box2 {

margin: 20 40 0 4;

background: white;

width: 260px;

height: 186px;

float: right;

border-bottom: 1px solid #cbc9c9;

}

 

 

#box2 a:link {

color:blue;

text-decoration: none;

}

 

#box2 a:hover {

color:#a8a7a7;

text-decoration: none;

}

 

#box2 a:visited {

color:blue;

 

}

 

#box3 {

 

margin: 4 0 0 4;

background: white;

width: 229px;

height: 160px;

float: left;

border-right: 1px solid #cbc9c9;

}

 

 

#box3 a:link {

color:blue;

text-decoration: none;

}

 

#box3 a:hover {

color:#a8a7a7;

text-decoration: none;

}

 

#box3 a:visited {

color:blue;

 

}

 

#box4 {

margin: 10 0 0 4;

background: white;

width: 240px;

height: 154px;

float: left;

border-top: 1px solid #cbc9c9;

}

 

 

#box4 a:link {

color:blue;

text-decoration: none;

}

 

#box4 a:hover {

color:#a8a7a7;

text-decoration: none;

}

 

#box4 a:visited {

color:blue;

 

}

 

#box5 {

margin: 4 10 0 4;

background: white;

width: 205px;

height: 158px;

float: right;

border-left: 1px solid #cbc9c9;

}

 

 

#box5 a:link {

color:blue;

text-decoration: none;

}

 

#box5 a:hover {

color:#a8a7a7;

text-decoration: none;

}

 

#box5 a:visited {

color:blue;

 

}

 

#box6 {

margin: 4 0 0 4;

background: yellow;

width: 376px;

height: 180px;

float: left;

border-right: 1px solid #cbc9c9;

}

 

#box6 a:link {

color:blue;

text-decoration: none;

}

 

#box6 a:hover {

color:#a8a7a7;

text-decoration: none;

}

 

#box6 a:visited {

color:blue;

 

}

 

#box7 {

margin: 4 4 2 0;

background: white;

width: 310px;

height: 185px;

float: right;

border-left: 1px solid #cbc9c9;

}

 

#box7 a:link {

color:blue;

text-decoration: none;

}

 

#box7 a:hover {

color:#a8a7a7;

text-decoration: none;

}

 

#box7 a:visited {

color:blue;

 

}

 

#footer {

margin: 0 auto;

background: #cbcaca;

width: 860px;

height: 56px;

clear: both;

font-size: 14px;

}

 

ARQUIVO CSS --------------------------------------------------------------

 

 

ARQUIVO HTM---------------------------------------------------

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

 

 

<title></title>

<head>

 

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />

 

</head>

<link rel="stylesheet" type="text/css" href="style.css"/>

 

<body>

 

 

 

 

<div id="container">

 

<div id="header">

<img src="images/header.jpg">

</div>

 

<div id="menu">

 

<ul>

<li><a href="#">Ínicio</a></li>

<li><a href="#">Informações</a></li>

<li><a href="#">Mapa do Local</a></li>

<li><a href="#">Contato</a></li>

<li><a href="#">Reserva Online</a></li>

</ul>

</div>

 

<div id="banner">

 

<embed src="images/banner/banner2.swf" quality="high" width="728" height="90" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

 

</div>

 

<div id="sidebar">

 

<iframe src='http://selos.climatempo.com.br/selos/MostraSelo.php?CODCIDADE=54,56,53&SKIN=padrao' scrolling='no' frameborder='0' width=150 height='170' marginheight='0' marginwidth='0'></iframe>

 

<ul>

<li><a href="#">História do Local</a></li>

<li><a href="#">Informações</a></li>

<li><a href="#">Comidas Típicas</a></li>

<li><a href="#">Mapa / Rota</a></li>

<li><a href="#">Videos</a></li>

<li><a href="#">Serviços Locais</a></li>

<li><a href="#">Site da Prefeitura</a></li>

<li><a href="#">Excursões Anteriores</a></li>

 

</ul>

 

</div>

 

<div id="contents">

 

<div id="box1">

 

 

<embed src="images/slides/portoseguro.swf" quality="high" width="376" height="202" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

 

 

</div>

 

<div id="box2">

<h2>Excursões Anteriores</h2>

<p>Chapada Diamantina,

Itacaré, Ilheus, Recife, Maceio, João Pessoa, Porto Seguro, etc...</p><br>

<a href="#">Clique aqui <br>para maiores

informações.</a>

</div>

 

<div id="box3">

 

<h2>Meios de Pagamento:</h2>

<p>Parcelado em <b>3x</b> de<br>

R$ 150,00 no Carnê.</p><br>

<a href="#">Clique aqui <br>para maiores

informações.</a>

 

</div>

 

<div id="box4">

 

<h2>Transporte:</h2>

<p>Onibus com 42 lugares,

climatizado, extremamente confortáveis e reguláveis.</p><br>

<a href="#">Clique aqui <br>para maiores

informações.</a>

 

</div>

 

<div id="box5">

 

<h2>Próxima Excursão:</h2>

<p><b>Salvador - Paulo Afonso</b>.Veja mais informções e meio de pagamento.</p><br>

<a href="#">Clique aqui <br>para maiores

informações.</a>

 

</div>

 

<div id="box6">

 

<embed src="images/slides/comidas3.swf" quality="high" width="376" height="180" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

 

 

 

</div>

 

<div id="box7">

 

<h2>Dias para Excursão:</h2>

<p><b>Contagem Regressiva para o dia da excursão.</p><br>

<p>Dia 05/04/2012 às 22:00 Horás.</p><br>

<script type="text/javascript">document.write("<span id='pageinval5' style='text-align:center; font-family:arial, helvetica, sans-serif; font-size:14px; color:#ffffff;font-weight:normal;background-color:#000000; padding:7px; margin:0;overflow:visible;border:0px;'></span>");function countdown_load64(){var the_event="";var on_event="Hoje, é a Excursão.";var yr=2012;var mo=05;var da=04;var hr=22;var min=0;var sec=0;var month='';var month=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");var bottom_event="";var now_d=new Date();var now_year=now_d.getYear();if (now_year < 1000)now_year+=1900;var now_month=now_d.getMonth();var now_day=now_d.getDate();var now_hour=now_d.getHours();var now_min=now_d.getMinutes();var now_sec=now_d.getSeconds();var now_val=month[now_month]+" "+now_day+", "+now_year+" "+now_hour+":"+now_min+":"+now_sec;event_val=month[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec;difference=Date.parse(event_val)-Date.parse(now_val);differenceday=Math.floor(difference/(60*60*1000*24)*1);differencehour=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);differencemin=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);differencesec=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);if(document.getElementById('pageinval5')){if(differenceday<=0&&differencehour<=0&&differencemin<=0&&differencesec<=1&&now_day==da){document.getElementById('pageinval5').innerHTML=on_event;}else if (differenceday<=-1){document.getElementById('pageinval5').innerHTML="Event : "+on_event+" : passed";}else {document.getElementById('pageinval5').innerHTML=the_event+" "+differenceday+" dias "+differencehour+" horas "+differencemin+" minutos "+differencesec+" segundos "+bottom_event;} }setTimeout("countdown_load64()",1000);}countdown_load64();</script>

 

 

</div>

 

 

 

</div>

 

<div id="footer">

<p>CopyRight © - 2011 - Todos os direitos reservados.</p>

<p><b>Tel. (71)</b> 3312-XXXX / 8801-XXXX / E-mail: carlosXXXX@hotmail.com </div>

 

 

</div>

 

 

 

 

 

</body>

 

</html>

 

ARQUIVO HTML -------------------------------------------------------------------------------------

[allex_carvalho 124]

Opa, bele?

 

Não entendi bem o layout, mais vi que o menu está na vertical e você definiu 900px de largura para a div menu. Vamos lá. Você não precisava criar uma div com id menu e colocar uma ul lá dentro. O seu codigo fico assim:

<div id="menu">

<ul>

Poderia ter feito assim:

<ul id="menu">

Isso ai é código limpo. Qualquer coisa posta o layout ai também para ver onde mais pode ajudar.

[mateusguitar1 0]

para alinhar nos dois use margin auto no body e na div geral, o resto você alinha como bem entender...

acho que ja resolve assim!

 

abrç.

 

se alguém puder deem uma olhada no meu tópico

 

 

http://forum.imasters.com.br/topic/443553-retomando-topico-jshtml-funcao/page__pid__1751952#entry1751952

 

 

Vlw ^_^

[squallxxx 0]

vlww cara!! aqui o layout!!

 

upei os arquivos aqui:

 

http://www.4shared.com/file/_KdEZsOH/site.html

 

 

por favor se puderem me da uma solução para o site ficar bom nos dois navegadores.!!

[mateusguitar1 0]

ai cara. eu não tinha nada pra fazer! ai resolvi ajudar você, eu ia terminar mais é que eu to indo embora pra minha casa descançar agora hehe, mais eu adiantei algumas coisas!

 

Só uma obs. você não estava colocando px nos margins que você estava dando então era erro constante mesmo. ai eu ja alinhei ele no meio pra se auto ajustar nas resoluções beleza?

 

ta aki o link pra você baixar do meu servidor http://www.arteria.com.br/advogados/arquivos/site.rar

 

Falow cara espero ter ajudado!

 

Abraços... ^_^

[squallxxx 0]

vlwwwwwwwwwww cara brigadão!!!!!!!!!!