Comunidad de diseño web y desarrollo en internet online

Maquetacion css Apoyo ie

Citar            
MensajeEscrito el 30 Abr 2009 09:00 pm
señores de cristalab buenas tardes necesito una ayuda breve miren en esta web: es mi primera web en css

[url=http://idclogic.com/proyectos/ucatel][/url]

Fijense en el menu lateral en la parte superior
:) en Firefox y demas todo ok
:o en ie 7 e ie6 me sale un espacio en la parte superior del menu

les agradeceria me apoyen muchas gracias

el html es:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grupo Ucatel</title>

<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
    <style type="text/css"> 
    /* coloque las reparaciones del modelo de cuadro para IE 5* en este comentario condicional */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* coloque las reparaciones de css para todas las versiones de IE en este comentario condicional */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* la propiedad zoom propia que se indica más arriba proporciona a IE el hasLayout que necesita para evitar diversos errores */
    </style>
    <![endif]-->
</head>

<body class="twoColFixLtHdr">

    <div id="container">
      <div id="header">
         <!-- end #header -->
      </div>
       <div id="banner_top">
         <img src="imagenes/banner_top.jpg" alt="" />
      </div><div id="sidebar1">
               <div class="logo_ugarte"></div>
         <div class="menuizq1">
            <a href="index.#" class="menuizq3">Empresa</a>
            <a href="index.#" class="menuizq3">Servicios</a>
            <a href="index.#" class="menuizq3">Tarifas</a>
            <a href="index.#" class="menuizq3">Clientes</a>
            <a href="index.#" class="menuizq3">Contáctenos</a>
            <a href="index.#" class="menuizq3">Preguntas Frecuentes</a>
            <a href="index.#" class="menuizq3">Cotización</a>
            <a href="index.#" class="menuizq3">Bolsa de trabajo</a>            </div> 
   
           <div class="logo_telegestion"></div>
   <div class="menuizq1">
      <a href="index.#" class="menuizq3">Empresa</a>
      <a href="index.#" class="menuizq3">Servicios</a>
      <a href="index.#" class="menuizq3">Tarifas</a>
      <a href="index.#" class="menuizq3">Clientes</a>
      <a href="index.#" class="menuizq3">Contáctenos</a>
      <a href="index.#" class="menuizq3">Preguntas Frecuentes</a>
      <a href="index.#" class="menuizq3">Cotización</a>
      <a href="index.#" class="menuizq3">Bolsa de trabajo</a>      </div> 
            <!-- end #sidebar1 -->
      </div>
         <div id="mainContent">
            <div class="textobienvenida">Bienvenido a Grupo UCATEL, organización dedicada a las Recuperaciones Judiciales y Servicios de Telemarketing, conformada por dos unidades de negocio: UGARTE CONSULTORES ASOCIADOS y TELEGESTION EMPRESARIAL</div>
            <div class="abajo50"><img src="imagenes/banner_ugarte.jpg" width="641" height="90"/><br />
                  
               <strong>Déjelo en nuestras manos</strong>… En <strong>Ugarte Consultores Asociados</strong> nos hacemos cargo de sus casos de <strong>Recuperación de Carteras Morosas</strong> con la más absoluta reserva y confianza que nuestros muchos años de experiencia en el mercado garantizan.          </div>
             
          <!-- end #mainContent -->
            <br />
            <div class="abajo50"><img src="imagenes/banner_telegestion.jpg" width="641" height="90" /><br />
               Necesita ¿Incrementar sus ventas?, ¿Reforzar sus estrategias comerciales?, o ¿Mantener contacto frecuente con sus clientes?, <strong>Telegestión Empresarial</strong> es su mejor opción!. Obtenga resultados efectivos e inmediatos y… </div>
            
      <div class="formato1">CREZCA CON NOSOTROS</div>
         </div>
         <!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos -->
         <br class="clearfloat" />
         <div id="footer">
       
        © Copyright 2009 <strong>Grupo UCATEL </strong>
        <div class="footer_menu"><strong><a href="#">HOME</a> |  <a href="#">MAPA DEL SITIO</a>  |  <a href="#">ENLACES</a></strong></div>
      <br />
         <br />

Av. Santa Catalina 598 – Esq. Pascual Saco Oliveros 789, Urb. Santa Catalina – L.13. La Victoria<br />
Teléfono: 700-6202   E-mail: [email protected]<br />
<br /> 
    
Ugarte Consultores Asociados. Teléfono: 700-6300   E-mail: [email protected]


<div class="footer_menu">Desarrollado por <a href="#">IDCLogic</a></div>
<br />


Telegestión Empresarial. Teléfono: 700-6205   E-mail: [email protected]
      <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


y el css es:

Código :


@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
* {
   margin:0;
   padding:0;
   outline:0;
   list-style:none;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}


    body  {
       font: 100% Verdana, Arial, Helvetica, sans-serif;
       background: #666666;
       margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
       padding: 0;
       text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
       color: #000000;
    }
body {
   background-image: url(../imagenes/bg.jpg);
   background-repeat:  repeat-x;
   background-position: left top;
   background-color: #8f8f8f;
   margin-bottom: 30px;
}
    .twoColFixLtHdr #container {
   width: 936px;  /* el uso de 20px menos que un ancho completo de 800px da cabida a los bordes del navegador y evita la aparición de una barra de desplazamiento horizontal */
   background: #FFFFFF; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
   border: 5px solid #FFFFFF;
   text-align: left; /* esto anula text-align: center en el elemento body. */
   margin-top: 10px;
   margin-right: auto;
   margin-left: auto;
    } 
    .twoColFixLtHdr #header {
   height: 100px;
   padding-top: 0;
   padding-right: 10px;
   padding-bottom: 0;
   padding-left: 20px;
   background-color: #D4D4D4;
   background-image: url(../imagenes/logo.jpg);
   background-position: right center;
   background-repeat: no-repeat;
   border-bottom-width: 5px;
   border-bottom-style: solid;
   border-bottom-color: #FFFFFF;
    } 
 .twoColFixLtHdr #banner_top {
   background-color: #D4D4D4;
   background-image: url(../imagenes/logo.jpg);
   background-position: right center;
   background-repeat: no-repeat;
   border-bottom-width: 5px;
   border-bottom-style: solid;
   border-bottom-color: #FFFFFF;
   height: 143px;
    } 
    .twoColFixLtHdr #header h1 {

    }
    .twoColFixLtHdr #sidebar1 {
   float: left; /* dado que este elemento es flotante, debe asignarse un ancho */
   width: 242px; /* el ancho real de este div, en navegadores que cumplen los estándares, o el modo de estándares de Internet Explorer, incluirá el relleno y el borde además del ancho */
   background: #ef181f;
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 10px;
   padding-left: 0px;
    }
.logo_ugarte {
   background-image: url(../imagenes/ugarte_logo.jpg);
   background-repeat: no-repeat;
   height: 66px;
   width: 242px;
   margin-bottom: 15px;
   border-bottom-width: 5px;
   border-bottom-style: solid;
   border-bottom-color: #FFFFFF;
}
#cols {
}

.logo_telegestion {
   background-image: url(../imagenes/telegestion_logo.jpg);
   background-repeat: no-repeat;
   height: 86px;
   width: 242px;
   margin-bottom: 15px;
   border-top-width: 5px;
   border-top-style: solid;
   border-top-color: #FFFFFF;
   border-bottom-width: 5px;
   border-bottom-style: solid;
   border-bottom-color: #FFFFFF;
}


    .twoColFixLtHdr #mainContent {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 250px;
   padding-left: 20px;
   line-height: 25px;
   padding-right: 20px;
    } 

    .twoColFixLtHdr #footer {
   background-color: #DDDDDD;
   background-image: url(../imagenes/boceto04_40.jpg);
   background-repeat:  repeat-x;
   height: 100px;
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 0;
   padding-left: 20px;
   border-top-width: 5px;
   border-top-style: solid;
   border-top-color: #FFFFFF;
   font-size: 10px;
   color: #FFFFFF;
    } 
   .twoColFixLtHdr #footer a{
   color: #FFFFFF;
   text-decoration: none;
    } 
#footer .menu {
   float: right;
}

    .fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
       float: right;
       margin-left: 8px;
    }
    .fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. */
       float: left;
       margin-right: 8px;
    }
    .clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
   clear:left;
    }
.textobienvenida {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-style: italic;
   font-weight: bold;
   color: #5d5d5d;
   line-height: 25px;
   padding-top: 15px;
   margin-bottom: 50px;
}
.formato1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-style: italic;
   font-weight: bold;
   color: #5d5d5d;
   padding-right: 20px;
   text-align: right;
}

.menuizq1 {
   background-color: #ef181f;
   margin-bottom: 10px;
   clear: right;
   width: 242px;
}

a.menuizq3{
   display: block;
   font-weight: bold;
   color: #FFFFFF;
   text-decoration: none;
   line-height: 30px;
   font-size: 12px;
   padding-left: 20px;
   font-family: Arial, Helvetica, sans-serif;
   padding-top: 0px;
   padding-bottom: 0px;
   font-style: italic;
   background-color: #EF181F;
   background-image: url(../imagenes/li_on.gif);
   background-repeat: no-repeat;
   background-position: 0px 5px;
}

a.menuizq3:hover{
   background-image: url(../imagenes/li_off.gif);
   background-repeat: no-repeat;
   background-color: #d40506;
   }
.abajo50 {
   margin-bottom: 50px;
}
.idclogic {
   float: right;
}
.footer_menu {
   float: right;
}

Por iViktor

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 May 2009 04:37 pm
Pues no se si ya lo lograste arreglar o que, porque lo acabo de ver en Firefox e IE7 y se ve igual

Por [Ray]

Claber

1901 de clabLevel

20 tutoriales

Genero:Masculino  

Matamoros, Tam.

firefox
Citar            
MensajeEscrito el 01 May 2009 04:49 pm
He visitado tu página con Firefox y con IE y la única diferencia que he notado en lo que dices es que en Firefox hay un huequito mas grande entre el cuadro donde está Ugarte Consultores Asociados de las imagenes, pero en IE se ve mas pequeño.

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

 

Las Palmas De Gran Canarias

firefox
Citar            
MensajeEscrito el 02 May 2009 10:32 pm
solucionado poco despues de postear
era un problema de espacios vacios entre divs donde habia nada.

solucionado al pasar a
XHTML 1.0 estricto

Por iViktor

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 May 2009 10:52 pm
Me alegro de que se haya solucionado.

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

 

Las Palmas De Gran Canarias

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.