Hola amigos; tengo un problema con un diseño que vengo haciendo, el tema es que se ve distorsionado con Mozilla mientras que en IE8 se ve bien, la idea seria que no falle el diseño en ningun navegador, por favor si me pudieran ayudar, los codigos html y css son los siguientes
[URL="http://www.hosting-cusco.com/magic/mitest.html"]http://www.hosting-cusco.com/magic/mitest.html[/URL]
Por favor, espero me puedan ayudar a ver donde esta la falla en las hojas de estilo
este es el codigo de testbasic.css
html, body {
margin:0;
padding:0;
}
body{
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color: #eee;
color: #444;
font-size: 75%;
}
a{
color: #FAD17F;
text-decoration: none;
}
a:focus, a:hover, a:active {
text-decoration: underline;
}
p, li {
line-height: 1.8em;
}
h1, h2 {
font-family: "Trebuchet MS", Verdana, sans-serif;
margin: 0 0 10px 0;
letter-spacing:-1px;
}
h1 {
padding: 0;
font-size: 2em;
color: #333;
}
h2 {
padding-top: 10px;
font-size:1.5em;
}
pre {
font-size: 0.6em;
line-height: 1.2em;
overflow-x: auto;
}
div#page {
width: 100%;
background-color: #000;
margin: 0 auto;
text-align: left;
/*border-color: #ddd;
border-style: none solid solid;
border-width: medium 1px 1px;*/
}
div#container {
padding: 20px;
}
div#ads {
clear: both;
padding: 12px 0 12px 66px;
}
div#footer {
clear: both;
color: #777;
margin: 0 auto;
padding: 20px 0 40px;
text-align: center;
font-size:0.8em;
}
.menu{
text-align:center;
color:#FFF;
background-color:#000;
font-size:12px;
padding:2em 1em 2em 1em;
}
Y este es el codigo de testweb.css
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
float: left;
width: 900px;
}
div.content a, div.navigation a {
text-decoration: none;
color: #FAD17F;
}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
width: 840px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 840px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 840px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #FAD17F;
}
div.download {
float: right;
}
div.caption-container {
position: relative;
clear: left;
height: 75px;
}
span.image-caption {
display: block;
position: absolute;
width: 840px;
top: 0;
left: 0;
}
div.caption {
padding: 4px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0 0 0 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #FAD17F;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #FAD17F;
}
div.pagination a:hover {
background-color: #000;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
/*background-color: #000;
border-color: #000;
color: #fff;*/
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
Agradezco de antemano vuestro apoyo, muy agradecido
