Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: ZeroRcp en 14 Septiembre 2015, 16:25 PM

Título: me rindo con internet explorer 8 >:v
Publicado por: ZeroRcp en 14 Septiembre 2015, 16:25 PM
bueno si la verdad me rindo con internet explorer 8, la verdad quizas para muchos no sea complejo, pero odio al momento de programar algun css, porque papi explorer destruye todo...
pero quejarme aqui no es mi objetivo...
la verdad estoy haciendo un menu para internet explorer, pero da la grandiosa casualidad que despues de colocar el siguiente codigo:

Código (css) [Seleccionar]
body{
   background: #ededed;
   margin:0;
   padding:0;
}

#menu_wrap{
   position:relative;
   margin-top:20px;
   margin-left:auto;
   margin-right:auto;
   padding:0;
   padding-right:0px;
   width:100%;
   height:57px;
   list-style-type:none;
   -webkit-border-radius:0px;
   -moz-border-radius:0px;
   border-radius:0px;
   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
   -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
   box-shadow:0 1px 3px rgba(0,0,0,.2)
}

.button a{
   cursor:pointer;
   text-align:center;
   font:15px/100% Arial, Helvetica, sans-serif;
   font-weight:bold;
   position:relative;
   min-width:50px;
   height:20px;
   float:left;
   padding:10px;
   padding-top:18.5px;
   padding-bottom:18.5px;
   text-decoration:none;
   text-shadow:0 1px 1px rgba(0,0,0,.3)
}

.button:first-child a{
   -webkit-border-top-left-radius:0px;
   -webkit-border-bottom-left-radius:0px;
   -moz-border-topleft-radius:0px;
   -moz-border-bottomleft-radius:0px;
   border-top-left-radius:0;
   border-bottom-left-radius:0px;
}

.Orange,.Orange .button a{
   color:#fef4e9;
   background: #f9bc59;
   border-right:solid 1px #f27c21;
   background: -moz-linear-gradient(top, #f9bc59 0%, #f27c21 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9bc59), color-stop(100%,#f27c21));
   background: -webkit-linear-gradient(top, #f9bc59 0%,#f27c21 100%);
   background: -o-linear-gradient(top, #f9bc59 0%,#f27c21 100%);
   background: -ms-linear-gradient(top, #f9bc59 0%,#f27c21 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bc59', endColorstr='#f27c21',GradientType=0 );
   background: linear-gradient(top, #f9bc59 0%,#f27c21 100%);
}

.Orange .button a:hover,.Orange .button a:focus{
   background: #f88e11;
   background: -moz-linear-gradient(top, #f88e11 0%, #e25300 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88e11), color-stop(100%,#e25300));
   background: -webkit-linear-gradient(top, #f88e11 0%,#e25300 100%);
   background: -o-linear-gradient(top, #f88e11 0%,#e25300 100%);
   background: -ms-linear-gradient(top, #f88e11 0%,#e25300 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88e11', endColorstr='#e25300',GradientType=0 );
   background: linear-gradient(top, #f88e11 0%,#e25300 100%);
}

.Orange .button a:active{
   color:#fcd3a5;
   background: #f47a20;
   background: -moz-linear-gradient(top, #f47a20 0%, #faa51a 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f47a20), color-stop(100%,#faa51a));
   background: -webkit-linear-gradient(top, #f47a20 0%,#faa51a 100%);
   background: -o-linear-gradient(top, #f47a20 0%,#faa51a 100%);
   background: -ms-linear-gradient(top, #f47a20 0%,#faa51a 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f47a20', endColorstr='#faa51a',GradientType=0 );
   background: linear-gradient(top, #f47a20 0%,#faa51a 100%);
}

.button:last-child a{
   float:left;border:none;
   -webkit-border-top-right-radius:0px;
   -webkit-border-bottom-right-radius:0px;
   -moz-border-radius:0px;
   border-top-right-radius:0px;
   border-bottom-right-radius:0px
}


en explorer la obra maestra me aparece esto

un menu completamente disvariado y desacomodado como si fuera en escalera.... no se como enviar una imagen aqui para que lo vieran, pero se ve mal...
me pueden decir si es error del codigo o que debo hacer?


Mod: Los códigos deben ir en etiquetas GeSHi
Título: Re: me rindo con internet explorer 8 >:v
Publicado por: engel lex en 14 Septiembre 2015, 16:30 PM
puedes splicar los comentarios macro de IE

para el css normal (no ie)
Código (html4strict) [Seleccionar]
<!--[if !IE]><!-->
aqui tu css normal
<!--<![endif]-->


para IE
Código (html4strict) [Seleccionar]
<!--[if IE]>
css para el navegador especialito
<![endif]-->


es preferible hacerlos por separado, que junto