Ojalá me puedan ayudar con este problema que me está llevando una semana de dolores de cabeza.
Tengo una página web, con un css del sitio. Agregué un componente jquery que utiliza dos css. Se ve perfecto en chrome, pero en explorer se ve mal.
Supongo que debe ser un tema de standar, pero ya no se donde mas buscar.
El css de mi site es este:
Código HTML:
* {
margin: 0;
padding: 0;
}
a {
text-decoration: underline;
color: #DB4A4A;
}
a:hover {
text-decoration: none;
}
body {
line-height: 1.75em;
background: #222424 url(images/img01.gif) repeat-x top left;
color: #C0C1C1;
font-size: 11.5pt;
}
body,input {
font-family: Tahoma, sans-serif;
}
br.clearfix {
clear: both;
}
ul {
margin-bottom: 1.5em;
}
#footer {
padding: 70px 0 110px 0;
text-align: center;
margin: 0 0 45px 0;
}
#footer a {
color: #C0C1C1;
}
#footer2 {
padding: 70px 0 110px 0;
text-align: center;
margin: 0 0 45px 0;
}
#header {
height: 125px;
position: relative;
padding: 40px;
top: 0px;
left: 0px;
}
#logo {
margin: -20px auto;
height: 110px;
line-height: 110px;
text-align: center;
position: relative;
top: 0px;
left: 0px;
}
#logo a {
color: #FFFFFF;
text-decoration: none;
}
#logo h1 {
font-size: 2.8em;
font-family: Oswald, sans-serif;
}
#menu {
line-height: 55px;
position: absolute;
bottom: 0;
height: 55px;
background: #AF1E1E url(images/img02.gif) repeat-x top left;
left: 0;
font-family: Oswald, sans-serif;
width: 980px;
border-top: solid 1px #FF9696;
border-bottom: solid 1px #9B0A0A;
}
#menu a {
font-size: 1.1em;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu ul {
width: 980px;
list-style: none;
text-align: center;
}
#menu ul li {
text-align: center;
padding: 8px 15px 8px 15px;
margin: 0 5px 0 5px;
display: inline;
}
#menu ul li.current_page_item {
background: #912727;
border-top: solid 1px #9B0A0A;
border-bottom: solid 1px #FF9696;
}
#page {
position: relative;
margin: 0 0 0 0;
width: 980px;
padding: 0;
}
#post1 {
overflow: hidden;
margin: 0 0 30px 0;
}
#wrapper {
width: 980px;
position: relative;
margin: 0px auto 0 auto;
}
Código HTML:
body { margin:0px; font-family:Arial, Helvetica, sans-serif; background:#39414A; }
#container { width:980px; margin:0px auto 0px; background:#FFFFFF; padding:10px; font-size:12px; margin-top:50px; }
a{
text-transform:none;
color:#333
}
#footerSlider{
background:#F0F0F0;
padding:10px;
border:#999 dotted 1px;
}
Código HTML:
@charset "utf-8";
/* CSS Document */
/* slider layout */
.lof-slidecontent { position:relative; overflow:hidden; border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.lof-slidecontent .preload div{ height:100%; width:100%; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-slidecontent .sliders-wrapper{ position:relative; height:100%; width:900px; z-index:3px; overflow:hidden; }
.lof-slidecontent ul.sliders-wrap-inner{overflow:hidden; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;}
.lof-slidecontent ul.sliders-wrap-inner li{overflow:hidden; padding:0px;margin:0px; float:left; position:relative;}
.lof-slidecontent .lof-opacity li{position:absolute; top:0; left:0; float:inherit; }
.lof-slidecontent .navigator-content {position:absolute;
right:0;
top:00px;
z-index:9;
height:300px;
width:310px;
overflow:hidden;
color:#FFF
}
.lof-slidecontent .navigator-wrapper{ position:relative; z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
.lof-slidecontent ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
.lof-slidecontent ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin-left:0px; overflow:hidden; float:left; display:block; text-align:center;}
/*******************************************************/
ul.sliders-wrap-inner li img{ padding:0px; }
.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
z-index:100px;
position:absolute;
bottom:66px;
left:0px;
width:250px;
background:url(../images/bg_trans.png);
height:80px;
padding:10px;
color:#FFF;
}
.lof-slidecontent .slider-description h4 { font-size: 14px; margin: 10px 0; padding: 0; }
.lof-slidecontent .slider-description .slider-meta h5{
margin:0;
background:#C01F25;
font-size:75%;
padding:2px 3px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
text-transform:uppercase;
text-decoration:none
}
.lof-slidecontent .item-meta a:hover{ text-decoration:underline;}
.lof-slidecontent .item-meta i { font-size:70%; }
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li.active{
background:url(../images/arrow-bg.png) no-repeat scroll left center;
color:#FFF
}
.lof-slidecontent ul.navigator-wrap-inner li > div{
background:url(../images/transparent_bg.png);
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.lof-slidecontent ul.navigator-wrap-inner li.active div{
background:url(../images/grad-bg.gif);
color:#FFF;
}
.lof-slidecontent ul.navigator-wrap-inner li img{
height:60px;
width:60px;
margin:15px 15px 10px 0px;
float:left;
padding:3px;
border:#C5C5C5 solid 1px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
border:##6C8E5C solid 1px;
}
.lof-slidecontent .button-next,
.lof-slidecontent .button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.lof-slidecontent .button-next {
right:0px;
background:url(../images/next.png) no-repeat right center;
}
.lof-slidecontent .button-previous {
left:0px;
background:url(../images/previous.png) no-repeat left center;
}
.lof-slidecontent .button-control {
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
background:url(../images/transparent_bg.png) repeat;
}
.lof-slidecontent .button-control span { display:block; width:100%; height:100%;}
.lof-slidecontent .action-start span {
background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
background:url(../images/pause.png) no-repeat center center;
}
Muchas gracias desde ya.
