Se ve mal en firefox aun validado en w3c

Hola a todos de nuevo. Muchas gracias a todos por leerme. Paso a contarles mi problema. Ya tengo lista toda la estructura de mi pagina y casi que empezando a llenarla. Descargue el firefox porq no lo tenia instalado y adivinen? si, se ve mal, aun validados los css y los html en w3c. la imagen del logo que deberia verse pegada al menu que tiene debajo se ve separada, al menu en css se le ven los puntos (viñetas en word), la barra del menu es mas larga de lo esperado y, en la parte de contenido puse un iframe transparente y lo que pongo dentro se ve mas abajo del borde del iframe, como si tuviera padding. Que puedo hacer? alguna buena sugerencia?

Gracias a todos!!

disculpen, no aclare, he buscado en el foro algo parecido y no encontre. Encontre respuestas al tema y que el explorer anda mal, por eso valide pero no entiendo que pasa. Gracias.

Mira aclarando primero (si estoy mal acepto corrección ) el W3C es para validar que tu código HTML esté limpio, que los atributos que usas en CSS estén bien escritos y sean los correctos, esta herramiento no ayuda a verificar si tu código es legible correctamente para todos los navegadores.

Lo que yo te recomiendo es que codifiques para Chrome o Firefox 4 ya que estos son los mejores navegadores hasta el momento.
Obviamente vas a tener problemas con IE pero es sólo cuestión de corregir los bugs mediante JS o Anotaciones en el CSS que realmente son menores que si codificaras directamente para IE.

Espero haberte ayudado.

Saludos.

Hola che, gracias por responder. Te cuento, yo soy electronico, no programador de webs asi que no soy nadie para decirte si lo que decis es correcto o no. Este es uno de los lugares que lei junto a otros.

http://www.cristalab.com/curso-html/bien-internet-explorer-mal-firefox/

Paso a contarte un avance, si hago que la barra del menu sea del largo de la imagen del encabezado, cuando la pongo en IE se ve mas corta. EL otro problema que no se como solucionar es que no puedo sacar las viñetas del menu en firefox y crome.

Busco una solucion sin js, ja hay? No quiero scripts en la pagina por cosas que ya he explicado; la razon es que hay gente (como yo) que ante paginas desconocidas evitas los scripts por tema de virus y es por eso que quiero que la pagina funcione sin scripts de ser posible.

aca esta el codigo del css del menu que en explorer funca bien, pero en firefox y crome me aparece mas largo con vinietas.

.menu1 {
padding:0 0 0 170px; margin:0 0 0 0; list-style:none; width:1000px; height:35px;
background:#fff url(Img/button1.gif); position:relative; border:1px solid #000;
border-width:0 0px; border-bottom:0px solid #444;
}
.menu1 li {
float:left;
}
.menu1 li a {
display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none;
font-size:12px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center;
padding:0 0 0 16px; cursor:pointer;
}
.menu1 li a b {
float:left; display:block; padding:0 32px 0 16px;
}
.menu1 li.current a {
color:#fff; background:url(Img/button3.gif);
}
.menu1 li.current a b {
background:url(Img/button3.gif) no-repeat right top;
}
.menu1 li a:hover {
color:#fff; background:#000 url(Img/button2.gif);
}
.menu1 li a:hover b {
background:url(Img/button2.gif) no-repeat right top;
}
.menu1 li.current a:hover {
color:#fff; background:#000 url(Img/button3.gif); cursor:default;
}
.menu1 li.current a:hover b {
background:url(Img/button3.gif) no-repeat right top;
}


Aclaro que estoy aprendiendo esto a los golpes, yo programo micros, je

Gracias a todos.

Bien, lo de las viñetas ya sé por qué te aparece, en esta parte de tu código:

Código :

 
.menu1 {
padding:0 0 0 170px; margin:0 0 0 0; [b]list-style:none;[/b] width:1000px; height:35px;
background:#fff url(Img/button1.gif); position:relative; border:1px solid #000;
border-width:0 0px; border-bottom:0px solid #444;
} 

Si bien estoy el correcto ¿Así se llama la clase de tu capa verdad?
La desventaja de esto, es que algunos navegadores no lo interpretan como IE, para IE el atributo de list-style:none; se lo aplica a todos las listas que estén ubicadas dentro de IE.
Sin embargo para otros navegadores hay que ser más específicos, es decir:

Código :

.menu1 li { list-style:none; }

Esto quiere decir, que a todos los elementos "li" que estén dentro de "-menu1" les quitará el style por default que traen los navegadores.

Ahora para lo que me comentabas del espacio, creo que todo esto se debe a tus floats, cuando aplicas un "float" tienes que darles un clear dependiendo del float que aplicaste, ya que si no lo haces, los elementos tienden a lo que se llama overflow, aplicaste clear a tus floats?

Espero haberte ayudado, si persisiten los problemas, una capturas vendrían bien.

Saludos.

Gracias, uno que me entiende al fin!!! Ahora vere en firefox el style con la modificacion. estoy revisando los clear y creo que estan bien puestos pero el menu se me separa de la imagen de cabecera en crome y firefox. Hare unos cambios y te cuento.

gracias

De hecho creo que sería más fácil si pusieras una captura o subieras en un archivo rar donde tienes problema, es más sencillo para mí poderte ayudar si reviso detenidamente el problema.
De todas maneras espero haberte ayudado y si tienes alguna otra duda aquí estamos.

Saludos.

Hola, gracias, anoche intente arreglar el tema del largo de la barra del menu y la separacion del menu y la imagen y nada. Lo que note entre cambios y cambios fue que si escribia el codigo:
<div id="cabecera"> <img ..... ></div>
era distinto que si lo escribia asi:
<div id="cabecera">
<img ..... >
</div>
En esta ultima, aun en IE me aparecia un espacio entre el menu y la barra del menu, pro este espacio era de solo 5px contra los 20px que aparecen en firefox y crome usando cualquiera de las dos opciones anteriores, obvio que llego a la conclusion que IE no funcina bien o funciona diferente, pero de todos modos no puedo arreglar el largo de la barra y la separacion. Lo que tampoco entiendo es, por que si tanto la imagen como la barra del menu miden 1000px de largo (width), aparece mas larga la barra en firefox y crome?

No se como hacer para subir imagenes, veo que dice l4c.me, que es? Voy a ver como puedo hacer.

Gracias por tu ayuda

ah!! otra cosa, intente con una tabla dentro del div "cabecera", en una parte la imagen y en otra el menu. Intente poniedo el menu dentro del div "cabecera".
Este es mi body como esta hasta ahora:

<link href="ctrl/main.css" type="text/css" rel="stylesheet">
<base target="Show">
</head>

<body>

<div id="content">
<div id="cabecera"><img src="Images/Logo_web.jpg" width="1000" height="147" alt="Synapsis electronics"></div>
<div class="menu1">
<ul>
<li><a href="home.html"><b>Home</b></a></li>
<li><a href="empresa.html"><b>La empresa</b></a></li>
<li><a href="ingenieria.html"><b>Ingenier&iacute;a</b></a></li>
<li><a href="proyectos.html"><b>Proyectos</b></a></li>
<li><a href="contacto.html"><b>Contacto</b></a></li>
</ul>
</div>
<iframe id="contenido" name="Show" frameborder="0" scrolling="no" src="home.html" AllowTransparency="AllowTransparency">No iframes</iframe>
<div id="pie"></div>
</div>


</body>

AlMaalva escribió:

Bueno, esa es una opinión personal tuya (que si me preguntas, la mía es que Opera es el navegador que mejor interpreta los estándares).

Al amigo leojunin le recomiendo que use un CSS reset. Esto es un código CSS que provoca que todos los navegadores rendericen los elementos HTML de la misma manera, en vez de hacer cada uno las cosas por su cuenta, que es el principal problema cuando una página se ve diferente en diferentes navegadores (incluso entre versiones de un mismo navegador). A mi me simplifica terriblemente la existencia

Este es el código que suelo usar:
http://developer.yahoo.com/yui/reset/

En esa página está el código y una explicación de qué hace y cómo implementarlo (no es más que ponerlo al principio del primer .css que se carga en todas las páginas.

Si, también tiene mucha razón, a veces un reset hace la diferencia y te evita dolores de cabeza.

Ahora, si no te molesta te haré ciertas correcciones en tu CSS y HTML que tal vez te ayuden con tu problema:

Código :

  <div id="content">
     <div id="cabecera">
        <h2>Header</h2>
      </div><!-- Termina la imagen que necesitas de fondo-->

   <div class="menu1">
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="empresa.html">La empresa</a></li>
        <li><a href="ingenieria.html">Ingenier&iacute;a</a></li>
        <li><a href="proyectos.html">Proyectos</a></li>
        <li><a href="contacto.html">Contacto</a></li> 
    </ul>
   </div><!-- Termina el menú -->

Ahora el CSS

Código :

#cabecera h2 { 
width: 1000px;
height: 147px;
background:url('../tuubicacion/tuimagen.jpg) no-repeat;
text-indent: -9999px /* Esto hará que el texto que estaba dentro del h2 se remueva */
} 

.menu1 li { list-style:none; }
.menu1 a { font-weight: bold;}

Esto que te hice fue para hacer un poco de limpieza en tu código, prueba con estas atributos y dime si persiste lo de la imagen de tu "cabecera" y para el marco si necesito ver una imagen porque no entiendo muy bien eso o.o

Saludos.

Una disculpa tengo un error en esta línea de código:

[code]background:url('../tuubicacion/tuimagen.jpg) no-repeat;[code]

A continuación te escribo la corrección:

[code]background:url('../tuubicacion/tuimagen.jpg') no-repeat;[code]

Sólo era un ' pero por ese ' no serviría la línea je, je

Saludos.

Hola a todos. Paso a contarles parte de la solucion. Las ideas que me tiraron eran buenas pero no me solucionaron el problema y... poniendo y sacando... termine... ja, encontrando el problema. Miren lo que era la separacion del menu de la imagen superior:

cambie:

.menu1 {
padding:0 0 0 170px; marg...

por:

.menu1 ul {
padding:0 0 0 170px; marg...

Ahora se ve bien en IE firefox y crome.
Pero aun me queda un problema. La barra del menu en firefox y chrome es mas larga que en IE.

Bueno veo que IE "adivino" lo que quise hacer!!! es un genio!!! jajaj

Quiero aclarar que la ayuda de AlMaalva fue la que mas me oriento, al separar el list-style: none

Gracias che!!

Menos mal que te estamos ayudando

Hola Leojunin, si pudieras poner el código de la barra tanto HTML como CSS a lo mejor podemos verificar el problema.

Yo te recomiendo también, que si nada más usas un solo padding no utilices tantos atributos, es más legible para los navegadores, leer por ejemplo padding-top:10px; a leer padding: 10px 0 0; esto se recomienda cuando son más valores para no escribir más líneas innecesarias.

Saludos.

Hola che, te cuento que puse el codigo, no se que haces para que aparezca con el fondo amarillo y con las barras pero lo subi, fijate mas arriba. Te cuento el problema final que pude solucionar el largo de la barra del menu; era el padding, pero no por la lectura que haces, sino que le agregaba padding a todo el menu pero IE mantenia el largo de la barra a 1000px y chrome y firefox le sumaban ese padding. no me preguntes por que aca esta el codigo:

Este es el que fallaba...

.menu1 {
padding:0 0 0 150px; margin:0 0 0 0; list-style:none; width:1000px; height:35px;
background:#fff url(Img/button1.gif); position:relative; border:1px solid #000;
border-width:0 0px; border-bottom:0px solid #444;
}
.menu1 li {
float:left;
}

Y este es con la solucion...

.menu1 {
padding:0 0 0 150px;
background:#fff url(Img/button1.gif); position:relative;
}
.menu1 ul {
padding:0 0 0 0px; margin:0 0 0 0; width:850px; height:35px;
}
.menu1 li {
float:left;
list-style:none;
}

Ahora funciona bien en los 3 navegadores. El codigo completo esta mas arriba, aqui copie la parte que cambio nada mas.

Gracias de todos modos.

Explicame para subir imagenes al foro que no sea por la otra pagina y como hacer para poner un codigo en ese formato que usas.

Pues para subir imágenes la verdad no sé cómo, pero creo que puedes buscar algún host que se dedique principalmente a eso como imageshack y sólo pones el código que te dan para los foros.

En cuanto a los códigos, entre las etiquetas [code] y /code] (obviamente /code cerrado entre []) con eso haces que los códigos aparezcan en diferente formato y sean más legibles.

Me alegra que te hayamos podido ayudar, por cierto, te recomiendo que leas algunos tutoriales acerca de limpieza de código ya que tienes algunos atributos innecesarios y si tienes bien estructurado tu código habrá mayor accesibilidad al momento de interpretarlo.

Saludos.