Comunidad de diseño web y desarrollo en internet online

Necesito ayuda con validacion de estilos css

Citar            
MensajeEscrito el 11 May 2008 10:02 am
hola, como estan?

les comento, tengo una web en xhtml, estoy utilizando 2 estilos css externos para esta web, pero tengo un problema a la hora de validar el codigo css y la idea es basar la web en estandares por cuestiones de accesibilidad con ciertos navegadores, por ejemplo safari 2.0 con el cual la web se deforma en cuanto a diseño, ojala y alguien me pueda ayudar a solucionar el problema, muchas gracias a todos los que colaboran en clab.

saludos.

a continuacion pongo el codigo de los 2 css.

css principal:

Código :

@charset "UTF-8";
/* =CALL LIBRARY */
   @import url("reset-min.css");

/* =GENERAL*/
   body{
      font: 62.5%/2.2em "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
      color: #000000;
      background: #fff;
   }
   a{text-decoration: none;color: #006699;}
   a:hover{
   color: #000000;
}
   hr{display: none;}
   strong{font-weight: bold;}
   ul.borderedlist li{
      border-bottom: 1px dashed #d1cfcd;
   }
   ul.borderedlist li a{
   padding:3px 0 0 2px;
   height: 26px;
   color: #FF9900;
   }
   ul.borderedlist li a:hover{background: #E5E5E4;color: #42423b;}

/* =LAYOUT - the main layout styles */
   .container{
   width:900px;
   margin: 0 auto;
   position: relative;
   overflow:visible;
   background-color: #FFFFFF;
   }
   /* header layout */
   #header{
      height: 253px;
      background: #4a4841 url(../images/top_bg.jpg) top repeat-x;
      position: relative;
   }
   #navigation{
      position: absolute;
      right: 0;
      top:20px;
   }
   /* main area layout */
   #main{padding:14px 0 20px 0;}
   #leftcolumn{float: left;width:193px;}
   #center{
   float: left;
   width:377px;
   padding-top: 0;
   padding-right: 20px;
   padding-bottom: 0;
   padding-left: 20px;
}
   #rightcolumn{float: left;width:287px;}
   /* bottom layout */
   #bottominfo{
      border-top: 5px solid #FF9900;
      background: #FFFFFF;
      padding-bottom:25px;
      width: 100%;
      overflow: hidden;
   }
   .bottomcolumn{
      float: left;
      width:288px;
      margin-right: 18px;
   }
   .bottomright{margin-right:0;}
   
/* =HEADER - the header styles */
   #header .container{height: 253px;}
   /* logo */
   h1{
      position: absolute;
      height: 71px;
      top: 15px;
   }
   h1 a{
      font: 24px/24px Arial, Helvetica, sans-serif;
      font-weight: bold;
      letter-spacing: -2px;
      padding: 22px 9px 25px 20px;
      display: block;
      color: #fff;
      background: url(/images/logo_bg.gif) left top no-repeat;
   }
   h1 a:hover{color: #fff;}
   h1 a span{
      height:71px;
      width: 13px;
      position: absolute;
      top:0;
      right: -13px;
      cursor: pointer;
      background: url(../images/logo_right.gif) right top no-repeat;
   }
   /* top navigation */
   #navigation li{
      float: left;
      padding-right: 27px;
      text-transform: uppercase;
      font-size: 1.3em;
      font-weight: normal;
   }
   #navigation li a{color: #fff;}
   #navigation li a:hover,#navigation li.active a{color: #2c2c2c;}
   /* message and building pic */
   #banner{
      position: absolute;
      height: 125px;
      color: #a49c8f;
      font-weight: bold;
      padding:0 440px 0 7px;
      bottom: 0;
      background: url(../images/building.gif) right bottom no-repeat;
      font-size: 1.3em;
   }
   
/* =CONTENT - the content styles */
   /* left column */
   .leftbox{background: #006699;padding: 10px 23px 10px 23px;margin-bottom:3px;line-height:1.8em;}
   h3.leftbox{font-size:19px;color: #006699; background: #FF9900 url(../images/h3_bg_tall.jpg) 0 0 repeat-x;padding:5px 0 10px 23px;}
   h3.header_small{font-size:15px;font-weight: bold;background: #f1f0ef;padding:0 23px 5px 23px;}
   ul.leftbox{font-size: 1.2em;}

   .features{padding-top:15px;font:1.27em Arial, Helvetica, sans-serif;}
   
   #leftcolumn .leftbox p{padding-bottom:1em;line-height:1.5em; font-size:12px}   
   /* center column */
   .article_wrapper h2{color: #006699; font-size:2em;margin:10px 0;}
   .article_wrapper p{padding-bottom:10px;font-size:1.3em;}   
   /* right column */
   .rightbox_wrapper{
      background: #eeeded;
      padding:5px;
      margin-bottom: 20px;
      width:277px;
      overflow: hidden;
      font-size:11px;
      line-height: 18px;
      color: #000000;
   }
   .rightbox{border: 1px dashed #d9e0e8;width:275px;overflow: hidden;padding-bottom:6px;}
   .product_image{ float: left;margin: 6px 0 0 6px;}
   .product_wrapper{
   float: right;
   width:275px;
}
   .product_wrapper h4{font-size:1.3em;color: #FF9900;font-weight: bold;padding-top:10px;}
   .product_wrapper p{font-size:1em;}
   .lastbox{margin:0;}
/* =BOTTOM */
   .bottomcolumn h3{
      border-bottom: 4px solid #006699;
      color: #006699; font-size:18px;padding:15px 0 5px 5px;
   }
   .bottomcolumn p{
      padding: 10px 35px 10px 5px;
      font-size: 1.2em;
   }
   .iconlist{
      border-top: 1px dashed #d1cfcd;
      font-size: 1.2em;
   }
   ul.iconlist li a{
      padding-left: 25px;
      background: url(../images/footer_list.jpg) left bottom no-repeat;
   }
   ul.iconlist  li a:hover{background: #E9E4DE url(../images/footer_list.jpg) left top no-repeat;color: #42423b;}
   .enewsbox{
      float: left;
      width: 180px;
      height: 17px;
      padding:3px 5px;
      border: 4px solid #006699;
      font-size:13px;
   }
   .button{
   display: block;
   float: none;
   width: auto;
   line-height:1em;
   text-align: center;
   background: #006699;
   border: 4px solid #fff;
   color: #fff;
   cursor: pointer;
   margin:0; /* IE6 */
   padding-top: 3px;
   padding-right: 3px;
   padding-bottom: 3px;
   padding-left: 3px;
   }
   
/* =FOOTER */
   #footer{
      height: 37px;
      background: #4a4841 url(../images/footer_bg.jpg) 0 0 repeat-x;
      font-size: 1.2em;
   }
   #footer a{color: #A39D97;}
   #designby{
      
      float: left;
      height: 23px;
      padding:2px 0 0 30px;
      margin-top: 5px;
   }
   #footer_navigation{
      float: right;
      padding-top:7px;
   }
   #footer_navigation li{float: left;padding-left:18px;}
   #footer_navigation li a{text-transform:uppercase;}
   #footer_navigation li a:hover{color: #5699A7;}
   


css secundario:

Código :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{
border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;
font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;
}q:before,q:after{content:'';}abbr,acronym {border:0;}

Por Merca-Tech

51 de clabLevel



 

msie7
Citar            
MensajeEscrito el 11 May 2008 10:18 am
Con toda esa parrafada que has puesto... es un poco difícil que te ayudemos.

Consejos:
- pon un screenshot de cómo se ve en Safari, y marca los problemas.
- pon un screenshot de algún navegador en donde se vea como quieres.
- pon también el xHTML (generalmente, el CSS, sin el xHTML, no vale de nada).
- pon la URL de la página en cuestión.
Y esto, por favor:
- pon sólo el CSS involucrado en el problema, no la enorme parrafada de CSS, del cual la mayor parte, seguro que no tiene nada que ver.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 11 May 2008 06:16 pm
Una forma sencilla de validar tu css, es utilizar el Validador CSS del W3C. Si tienes errores de validación, él te lo dirá. También tienes un link al validador de XHTML.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 12 May 2008 01:36 am
Efectivamente Merca, como dice The Fricky si entras a http://jigsaw.w3.org/css-validator/ puedes validar tu hoja de estilos y además el xhtml y si hay algún error te dice en que linea de código está el problema.

Aparentemente tu problema está solamente en el reset, lo demás no muestra errores
Hace poco utilicé para un trabao el siguiente reset y no me dio errores, te lo dejo por si deseas utilizarlo

Código :

* { margin: 0; padding: 0; text-decoration: none; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit;  white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1.3; background: white; color: black; }
q { quotes: \\\"\\\" \\\"\\\"; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don\\\'t need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
blink { text-decoration: none; }
nobr { white-space: normal; }


En google vas a encontrar una gran cantidad de reset que puedes itilizar

saludos

Por onpress

68 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 20 Jun 2008 08:03 am
Muchas gracias a ambos por contestar y gracias por la información!.

He estado con mucho trabajo y la verdad es que no me dio tiempo a revisar nada, pero voy a probar tu codigo onpress y sino buscare en google algo de info aver si lo soluciono, ya que, todavia sigue igual!.

Saludos.

Por Merca-Tech

51 de clabLevel



 

msie7

 

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