Cada Navegador mostra uma coisa
Estou a 2 dias apanhando com esses infelizes do tableless e webstandard. Na teoria é muito lindo, rápido e elegante, na prática um parto pra fazer. Nada roda certo, cada Browser faz oq quer, cada um interpreta da maneira que bem entende. Então pergunto PARA QUE PADRÃO WEB (Webstandard)?
Deixando minha revolta de lado vamos ao problema..
To tentando fazer um layout de teste, para resolver problemas de posicionamento de DIVs no meu trabalho, só que cada navegadou ou div se comportam de maneiras diferentes.
Vejam o CSS da div MARCA e da div MENU, vejam que elas usam as mesmas formas de posicionamento, a div Marca funciona no FF e no IE ja a div MENU não. A pegunta que ñ quer calar. Pq essa Frecurite Crônica Agúda?
Estou usando <ul><li> Pq elas ñ funcionam como quero? Abaixo vai o Código CSS e o HTML. Se vcs puderem me ajudar a resolver esse prob. quero muito aprender essa nova webstandard mas se isso for ficar nisso prefiro 100000000 de vezes fazer o "Webstandard padão" que era usado nos primódios da web
indice.css
/ CSS INDICE - Página Pincipal/ { margin: 0; / zerando as margens do body / padding: 0; / zerando os paddings do body */ text-decoration: none; text-align: center;}body{ background-color: #FFFFFF; color: #000000; font: 12pt Verdana, Tahoma, Arial;}#principal{ width:700px; position: relative; margin: 0px auto; height:580px; background-color:#0099CC; display:block;}#marca{ width: 120px; height:50px; position: relative; margin: 0px auto; display:block; top: 6%; left: 40%;}#menu{ width: 450px; height: 450px; position: relative; background-color: #EEEEEE; border: 1px solid #999999; display:block; top: 5%; left: 1%;}h1{ font: bold 400% Verdana, Tahoma, Arial; color: #FFFFFF; text-decoration: underline;}h2, h3, h4{ color: navy; text-decoration: none; position: relative; }h2{ font: bold 410% Verdana, Tahoma, Arial; letter-spacing: 5px; }h3{ font: bold 310% Verdana, Tahoma, Arial; letter-spacing: 4px; }h4{ font: bold 112% Verdana, Tahoma, Arial; }p { text-align: left; }ul { text-align: left; font: bold 8pt Verdana, Tahoma, Arial; color: #000000;}ul li { text-align: left; list-style-type: disc; font: bold 8pt Verdana, Tahoma, Arial; color: #000000; }ul li a:link { text-decoration: none; font: bold 8pt Verdana, Tahoma, Arial; color: #000000; }ul li a:hover { text-decoration: underline; font: bold 8pt Verdana, Tahoma, Arial; color: #000000; }
index.html
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="description" content="Guia Prático de WEB 2.0" /><meta name="keywords" content="Webstandard, Web2.0, CSS, XHTML, Tabeless" /><meta name="resource-type" content="document" /><meta name="language" content="pt-br" /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="css/indice.css" type="text/css"/></head><body><div id="principal"> <h1>WEB 2.0</h1> <div id="menu"> <h4>Guia rápido para uma estratégia</h4> <h2>WEB 2.0</h2> <h3>de sucesso</h3> <p><br /><b>Neste guia, você descobrirá:</b></p> <ul> <li><a href="#">O que é Web 2.0.</a></li> <li><a href="#">Por que a Web 2.0 é importante.</a></li> <li><a href="#">O que a Web 2.0 significa para uma Empresa.</a></li> <li><a href="#">Cinco técnicas para usar a Web 2.0 como forma de reinventar o relacionamento com seus clientes.</a></li> <li><a href="#">Dez maneiras de tirar vantagem da Web 2.0.</a></li> <li><a href="#">As linguagens e tecnologias da nova Web.</a></li> <li><a href="#">Como fazer uma aplicação rica de sucesso para a Internet (RIA).</a></li> <li><a href="#">Como estabelecer critérios para a escolha dos seus fornecedores.</a></li> <li><a href="#">Artigos, livros, referências para programadores, diretórios de pesquisa, sites de exemplos, recursos e Mashups.</a></li> </ul> </div> <div id="marca"> <a href="[http://validator.w3.org/check?uri=referer">](http://validator.w3.org/check?uri=referer) <img src="[http://www.w3.org/Icons/valid-xhtml10"](http://www.w3.org/Icons/valid-xhtml10) alt="XHTML 1.0 Transitional Válido" height="31" width="88" border="0" /> </a> </div></div></body></html>Discussão (7)
Carregando comentários...