Problemas Firefox - Internet explorer

Guiye1988 · #1 (**permalink**) 09/06/2009, 08:40

Bueno, tenia que hacer una web para un tp de la facu. la web es esta..
guiyepruebaPUNTOcomPUNTOar
Enfirefox se me ve bien, me faltaria centrarla pero nada mas.. ahora, en IE se me fue todo al carajo.. ahi les pongo el codigo mas abajo.
HTML

Código html:

Ver original<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="estilos.css" type="text/css">
    </head>
    <body>
        <h1>Food Company Name</h1>
        <hr class="arriba">
        <div id="cuerpo1">
        <img class="platos" src="ImagenPlatos.png" alt="Imagen de platos" />
        <h2>New Recipies<br> and Great Holiday Entertaining Ideas</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen.  Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen.  Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus.. Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen.  Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus.Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen.</p>
        <p><a class="click" href="#">read more..</a></p>
        <hr class="abajo">
        </div>
        <div id="cuerpo2">
        <img class="tartas" src="ImagenTartas.png" alt="Imagen de tartas" />
        <h2>Top Desserts and Wine List</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen.  Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen.  Lorem ipsum dolor sit amet, consectetuer adipcing elit. Praesent vestibulum molestie lacus.</p>
        <p><a class="noclick" href="#">read more..</a></p>
        </div>
        <img class="mujer" src="ImagenMujer.jpg" alt="Imagen Mujer" />
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Recipes</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Entertaining</a></li>
            <li><a href="#">Top 10 List</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
        <p class="pie">Copyright 2004 Company Name</p>
    </body>
</html>

CSS

Código css:

Ver originalbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,a {
    padding: 0px;
    margin: 0px;
    text-decoration:none;
}
table {
    border-collapse: collapse;
    border-spacing: 0px;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
    
}
caption,th {
    text-align: left;
}
 
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}
body
{
width:1024px;
background-color:#819464;
}
h1
{
font-family:Palatino Linotype;
text-align:center;
font-size:48.24px;
background-color:#485c3a;
width:603px;
height:106px;
float:right;
border-left:2px solid #ffffff;
color:#ffffff;
}
hr.arriba
{
border:0px solid #fff;
border-top:2px solid #ffffff;
margin:0px;
background:url(BarraHorizontal.jpg) no-repeat center;
width:1024px;
height:83px;
float:left;
}
hr.abajo
{
border-top:2px solid #ffffff;
border-bottom:2px solid #ffffff;
border-left:0px solid #fff;
border-right:0px solid #fff;
margin:0px;
background-color:blue;
width:1024px;
height:13px;
background-color:#ff9900;
float:left;
}
a
{
color:#ffffff;
}
a.click
{
color:#336633;
font-weight:bold;
}
a.noclick
{
color:#ffde00;
font-weight:bold;
}
ul
{
position:relative;
bottom:32px;
float:left;
background-color:#485c3a;
width:920px;
height:56px;
color:#ffffff;
border-top:2px solid #ffffff;
border-right:2px solid #ffffff;
border-bottom:2px solid #ffffff;
}
li
{
margin-top:16px;
margin-left:20px;
font-size:20px;
float:left;
}
#cuerpo1
{
background-color:#99cc33;
width:1024px;
float:left;
border-top:3px solid #ffff00;
}
#cuerpo1 h2
{
font-weight:bold;
font-family:arial;
font-size:16px;
margin-top:15px;
width:756px;
line-height:17.61px;
}
#cuerpo1 p
{
font-family:arial;
font-size:12px;
width:756px;
line-height:17.61px;
margin-top:20px;
}
#cuerpo1 img
{
float:left;
}
#cuerpo2
{
background-color:#99cc33;
width:1024px;
height:210px;
float:left;
border-bottom:3px solid #ffffff;
}
#cuerpo2 h2
{
font-weight:bold;
font-family:arial;
font-size:16px;
margin-top:15px;
width:756px;
line-height:17.61px;
}
#cuerpo2 img
{
float:left;
padding-right:26px;
}
#cuerpo2 p
{
font-family:arial;
font-size:12px;
line-height:17.61px;
width:756px;
margin-top:20px;
}
img.mujer
{
position:relative;
left:780px;
top:330px;
width:230px;
height:349px;
border:2px solid #ffffff;
}
p.pie
{
position:relative;
width:260px;
color:#ffffff;
font-size:14pt;
float:right;
}

MUCHAS GRACIAS =)

safe · #2 (**permalink**) 09/06/2009, 12:03

El problema es que no declaras ningun DOCTYPE.
En vez del simple <html> deberias poner:

Código:

<!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" dir="ltr" lang="es">

desendoll · #3 (**permalink**) 09/06/2009, 13:33

aun y la falta del DOCTYPE, es posible que te encuentres con problemas entre los navegadores. Bienvenido al club...

La solución que yo utilizo es utilizar un css con distintos opciones para IE6 e IE7, sino siempre tienes los hacks de css.

Guiye1988 · #4 (**permalink**) 09/06/2009, 14:50

Tiene doctype..meolvide de ponerlo, igual pude solucionarlo bastante.. miren la pagina devuelta aver que opinan, lo deje bastante bien.. guiyepruebaPUNTOcomPUNTOar

Hay pequeños detalles a solucionar pero no puedo...

Saludos y gracias muchachos