Ir para conteúdo

Arquivado

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

Dark Phoenix

Problema com Divs no Internet Explorer

Por , em Desenvolvimento frontend

Recommended Posts

Dark Phoenix    0

Dark Phoenix
Postado

Boa noite galera,

 

estou com o probema aqui que está me dando uma dor de cabeça das grandes,

fiz um codigo em css que funciona perfeita em firefox, porém quando abro no internet explorer a div fica desconfigurada (como pode ser ver nas imagens)

 

Firefox

 

Internet Explorer

 

Meus Códigos:

 

index.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="reset.css" type="text/css"  />
<link rel="stylesheet" href="style.css" type="text/css"  />

<title>Index</title>
</head>

<body>
<div id="tudo">
<div id="servicos">
	<h2>Serviços</h2>
	<div id="serv">
		<div id="desen_soft">
			<h1>Desenvolvimento de Softwares</h1>
		</div>
		<div id="img_soft">
			<img src="imagens/img.png" width="150" height="150" />
			<div id="txt_soft">
				<h3> Duis est libero, cursus vel scelerisque sed, commodo at sem. Mauris eros augue, posuere a porta in, fringilla ut magna. Suspendisse scelerisque elit at tortor ornare a lobortis nibh sodales. </h3>
				<div id="btn_soft">
					<a href="softwares.html"><img src="imagens/leia.png" width="101" height="28" /></a>
				</div>
			</div>
		</div>
		<div id="desen_site">
			<h1>Desenvolvimento de Sites</h1>
		</div>
		<div id="img_site">
			<img src="imagens/img.png" width="150" height="150" />
			<div id="txt_site">
				<h3>Nulla aliquam enim ut urna molestie convallis. Cras eget magna eros. Ut bibendum tristique libero ullamcorper sollicitudin. Duis est libero, cursus vel scelerisque sed, commodo at sem.</h3>
			<div id="btn_site">
				<a href="sites.html"><img src="imagens/leia.png" width="101" height="28" /></a>
			</div>
		</div>
	</div>
   </div>
</div>
</body>
</html>

 

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

 

style.css

 @charset "utf-8";
/* CSS Document */

body {
margin:0;
padding:0;
background-image:url(imagens/bg.png);
background-repeat:repeat-x;
background-attachment:fixed;
text-align:center; /* hack para o IE */
}
#tudo{
width:960px;
margin:0 auto;         
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */ 
}
#servicos{
margin-top:30px;
width:950px;
height:260px;
background-image:url(imagens/fundo_grande.png);
}
#servicos h2{
text-align:center;
padding-top:3px;
font-family:"Myriad Pro";
font-size:30px;
}
#serv{
height:190px;
width:920px;
margin:15px 15px 15px 15px;

}
#desen_soft{
height:42px;
width:461px;
padding-top:5px;
text-align:center;
font-family:"Myriad Pro";
font-size:25px;
color:#547399;
}
#img_soft{
height:150px;
width:430px;
padding-right:15px;
}
#txt_soft{
   height:138px;
width:280px;
margin-left:165px;
margin-top:-150px;
padding-top:12px;
}
#txt_soft h3{
text-align:justify;
font-family:"Myriad Pro";
font-size:18px;
color:#4e4e4e;
}

#btn_soft {
height:28px;
width:101px;
float:right;
padding-top:3px;
}
#desen_site{
height:30px;
width:461px;
margin-top:-192px;
margin-left:461px;
text-align:center;
font-family:"Myriad Pro";
font-size:25px;
color:#547399;
}
#img_site{
height:150px;
width:309px;
margin-left:475px;
margin-top:11px;
}
#txt_site{
   height:138px;
width:280px;
margin-left:165px;
margin-top:-150px;
padding-top:12px;
}
#txt_site h3{
text-align:justify;
font-family:"Myriad Pro";
font-size:18px;
color:#4e4e4e;
}
#btn_site {
height:28px;
width:101px;
float:right;
margin-top:-29px;
}

 

Alguém tem idéia do que pode estar acontecendo/???

 

Grato desde já.

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Não há necessidade de definir medidas para TODOS os elementos, estude um pouco sobre cascata e herança em CSS.

 

Depois estude sobre box-model para entender como os elementos herdam a largura do elemento pai dependendo do seu display.

 

Se estiver utilizando um doctype válido, não há necessidade desses "hack para IE".

Compartilhar este post

Link para o post
Compartilhar em outros sites

zrageburn    0

zrageburn
Postado

Os subtítulos e seus respectivos conteúdos estão muito soltos... Precisa amarrá-los um pouco mais.

 

Estruture com <dl>, fica muito mais prático... E tem também o esquema que o Evandro Oliveira citou... Você não precisa definir todos os elementos... Pode generalizá-lo, isso economiza muito tempo.

 

Se conseguir, estará reduzindo seu CSS em mais de 50%.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dark Phoenix    0

Dark Phoenix
Postado

Bom galera, agradeço a ajuda dos 2 amigos ae,

fiz o que falaram, e consegui mudar bem o css e o html, utilizando menos div's, e agora o código esta normal em FireFox e Internet Explorer 7 e 8, porém no IE 6 ele acaba ficando desconfigurado novamente, tem algo de diferente pra se tratar com as divs no ie 6?

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