Logo Hardware.com.br
Etinin
Etinin Veterano Registrado
1.3K Mensagens 34 Curtidas

Problema na visualização de página no IE

#1 Por Etinin 15/08/2006 - 18:20
Pessoal, tô fazendo um layout pra uma página especial que só vai ter texto no meio, como o layout não vai ser compartilhado com provavelmente nenhum outro link fiquei com preguiça de fazer um CSS e fiz uma tabela no Dreamweaver mesmo (notem que não sei usá-lo mto bem), mas não consigo fazer funfar de geito nenhum com o IE, só com o FF.
Abaixo imagem mostrando a página correta à esquerda no FF e à direita a página com colunas de tamanho errado no IE (clique para aumentar).

problemals2.th.jpg

E aqui vai o código fonte:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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



<style type="text/css">

<!--

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

}

-->

</style></head>



<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

  <colgroup>

  <col span="1" width="58">

  <col span="1" >

  <col span="1" width="58">

  </colgroup>

  <tr>

    <td height="95" colspan="3" style="background: url(page-bg-top.jpg)">&nbsp;</td>

  </tr>

  <tr>

    <td height="46" colspan="3" style="background: url(border-top.gif)"><img src="border-top-right.gif" alt="Border" width="140" height="46" align="right"><img src="border-top-left.gif" width="140" height="46" align="left" alt="Border"></td>

  </tr>

  <tr>

    <td colspan="1" width="58" style="background: url(border-left.gif)"></td>

    <td colspan="1" style="background: url(parch-dark.jpg)"><p>&nbsp;</p></td>

    <td colspan="1" style="background: url(border-right.gif)"></td>

  </tr>

  <tr>

    <td height="76" colspan="3" style="background: url(border-bot.gif)"><img src="fixbot.gif" width="132" height="76" align="left" alt="Border"><img src="fixbotright.gif" alt="Border" width="132" height="76" align="right"></td>

  </tr>

</table>

</body>

</html>


Agradeço desde já por qualquer ajuda.

EDIT: Documento agora totalmente de acordo com os padrões do HTML e sem nenhum erro ou aviso ao ser validado, só o cocô da M$ mesmo pra não obedecer os padrões da linguagem...
problema pagina compartilhado texto especial ff ie layout visualizacao
Core 2 Quad Q6600 | Asus P5Q Deluxe | 2GB RAM | XFX 9800GTX+ | Unicomp SpaceSaver
Gentoo Linux / Windows 7

MacBook Pro 13" (2010) - Core 2 Duo 2.4 GHz | 4GB RAM | GeForce 320M
Darwin/x86 (Mac OS X 10.7)

iPhone 4 - Apple A4 (Cortex-A8 1GHz) | 512MB RAM | 16GB SSD
Darwin/ARM (iOS 5)
DCNunes
DCNunes General de Pijama Registrado
1.8K Mensagens 404 Curtidas
#2 Por DCNunes
15/08/2006 - 19:45
O que eu percebi de estranho:
- col tem largura 58px: o certo é somente 58;
- atributo background: não existe em html. Mesmo que vários navegadores dêem suporte, não sei se são todos. É preferível usar style="background: url(endereço_da_imagem)"

Note que a tabela tem largura 100%. No seu teste a largura da janela do Firefox é menor que a do IE. O que acontece quando aumenta a largura no Firefox?
observe.png Fat chance: Fructose 2.0 observe.png
Etinin
Etinin Veterano Registrado
1.3K Mensagens 34 Curtidas
#3 Por Etinin
15/08/2006 - 20:11
Esse px nem sei pq eu coloquei, e tentei tirar o px e com qualquer tamanho de janela o efeito fica o mesmo em ambos os navegadores.
Tô usando porcentagens exatamente para poder funcionar em qualquer resolução e tamanho de janela, coisa que eu não queria abrir mão.
E valeu pelo toque do background, sabia q era inválido, mas não conhecia outra alternativa e essa não é a causa do problema né.
Vô fazer as duas correções e atualizo o post lá em cima.
Core 2 Quad Q6600 | Asus P5Q Deluxe | 2GB RAM | XFX 9800GTX+ | Unicomp SpaceSaver
Gentoo Linux / Windows 7

MacBook Pro 13" (2010) - Core 2 Duo 2.4 GHz | 4GB RAM | GeForce 320M
Darwin/x86 (Mac OS X 10.7)

iPhone 4 - Apple A4 (Cortex-A8 1GHz) | 512MB RAM | 16GB SSD
Darwin/ARM (iOS 5)
DCNunes
DCNunes General de Pijama Registrado
1.8K Mensagens 404 Curtidas
#4 Por DCNunes
15/08/2006 - 20:57
Certo. O problema é que eu não conheço aquele atributo background que você usou antes. Ele estica a imagem ou repete? E qual destes efeitos você quer usar?

Se for repetição, dá pra controlar (com folhas de estilos) a repetição das imagens (horizontal, vertical, ambas, nenhuma). Então, já que a idéia é fazer a página se ajustar em qualquer resolução, você precisa definir a repetição de cada imagem.

No seu caso: pelo que vi você tem as 4 imagens de canto (border-xxxx.gif), que não serão esticadas nem repetidas (tiling). Um exemplo fictício, incompleto:


<table width="100%">

  <col width="50">

  <col>

  <col width="50">

    <tbody>

    <tr>

      <td style="background: url(canto_superior_esquerdo.jpg) no-repeat"></td>

      <td style="background: url(borda_superior.jpg) repeat-x"></td>

      <td style="background: url(canto_superior_esquerdo.jpg) no-repeat"></td>

    </tr>

    <tr>

      <td style="background: url(borda_esquerda.jpg) repeat-y"></td>

      <td style="background: url(centro.jpg) repeat">Aqui seria o conteúdo</td>

      <td style="background: url(borda_direita.jpg) repeat-y"></td>

    </tr>

    <tr>

      <td style="background: url(canto_inferior_esquerdo.jpg) no-repeat"></td>

      <td style="background: url(borda_inferior.jpg) repeat-x"></td>

      <td style="background: url(canto_inferior_direito.jpg) no-repeat"></td>

    </tr>

  </tbody>

</table>


Agora só falta acertar o restante (tirar borda, etc) e adaptar à sua necessidade.

Ficou faltando um pouco de explicação no final mas é porque estou com pressa.

Falou!
observe.png Fat chance: Fructose 2.0 observe.png
Etinin
Etinin Veterano Registrado
1.3K Mensagens 34 Curtidas
#5 Por Etinin
15/08/2006 - 21:13
Valeu IronManDCN, acho que consigo adaptar seu código, quando conseguir posto aqui.
Brigadão mesmo, tava precisando terminar essa procaria logo pra começar a traduzir o conteúdo que eu quero colocar.
Core 2 Quad Q6600 | Asus P5Q Deluxe | 2GB RAM | XFX 9800GTX+ | Unicomp SpaceSaver
Gentoo Linux / Windows 7

MacBook Pro 13" (2010) - Core 2 Duo 2.4 GHz | 4GB RAM | GeForce 320M
Darwin/x86 (Mac OS X 10.7)

iPhone 4 - Apple A4 (Cortex-A8 1GHz) | 512MB RAM | 16GB SSD
Darwin/ARM (iOS 5)
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal