• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

mapb_1990

Problemas no IE

15 mensagens neste tópico

boas

tou a elaborar um site com tableless, e tou com um probleminha.

no FF td bem, mas no IE nao fica igual. ora vejam: http://www.jcmagina.pt/.

o fundo nao fica centrado, o div do texto principal fica desalinhado, e o o div "ESTADO DA REPARAÇÃO" tb nao fica correto. td no IE  :upset: :upset: 

alguem ajuda?

css

* {
margin:0px;
padding:0px;
}

body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
text-align:justify;
background:#515151 url(../images/bg.gif) repeat scroll 0 0;
padding:0px 0 6px;
}

#header {
margin:0px auto;
width:780px;
background:url(../images/banner.png) no-repeat;
}

#lg {
position: relative;
left:490px;
width:222px;
}

#menu {
margin:0px auto;	
padding: 0;
background:url(../images/menu_bg.png) repeat-x;
width: 780px;
height: 39px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
}

#menu ul {
margin:0px auto;	
padding: 0;
list-style-type: none;
overflow: hidden;
}

#menu li {
display: inline;
margin: 0;
}

#menu li a {
float: left;
display: block;
text-decoration: none;
color: #000;
padding:9px 20px;
vertical-align:middle;
border-color:#dfdfdf;
border-left-color: #ffffff;
border-style: solid;
border-width:1px;
border-bottom:none;
border-top:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
}

#menu li a:hover, #menu li a:active {
background:url(../images/menu_bg2.png) repeat-x;
}

#content {
background:url(../images/bg.png) repeat-x #548fc9;
margin:0px auto;
width:780px;
}

#fotter {
background: url(../images/footer.png) no-repeat;
height:85px;
position: relative;
clear:left;
z-index:10;
margin-top:-50px;
}

#janela {
width:334px;
height:150px;
z-index:5;
margin-left:417px;
clear: right;
}

#janela_topo {
background:url(../images/janela_top.png) no-repeat;
border-bottom:#FFF 1px solid;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:14px;
color:#FFF;
text-transform:uppercase;
padding:8px 20px;
}

#janela_main_right {
float:right;
width:81px;
background-color:#7d8791;
height:150px;
}

#janela_main_left {
background-color:#7d8791;
height:150px;
float:right;
width:253px;
}

#lateral {
float:left;
width:325px;
margin:70px 0 0 20px;
position:relative;
}

#main {
width:464px;
margin-left: 300px;
z-index:5;
position: absolute;
top:260px;
}

#main_ghost {
float: right;
position:relative;
width: 40px;
}

#lateral_main {
background:url(../images/lateral_bg.png);
height:auto;
padding:0 40px 0 20px;
color:#013366;
}

#lateral_top {
background:url(../images/lateral_topo.png) no-repeat;
width:325px;
height:13px;
}

#lateral_bottom {
background:url(../images/lateral_fundo.png)  no-repeat;
width:325px;
height:19px;	
}

#main_main {
height:auto;
padding:0 25px;
background:url(../images/main_bg.png) repeat-y;
}

#main_top {
background:url(../images/main_topo.png) no-repeat;
width:464px;
height:55px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#FFF;
padding:0px 0 0 25px;
line-height:3.0em;
}

#main_bottom {
background:url(../images/main_fundo.png) no-repeat;
width:464px;
height:22px;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

bons dias!

eu também já passei por essa situação e uma solução que encontrei foi colocar um script que só o IE consegue ler, que remete para um outro ficheiro de css  (que tens que criar) que é especifico so para o IE...

o código é este por exemplo:


<!--[if IE 6]>
<link href="style/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

No ficheiro especificamente dedicado ao IE copiei o CSS do FF e fiz as devidas alterações.

Espero que tenha ajudado..

cumprimentos

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ja me lembrei disso mas nao sei o k mudar no css. ja tentei de varias maneiras e nd.

fica sempre igual. (principiante em tableless)  :biggrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Experimenta trabalhar os margins.... utilizando kd achares necessário valores negativos...a mim ajudou-me bastante para o IE. O facto de nao tar horizontalmente centrado experimenta meteres margin-left:auto e margin-right:auto.

Mesmo no FF nao me parece que esteja tudo a 100%.. algumas das divs sao demasiado grande...

O facto de no IE6 ser ver o fundo das imagens (png)tens que colocar um script, para ficarem como se ve no FF

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); }); 
</script>

e dps no css coloca: behavior: url(../scripts/iepngfix.htc);

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
O facto de nao tar horizontalmente centrado experimenta meteres margin-left:auto e margin-right:auto.

ja coloquei de varias maneiras:

#website {
width: 780px;
margin-left:auto;
margin-right:auto;
}

ou

#website {
width: 780px;
margin:0px auto;
}

e não há meio de aquilo ficar centralizado :wallbash:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

já vi que no IE6 o site se encontra centrado. como resolveste a tua situação?? as imagens em png também já estão boas, apesar de aparecer um aviso relacionado com o teu footer.

Agora só falta meteres as áreas dos conteúdos nas posições correctas. talves mais uma vez trabalhar os margins e se calhar mesmo com o width das Noticias e dos texto, que me parecem demasiado largas para a área em que pretendes coloca-los.

continuação de bom trabalho,

Cumprimentos

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

centra o teu site assim

<table cellpadding="0" celsspacing="0" border="0" style="width:100%" >

<tr><td></td>

<td style="width:800px" > site </td>

<td></td>

</table>

isto centrate o site atençao tens que definir o tamanho da tua pagina ao certo na tag do centro convem...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois...mas a questao é que o site esta a ser feito sem recurso a table....so css e divs, que a meu ver também é a melhor opção

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

tambem nao e complicado fazer com divs

faz assim com as divs

<div style="width:100%; text-align:center" >

<div style="width:800px">pagina do site</div>

</div>

podes usar o position:relative; left:xx; top:xx;

e o position:absolute;

para te ajudar tambem a controlar melhor os objectos na pagina

mas tens alguma coisa contra as tables??

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

obrigado a todos que ajudaram.

já esta td ok à excepção do menu, k no ie começa um kito avançado.

alguem sabe o k poderá ser?

resolvi o outro problema assim:

body {
text-align:center;
color:#000;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
background:#515151 url(../images/bg.gif) repeat scroll 0 0;
padding:0px 0 6px;
}

#main {
width:464px;
margin-left: 300px;
_margin-left: -50px;
z-index:5;
position: absolute;
top:260px;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

mas tens alguma coisa contra as tables??

Para questões relacionadas com design sou completamente contra as tabelas.

Não é esse o propósito delas.

mapb_1990... Queres optimizar para que browsers?

Penso que o '_' nao passa no IE7.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

No IE7 e no FF a posição do menu está igual, a única coisa que difere é a caixa de conteúdo - Sobre Nós. No IE7 está completamente desenquadrada para a direita.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

No IE7 e no FF a posição do menu está igual, a única coisa que difere é a caixa de conteúdo - Sobre Nós. No IE7 está completamente desenquadrada para a direita.

:eek:

tens a certeza? é k no meu, já da td direitinho, à excepção do menu, que começa um boca adiantado

kbc6qo.jpg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora