web en firefox & IE

Edig · #1 (**permalink**) 16/10/2008, 21:43

Bueno como saben mucha gente tiene IE [de los usuarios :S] y para no perde rgente hay que hacer una web compatible para todo y pss cmo no soye xperto en HTML nesesito su gran ayuda. esta web http://minisecreto.com es compatible con todos menos con IE ya que se ve feo, aqui les dejo lso codes.

salu2

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>YOURSITE[dot]COM</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" type="text/css" href="css.css" /> 
</head> 
 
<body> 
<div id="menu2"> 
  <table width="170" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td width="5"><img src="images/image_22.gif" width="5" height="19"></td> 
      <td width="160" class="box_head">&nbsp;</td> 
      <td width="5"><img src="images/image_24.gif" width="5" height="19"></td> 
    </tr> 
    <tr> 
      <td colspan="3" class="box">&nbsp;</td> 
    </tr> 
    <tr> 
      <td colspan="3">&nbsp;</td> 
    </tr> 
    <tr> 
      <td colspan="3">&nbsp;</td> 
    </tr> 
  </table> 
</div> 
<div id="menu"> 
  <table width="170" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td width="5"><img src="images/image_22.gif" width="5" height="19"></td> 
      <td width="160" class="box_head">&nbsp;</td> 
      <td width="5"><img src="images/image_24.gif" width="5" height="19"></td> 
    </tr> 
    <tr> 
      <td colspan="3" class="box">&nbsp;</td> 
    </tr> 
    <tr> 
      <td colspan="3">&nbsp;</td> 
    </tr> 
    <tr> 
      <td colspan="3">&nbsp;</td> 
    </tr> 
  </table> 
</div> 
<div id="container"> 
  <table class="main_table" border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
<td width="12"><img src="images/image_01.gif" width="4" height="27" alt=""></td> 
<td background="images/image_05.gif" width="8"><img src="images/spacer.gif" width="8" height="1"></td> 
<td class="nav_this"><img src="images/home.gif" width="73" height="27"></td> 
<td class="nav" onMouseOver="this.className='nav_over'" onMouseOut="this.className='nav'"><a href="page.html"><img src="images/about.gif" width="73" height="27" border="0"></a></td> 
<td class="nav" onMouseOver="this.className='nav_over'" onMouseOut="this.className='nav'"><img src="images/design.gif" width="73" height="27" border="0"></td> 
<td class="nav" onMouseOver="this.className='nav_over'" onMouseOut="this.className='nav'"><img src="images/links.gif" width="73" height="27"></td> 
<td width="100%" align="center" background="images/image_05.gif" class="small_text">&nbsp;</td> 
<td width="4"><img src="images/image_06.gif" width="4" height="27" alt=""></td> 
</tr><tr> 
<td colspan="1" height="15" width="4"><img src="images/image_09.gif"></td> 
<td colspan="6" height="15" width="100%" background="images/image_11.gif"></td> 
<td colspan="1" height="15" width="4"><img src="images/image_10.gif"></td> 
</tr><tr> 
<td colspan="1" height="109" width="4"><img src="images/image_12.gif"></td> 
<td colspan="6" height="109" width="100%" background="images/image_13.gif" align="center"> 
 
<table border="0" cellpadding="0" cellspacing="0" width="98%"> 
<td width="2"><img src="images/image_19.gif"></td> 
<td width="40%" background="images/image_20.gif" valign="middle" align="center"><img src="images/header.gif"></td> 
<td width="2" background="images/image_20.gif"><img src="images/h-div.gif"></td> 
<td width="60%" align="center" valign="top" background="images/image_20.gif" class="login_box"> Cualquier Cosa Puede Ir Aqui... </td> 
<td width="3"><img src="images/image_21.gif"></td> 
</table></td> 
<td colspan="1" height="109" width="4"><img src="images/image_14.gif"></td> 
</tr><tr> 
<td colspan="1" height="1" width="4"><img src="images/image_15.gif"></td> 
<td colspan="6" height="1" width="100%" bgcolor="#495271"></td> 
<td colspan="1" height="1" width="4"><img src="images/image_16.gif"></td> 
</tr><tr> 
<td colspan="1" height="1" width="4" background="images/image_17.gif"></td> 
<td colspan="6" height="1" width="100%" bgcolor="#686D8B"> 
<img src="images/spacer.gif" height="2"><br> 
<table border="0" cellpadding="0" cellspacing="0" width="98%" align="center"> 
<tr> 
<td><img src="images/image_22.gif"></td> 
<td class="box_head">Como Editar </td> 
<td><img src="images/image_24.gif"></td> 
</tr><tr> 
<td colspan="3" class="box"><p><strong><BR>EDITANDO LA NAVEGACION</strong></p> 
  <br> 
    El texto de los tabs de la navegacion son imagenes. Para editar el texto abran la carpeta PSD's y dentro van a encontrar un archivo llamado &quot;nav.psd&quot;. Abrilo con Photoshop y cambiale el texto. Cuando queres que un tab te aparezca por encima de todos los demas, como ahora lo esta haciendo el tan que dice HOME, tenes que cambiarle el estilo de la celda por lo siguiente: <em>class=&quot;nav_this&quot;.</em> 
   <BR><BR>El banner que dice &quot;YourSite&quot; puede ser editado entrando a la carpeta PSD's y abriendo el archivo &quot;banner.psd&quot; con Photoshop. 
  <p><br> 
    I hope you enjoy this free template brought to you by Chronic and Zymic.com</p></td> 
</tr> 
</table> 
<img src="images/spacer.gif" height="2"><br> 
<table border="0" cellpadding="0" cellspacing="0" width="98%" align="center"> 
<tr> 
<td><img src="images/image_22.gif"></td> 
<td class="box_head">Template by: Chronic --- READ THIS </td> 
<td><img src="images/image_24.gif"></td> 
</tr><tr> 
<td colspan="3" class="box">Well, i havnt been submitting much lately so i decided its about time for another template. This template is extremely easy to edit. <br> 
<br> 
<strong>EDITING THE NAVIGATION:</strong><br> 
The text for the navigation links up above are in transparent .gif's.  The PSD for these files is in the folder <br> 
&quot;PSD's" and is called nav.psd  OR if you are feeling adventurous you can even just put text strait into the nav cells.  It wont interfere with the roll over effect. 
<br> 
<br> When you want the current page to be the front tab change that cell style to " <i>class="nav_this"</i> "<br><br>  The header psd is also in the "PSDs" folder, its called "banner.psd" 
<br><br>  I hope you enjoy this free template brought to you by Chronic and Zymic.com</td> 
</tr> 
</table> 
<img src="images/spacer.gif" height="2"><br> 
</td> 
<td colspan="1" height="1" width="4" background="images/image_18.gif"></td> 
</tr><tr> 
<td colspan="1"><img src="images/image_25.gif"></td> 
<td colspan="6" align="center" background="images/image_27.gif" class="small_text">Copyright &copy; YourSite.com <strong>||</strong> Site Design by: <a href="http://www.zymic.com">Zymic.com </a> </td> 
<td colspan="1"><img src="images/image_26.gif"></td> 
</tr> 
</table> 
</div> 
</body> 
</html>

Código PHP:

  /* CSS Document */ 
 
body{ font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 9; 
    margin-top: 5px; 
    margin-bottom: 0px; 
    margin-right: 0px; 
    margin-left: 0px; 
    color: #B6BBD2; 
    background-color: #7B819A; 
    background-image: url(images/bg.gif); 
    background-position: top; 
    background-repeat: repeat-x;  
    text-align: center;} 
     
a:link{ COLOR: #495271; text decoration: none; font-style: normal; } 
a:visited{ COLOR: #495271; text decoration: none; font-style: normal; } 
a:hover{ COLOR: #B6BBD2; text decoration: none; font-style: normal; } 
     
#container { 
    width: 650px; 
    margin-left: 300px; 
} 
     
.main_table{ width: 650px; } 
 
.small_text{ font-size: 10px; } 
 
.login_box{ font-size: 10px; 
    padding-top: 3px; 
    padding-bottom: 3px; } 
 
.nav_this{ width: 73px; 
    height: 27px; 
    background-image: url(images/image_02.gif); 
    background-position: left; 
    background-repeat: no-repeat; } 
 
.nav{ width: 73px; 
    height: 27px; 
    background-image: url(images/image_03.gif); 
    background-position: left; 
    background-repeat: no-repeat; } 
     
.nav_left{ width: 73px; 
    height: 27px; 
    background-image: url(images/image_03_left.gif); 
    background-position: left; 
    background-repeat: no-repeat; } 
     
.nav_over{ width: 73px; 
    height: 27px; 
    background-image: url(images/image_04.gif); 
    background-position: left; 
    background-repeat: no-repeat; } 
     
.nav_over_left{ width: 73px; 
    height: 27px; 
    background-image: url(images/image_04_left.gif); 
    background-position: left; 
    background-repeat: no-repeat; } 
     
.form{ background-color: #A7ADC7; 
    border: 1px solid #35394F; 
    color: #35394F; 
    margin-bottom: 2px; 
    font-size: 10px; 
    width: 90px; 
    height: 13px; } 
     
.form_login{ background-color: #A7ADC7; 
    border: 1px solid #35394F; 
    color: #35394F; 
    margin-bottom: 2px; 
    font-size: 10px; 
    width: 90px; 
    height: 13px; } 
     
.form_submit{ font-size: 9px; } 
     
.box_head{ background-image: url(images/image_23.gif); 
    font-size: 10px; 
    font-weight: bold; 
    width: 100%; } 
     
.box{ background-color: #6C718B; 
    border-left: 1px solid #444961; 
    border-right: 1px solid #444961; 
    border-bottom: 1px solid #444961; 
    font-size: 10px; } 
 
#menu { 
    width: 170px; 
    height: 100%; 
    float: left; 
    clear: none; 
    margin-top: 160px; 
    margin-left: 100px; 
} 
#menu2 { 
    position:absolute; 
    left:975px; 
    top:160px; 
    width:107px; 
    height:76px; 
    z-index:1; 
}

hitech · #2 (**permalink**) 16/10/2008, 22:07

Mira. Muchas personas me han criticado por aconsejar el uso de tablas. Pero hasta aqui es la solucion mas rapida que encuentro (por lo menos en mi caso). Todo depende de tu CSS al parecer tienes que hacer uno que sea leido deacuerdo al navegador que lo visita. Saludos

http://jracostac.blogspot.com

Edig · #3 (**permalink**) 17/10/2008, 09:58

mm osea uno especial para IE?

Mikmoro · #4 (**permalink**) 17/10/2008, 10:21

Cita:

Iniciado por hitech

Muchas personas me han criticado por aconsejar el uso de tablas.

Pues sí, y yo voy a ser una de ellas, pero no porque sí, sino con hechos: como vés, el uso de tablas no le está resolviendo nada al usuario que ha hecho la consulta.

No imagino por qué recomiendas el uso de tablas para maquetar.

Edig · #5 (**permalink**) 17/10/2008, 14:46

mm Mikmoro yo normalmente hago todo con tablas es mas facil para acomodar pero como estoe s una plantilla y venia con margenes css en IE me queda mal :S, aparte las tablas se adaptan al navegador del usuario, es decir que siempre estan centradas xD y con los maregenes no solo estan en 800X600 O 1200X800 etc...

salu2

Mikmoro · #6 (**permalink**) 17/10/2008, 15:32

Siento decirte que estás bastante equivocado:

Cita:

Iniciado por Edig

yo normalmente hago todo con tablas es mas facil para acomodar

No. Seguramente a ti te resulta más fácil de acomodar, pero no "es" más fácil de acomodar; es todo cuestión de práctica y experiencia.

Cita:

Iniciado por Edig

pero como estoe s una plantilla y venia con margenes css en IE me queda mal :S,

No, lo que te están fallando son las tablas en IE, no los márgenes con css.

Cita:

Iniciado por Edig

aparte las tablas se adaptan al navegador del usuario, es decir que siempre estan centradas xD y con los maregenes no solo estan en 800X600 O 1200X800 etc...

¿Crees que hay alguna dificultad para hacer un diseño líquido (que se adapte a la resolución) con cajas en luegar de tablas? De hecho es más fácil, porque a veces las tablas te jeugan malas pasadas con los anchos que no ocurre con las cajas.

¿Cómo crees que están hechas miles de páginas que has visto que se adptan al ancho y no tienen tablas?

En fin, por centrarnos en el tema de la consulta, creo que el problema te lo producen las tablas. Miraré a ver si veo el problema.

Mikmoro · #7 (**permalink**) 17/10/2008, 15:48

Bueno, en realidad el problema te lo produce un cierto desorden en los elementos y una mala configuración.

¿Tú cómo quisieras que se vea? ¿como se ve ahora en firefox? ¿la has visto en 1024? (tiene scroll horizontal) ¿quieres que se vea así? ¿has visto lo que ocurre con lo que tú llamas "menu2" cuando varías el tamaño de la ventana?

Si me dices puedo intentar ayudarte, aunque si efectivamente te resulta más fácil acomodar las cosas con tablas, igual lo mejor es que quites los divs de la plantilla y lo hagas con tablas.

DjCasius · #8 (**permalink**) 17/10/2008, 18:14

yo no se diseño, pero, si no es con tablas que es lo siguiente mejor?

NUCKLEAR · #9 (**permalink**) 17/10/2008, 20:33

Cita:

Iniciado por DjCasius

yo no se diseño, pero, si no es con tablas que es lo siguiente mejor?

Con Css y html
tablas = tabular
Css-Xhtml = maquetar
veras que es mucho mas facil con css y xhml www.librosweb.es
saludos

MoDoRrO · #10 (**permalink**) 17/10/2008, 23:51

yo uso IE, de hecho, odio firefox, y tu web se ve mal en una configuracion de
1280x800

Edig · #11 (**permalink**) 18/10/2008, 16:51

mm pues miren ya lo he puesto con tablas y he variado la ventana y se ve perfecto claro llega aun punto que nesesita scroll horizontal pero bno :P

mirenla de new http://minisecreto.com/

PD. esta hecha con tablas + css

Mikmoro · #12 (**permalink**) 18/10/2008, 17:11

Si eso es lo que querías conseguir es perfecto

Acuérdate de pasar el validador de la w3c: hay 173 errores.

Saludos.

nfo · #13 (**permalink**) 18/10/2008, 18:13

siemrpe siemrpe con div nunca con tablas!!! las tablas fueron diseñadas para mostrar datos nunca para maquetar.

El uso de tablas es el no saber diseñar en css. Hace poco di un curso de Diseño Web y a mis alumnos les acostumbre hacerlo con div, a final del curos estaban contentos porque vieron que era más facil que usar tablas, siendo asi una chapuza.