当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Why dosn't my slider show up correct in firefox?

问题描述:

The slider at the top of my page does show up perfect in Chrome, but not in Firefox. How can I fix this problem?

I already uploaded a test of the page, in case you would like to have a look.

Test of page: http://www.s4ea.org/new/index.html

HTML:

<header class="header2">

<header class="second">

<div class="top_slider">

<div id="slider" class="aslider" data-duration="10" data-hide-controls>

<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>

<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />

</div>

<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">

<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />

</div>

<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">

<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />

</div>

<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">

<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />

</div>

</div>

</div>

<div class="logo">

<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">

</div>

<div class="right">

<a href="http://www.s4ea.org/images/docs&maps/CALENDAR.pdf"><img src="http://www.s4ea.org/images/register3.jpg" height="100%" width="auto" /></a>

</div>

</header>

</header>

CSS:

.ul {

width:50%;

list-style:none;

display:inline;

background-color:#FFF;

}

.ul li {

display: inline;

background-color:#FFF;

}

.second .top_slider {

width:40%;

background-color: #FFF;

float:left;

}

.second .top_slider .aslide {

display: none;

}

.second .top_slider .aslide img {

max-width: 100%;

height:auto;

}

.second .top_slider #slider {

width: 100%;

height: 600px;

}

.second .top_slider .aslide .text {

width: 200px;

margin: 0 auto;

color: #f8f8f8;

text-shadow: 0 0 2px #000;

font-weight: bold;

font-size: 36px;

width: 100%;

text-align: center;

position: absolute;

bottom: 30px;

font-family: sans-serif;

}

.second .logo {

width: 26.7%;

background-color: #FFF;

float:left;

padding-left:3.3%;

}

.second .right {

width:26.7%;

background-color: #FFF;

float:left;

overflow:hidden;

font-size:1em;

height:100%;

padding:0% 0% 0% 3.3%;

}

.second .right img {

margin:0px 0px 0px 0px;

width:100%;

height:auto;

}

.second .right ul li{

list-style:none;

line-height:0px;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

}

.second .right ul {

list-style:none;

line-height:0px;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

}

.second .right ul li img{

list-style:none;

line-height:0px;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

height: 20%;

padding-top:5%;

width:auto;

}

网友答案:

A couple of issues

.second .top_slider .aslide img {
    width: 100%;
    height:auto;             
}

.mainheader nav {
    background-color: #FFFFFF;
    float: left;
    height: 10%;
    width: 100%;
}

it seems the width of the images are not correct since you did not set a width and your nav just needed a float clear. I cleared it by making it a float but there are many other ways to do this

分享给朋友:
您可能感兴趣的文章:
随机阅读: