Ayuda con los estilos de mi web

[kennyhp]

Hola CSSeros, soy programador y no tengo ni idea CSS :( y estoy peleandome con mi web, intentando que me salga algo medio decente. Me he puesto con el tema tirando de algunos tutoriales y obserbando estilos con FireBug.

La question es que casi lo tengo, podeís ver el resultado de mi trabajo en http:www.nientegames.com

Tengo varias dudas a ver si me podeis ayudar. Cuando entro en la web, ya sea con IE o con FireFox, el div donde tengo el contenido, cuando este cambia, se mueve hacia a bajo, esto no pasa cuando pruebo en local con IE 8 en modo compatibilidad. ¿como puedo hacer que no se mueva?

El logo se me coloca en un sitio u otro según el navegador y no se como colocarlo... ¿hay algo del tipo if en los CSS para controlar en navegador y actuar en consecuencia?

Por último.... si hay un diseñador por aqui y me da alguna idea de como inegrar el logo con la cabezera para que quede bien... jajaja... es que tengo muy poca gracia!!!

El codigo:

Código PHP:

  body {  
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;  
   margin: 5px 0 10 0px;  
   text-align: center;  
   background-color: #ebebeb;  
}  
#contenedor{  
   text-align: left;  
   width: 1024px;  
   margin: auto;  
}  
#pie{  
        
    background-color:#E1E7EB; 
    background-image:url(img/fondo_pie.png); 
    background-repeat:repeat-x; 
    border:1px solid #D4D4D4; 
    color:#000000; 
    padding:8px 10px; 
    height:84px; 
 
}  
#cabecera{  
    background-color: #FFFFFF;  
    background-image: url(img/cabecera2.png); 
    background-repeat:no-repeat; 
    background-position: right top; 
    height:150px; 
    color: #333300;  
    font-size:12pt;  
    font-weight: bold;  
    padding: 5px 3px 3px 10px;  
}  
#cabecera h2 a { 
    background-image:url(./../Images/logo.png); 
    background-repeat:no-repeat; 
    display:block; 
    height:159px; 
    margin:-22px 50px 0; 
    outline-color:-moz-use-text-color; 
    outline-style:none; 
    outline-width:0; 
    width:250px; 
} 
#cuerpo{  
   margin: 10 0 10 0px;  
}  
 
#articulos 
{ 
    padding:5px 10px 0px 10px; 
    background-color: #FFFFFF 
} 
 
#lateral ul{  
   margin : 0 0 0 0px;  
   padding: 0 0 0 0px;  
   list-style: none;  
}  
#lateral li{  
   background-color: #ffffcc;  
   margin: 2 2 2 2px;  
   padding: 2 2 2 2px;  
   font-weight: bold;  
}  
#lateral a{  
   color: #FFFFFF;  
   text-decoration: none;  
}  
#lateral{  
   width: 30%;  
   background-color: #999999;  
   float:right;  
}  
#principal{  
   background-color: #ffffff;  
   padding: 4 4 4 4px;  
   margin-right: 170px;  
   width:70%; 
   height:100%; 
   display:block; 
}  
   

y la pagina:

Código PHP:

     <div id="contenedor"> 
        <div id="cabecera"> 
            <h2> 
                <a title="Todas las noticias sobre videojuegos, analisis y articulos. Niente Games" 
                    href="http://www.nientegames.com"></a> 
            </h2> 
        </div> 
        <div id="cuerpo"> 
            <div id="lateral"> 
            <div id="articulos" > 
CONTENIDO 
            </div> 
            </div> 
            <div id="principal"> 
                CONTENIDO 
            </div> 
        </div> 
        <div id="pie"> 
            NienteGames.com, todas las noticias de un solo vistazo. Para que no te pierdas ni 
            una. 
        </div> 
    </div>  
   

Gracias por todo!

[mayid]

Sobre integrar el logo: fijate de que es una imagen borroso, por lo tanto ganaria con una reduccion. Mismo, al reducirlo, podes subirlo un poco y tenerlo muy cerca de mario. Eso le daria su gracia. El espacio blanco puede ser muy grande asi como esta. Proba reunir mas logo y figuras, en diagonal a mario (arriba a la izq).

Hay diferencias de width y height con diferentes navagadores. A veces pequeñas, pero hacen a la cosa.

Existen "condicionales css para IE", y asi podes buscarlos en google. Son estos:
<!--[if IE]>
<style>
#miregla {
color:#333333;
}
</style>
<![endif]-->

Que tambien sirven para bloques javascript:
<!--[if IE 6]>
<SCRIPT LANGUAGE="Javascript">
alert("Estás usando Internet Explorer 6");
</SCRIPT>
<![endif]-->


Respecto a que se corre el contenido al cambiar, yo no veo nada. Es mas, hay un fade muy interesante en la carga de pagina por ajax.Me encantaria lograr eso en mi web, que anda como atorada.

[kennyhp]

Hola,
probare con los condicionales para Internet Explorer, a ver si lo arreglo con eso.

El efecto de que se me va la pantalla para abajo se ve cuando cambias el dia del que quieres ver las noticias, una opción que esta justo encima de las noticias.

El efecto lo hago con las AJAX control toolkits de .Net.

Un saludo y gracias por todo.