Ir para conteúdo

POWERED BY:

Arquivado

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

Maurício T da Silva

[Resolvido] Alinhamento CSS no IE9.

Por , em Desenvolvimento frontend

Recommended Posts

Maurício T da Silva    0

Maurício T da Silva
Postado

Estou criando meu primeiro site em CSS ele esta funcionando perfeitamente em todos os navegadores menos no IE9.

Veja os código ele pode ser acessado em www.ag-odontologia.com.br/2011

 

style.css

@charset "UTF-8";
/* CSS Document */
html {
    overflow: -moz-scrollbars-vertical;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
color: #999999;
}

body {
   background: url("../images/bg.gif") repeat-y 50%;
   margin-left: auto;
   margin-right: auto;
   padding: 0 12px;
margin-top: 0px;
   width: 1000px;
border-bottom: solid 2px #eae9e9;
border-top: solid 2px #eae9e9;
}
/* LARANJA ff9600 */
/* CINZA ESCURO C6C6C6 */
/* CINZA MAIS ESCURO 363636 */
/* CINZA  EAE9E9 */

h1 {
background: url(../images/ico_puce.gif) no-repeat left;
padding-left: 40px;
font-variant: small-caps;
border-bottom: solid 1px #eae9e9;
margin-bottom: 10px;
padding-bottom: 3px;
}

h4 {
text-align: center;
color: #ff9600;
font-variant: small-caps;
font-size: 0.8em;
margin-bottom: 5px;
}

strong {
color: #ff9600;
font-weight: normal;
}

ul {
list-style-type: none;
}

#cabecalho {
          background: url("../images/header_bg.gif") repeat-x;
          width: 1000;
          height:110;
          float: left;
}

#logotipo {
         width: 250;
         float: left;
         background: url(../images/logo.gif) no-repeat left;
         margin-left: 10px;
         margin-top: 30px;
         height: 50px;
         padding: 10 10px;
/*          border: 1px solid red; */
}
#tituloempresa {
color: #ff9600;
font-size: 1.6em;
padding-left: 50px;
}

#nomeempresa {
color: #999999;
font-size: 1.6em;
padding-left: 0px;
}

#slogan {
float: right;
font-size: 0.8em;
}

#topo {
     width: 250;
     float: right;
     margin-top: 40px;
     height: 30px;
     padding: 10 10px;
/*      border: 1px solid red; */
}

#home {
background: url(../images/ico_home.gif) no-repeat left;
padding-left: 20px;
padding-top: 3px;
}

#pesquisa {
background:url(../images/ico_search.gif) no-repeat left;
padding-left: 20px;
padding-top: 3px;
}

#mapa {
background:url(../images/ico_map.gif) no-repeat left;
padding-left: 20px;
padding-top: 3px;
}
#menu {
     width: 250;
     height: 190;
     float: left;
     margin-top: 10px;
     padding: 0 0px;
/*      border: 1px solid red; */
}

#menu li {
border-bottom: solid 1px #eae9e9;
border-right: solid 1px #eae9e9;
text-align: right;
margin-bottom: 2px;
list-style-type: none;
font-size: 0.8em;
}

li a.link_menu:link, li a.link_menu:visited {
display: block;
width: 220px;
background: url(../images/ico_arrow_orange.gif) no-repeat left;
padding: 5px 15px;
font-weight: bold;
font-variant: small-caps;
text-decoration: none;
}

li a.link_menu:hover, li a.link_menu:active {
display: block;
width: 220px;
background: url(../images/ico_arrow_grey.gif) no-repeat left #f8f8f8;
color: #ff9600;
padding: 5px 15px;
font-weight: bold;
font-variant: small-caps;
text-decoration: none;
}

#banner {
     width: 740;
     height: 205;
     float: left;
     margin-left: 3px;
/*      border: 1px solid red; */
}

#conteudo {
background: url(../images/bottom_menu.gif) repeat-x top;
width: 1000px;
   float: left;
border-bottom: solid 5px #eae9e9;
padding-bottom: 20px;
/*	border: 1px solid blue; */
}

#pagina {
     width: 760;
     float: left;
/*      border: 1px solid green; */
}

#imagem {
     width: 190;
     height: 200;
     float: left;
     padding: 10 10px;
/*      border: 1px solid red; */
}

#informacao {
     width: 730;
     float: left;
     padding: 10 10px;
/*      border: 1px solid red; */
}

#materia {
background: url(../images/bottom_menu.gif) repeat-x top;
     width: 730;
     height: 200;
     float: left;
     padding: 10 10px;
     border: 1px solid pink;
}

#materiaquadro {
              width:200px;
              float: left;
              margin-left: 35px;
}

.borda_acima {
overflow: hidden;
background: url(../images/top_frame.gif) no-repeat;
height: 10px;
}

#borda_lateral {
width: 190px;
height: 140px;
background: url(../images/middle_frame.gif) repeat-y;

}

.pm {
   margin: 10 10 10 10;
}

.borda_inferior {
overflow: hidden;
background: url(../images/bottom_frame.gif) no-repeat;
height: 10px;
}

.clear {
clear: both;
}

a.link_right:link, a.link_right:visited {
float: right;
margin-right: 15px;
color: #ff9600;
margin-top: 2px;
font-size: 0.7em;
}

a.link_right:hover, a.link_right:active {
float: right;
margin-right: 15px;
color: #ff9600;
margin-top: 2px;
text-decoration: underline;
font-size: 0.7em;

}

#noticia {
     width: 200;
     float: left;
     padding: 10 10px;
/*      border: 1px solid yellow; */
}

em{
color: #ff9600;
font-style: normal;
font-weight: bold;
}

#copy {
    width: 1000;
}

.copytexto
{
text-align: center;
font-variant: small-caps;
font-size: 0.6em;
}

Meu index.htm

<HTML>
     <HEAD>
           <TITLE>
                  AG Odontologia
           </TITLE>
           <link rel="stylesheet" type="text/css" href="css/style.css" />
     </HEAD>
     <BODY>
           <div id="cabecalho">
                <div id="logotipo">
                     <span id="tituloempresa">AG</span>
                     <span id="nomeempresa">Odontologia</span>
                     <span id="slogan">Seu sorriso é o SEU sucesso!</span>
                </div>
                <div id="topo">
                     <span id="home">Home</span>
                     <span id="pesquisa">Pesquisa</span>
                     <span id="mapa">Mapa</span>
                </div>
           </div>
           <div id="menu">
                <ul>
				<li><a href="javascript:showPage('_about.htm', '');" class="link_menu">Clinica</a></li>
				<li><a href="javascript:showPage('_news.htm', '');" class="link_menu">Serviços</a></li>
				<li><a href="javascript:showPage('_service.htm', '');" class="link_menu">Doutores</a></li>
				<li><a href="javascript:showPage('_solutions.htm', '');" class="link_menu">Horários</a></li>
				<li><a href="javascript:showPage('_jobs.htm', '');" class="link_menu">Novidades</a></li>
				<li><a href="javascript:showPage('_partner.htm', '');" class="link_menu">Contato</a></li>
               </ul>
           </div>
           <div id="banner">
           <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="740" height="200" id="banner" align="middle">
			<param name="movie" value="flash/banner.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#ffffff" />
			<param name="play" value="true" />
			<param name="loop" value="true" />
			<param name="wmode" value="window" />
			<param name="scale" value="showall" />
			<param name="menu" value="true" />
			<param name="devicefont" value="false" />
			<param name="salign" value="" />
			<param name="allowScriptAccess" value="sameDomain" />
			<!--[if !IE]>-->
			<object type="application/x-shockwave-flash" data="flash/banner.swf" width="740" height="200">
				<param name="movie" value="banner.swf" />
				<param name="quality" value="high" />
				<param name="bgcolor" value="#ffffff" />
				<param name="play" value="true" />
				<param name="loop" value="true" />
				<param name="wmode" value="window" />
				<param name="scale" value="showall" />
				<param name="menu" value="true" />
				<param name="devicefont" value="false" />
				<param name="salign" value="" />
				<param name="allowScriptAccess" value="sameDomain" />
			<!--<![endif]-->
				<a href="http://www.adobe.com/go/getflash">
					<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
				</a>
			<!--[if !IE]>-->
			</object>
			<!--<![endif]-->
		</object>
           </div>
           <div id="conteudo">
           <div id="pagina">
                <div id="informacao">
				<h1> Nossa Clínica</h1>
                <div id="imagem">
                     <img id="photo_compagny" align="left" src="images/company-xhdzy.jpg" width="180" height="120" alt="company xhdzy" title="photo_compagny" />
                </div>

				<p><strong>Conforto e comodidade.</strong><br />
				Nossa clínica trabalha para atende-lo...clínica trabalha para atende-lo...clínica trabalha para atende-lo...clínica trabalha para atende-lo...clínica trabalha para atende-lo...clínica trabalha para atende-lo...clínica trabalha para atende-lo...<br />
				<br />
				<strong>Normas e saúde.</strong><br />
				Há mais de -- anos instalada no mesmo endereço atendemos você respeitando todas as normas de segurança e higiene...mais de -- anos instalada no mesmo endereço atendemos você respeitando todas as normas de segurança e higiene...</p>
                </div>
                <div id="materia">
                <h1>Matérias</h1>
                       <div id="materiaquadro">
                       <div class="borda_acima"></div>
					<div id="borda_lateral"><h4> Escovando corretamente</h4>
					<div class="pm">Quando escovamos os dentes corretamente estamos prevenindo várias doenças ...</div><a href="#" class="link_right"> Leia mais! >></a>
                       <div class="clear"></div></div>
					<div class="borda_inferior"></div>
                       </div>
                       <div id="materiaquadro">
                       <div class="borda_acima"></div>
					<div id="borda_lateral"><h4> Fio dental</h4>
					<div class="pm">O Fio Dental previne doenças na gengiva que podem atingir a raiz do dente ...</div><a href="#" class="link_right"> Leia mais! >></a>
					<div class="clear"></div></div>
					<div class="borda_inferior"></div>
                       </div>
                       <div id="materiaquadro">
					<div class="borda_acima"></div>
					<div id="borda_lateral"><h4> Marque sua Visita</h4>
					<div class="pm">Visite seu dentista regularmente agindo de forma preventiva isso gera saúde e ...</div><a href="#" class="link_right"> Leia mais! >></a>
					<div class="clear"></div></div>
					<div class="borda_inferior"></div>
					</div>
                </div>
           </div>
           <div id="noticia">
				<h1>Notícias</h1>
				<p> <em> 22/07/2011</em><br>
                   <strong> Higiene </strong> <br />
				<a href="javascript:showPage('_new.htm', '');"> Novas regra para o calçado de pacientes em clinicas Odontologicas ...</a><br /><br>
				</p>
				<p> <em> 13/05/2011</em><br>
                   <strong> Propaganda enganosa </strong> <br />
				<a href="javascript:showPage('_new.htm', '');"> Clínicas são autuadas e fechadas por propaganda irregular ...</a><br /><br>
				</p>
				<p> <em> 08/14/2011</em><br>
                   <strong> Nova técnica </strong> <br />
				<a href="javascript:showPage('_new.htm', '');"> Pesquisadores brasileiros desenvolvem nova técnologia eliminação das caries ...</a><br /><br>
				</p>
				<a href="javascript:showPage('_news.htm', '');" class="link_right"> All News >></a>
				<div class="clear"></div>
           </div>
           </div>
           <div id="copy">
                <div class="copytexto">Copyright 2011, AG Odontologia<br>
                Desenvolvido por Maurício Teixeira
           </div>
     </BODY>
</HTML>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Adicione um DOCTYPE, e valide a marcação e o css no w3c.

 

siga as instruções do post #2:

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__findpost__p__1613498

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