Floating divs not working properly in Firefox

StackOverflow https://stackoverflow.com/questions/21603177

  •  07-10-2022
  •  | 
  •  

سؤال

My webpage works properly on Chrome and IE, but not on Firefox. I'm using liquid layout with scaling buttons and floating divs. At the moment the content slider should be in the middle of the page (like it is on Chrome and IE), but on Firefox it jumps to the top over the other buttons. What's wrong with my code?

index.html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Cnop</title>

</head>

<body>

<div id="col1"><a href="http://cnopicilin.deviantart.com/" target="new"><img src="Images/da.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.youtube.com/user/CnopHD" target="new"><img src="Images/Games.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.youtube.com/user/JARMOPOWER" target="new"><img src="Images/blue.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.youtube.com/channel/UC9w6xXZm7YYQMHEZNwJEt6w" target="_blank"><img src="Images/main.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.facebook.com/CnopMedia" target="new"><img src="Images/fb.png" class="opacity_img"></a></div>
<div id="col3"><a href="https://www.facebook.com/CnopMedia" target="new"><img src="Images/cnop.png" class="channel"></a></div>

<div class="erotin"></div>

<div class="container">
    <a href="#">
        <img class="thumb" src="Images/scroll/thumb1.png">
        <img class="big" src="Images/scroll/big1.png">
    </a>

    <a href="#">
        <img class="thumb" src="Images/scroll/thumb2.png">
        <img class="big" src="Images/scroll/big2.png">
    </a>

    <a href="#">
        <img class="thumb" src="Images/scroll/thumb3.png">
        <img class="big" src="Images/scroll/big3.png">
    </a>

    <a href="#">
        <img class="thumb" src="Images/scroll/thumb4.png">
        <img class="big" src="Images/scroll/big4.png">
    </a>

    <a href="#">
        <img class="big featured" src="Images/scroll/featured.png">
    </a>

    <a href="#">
        <img class="big featured2" src="Images/scroll/featured2.png">
    </a>
</div>

</body> 

</html>

CSS:

body {
    background-color: #000000;
    /*background-image:url(Images/tausta.jpg);
    background-size: 100% auto;
    background-repeat:no-repeat; */
    min-height: 650px;
    min-width: 1156px;
    padding:0;
    margin:0;
} 

#col1 {
    float: right;
    width: 5%;
    margin-right: 8%;
    margin-top: 1%;
}

#col2 {
    float: right;
    width: 5%;
    margin-right: 1%;
    margin-top: 1%;
}

#col3 {
    float: left;
    width: 10%;
    margin-left: 8%;
    margin-top: 1%;
}

img.channel {
    float: right;
    height: auto;
    max-width: 100%;
}

.opacity_img {
    opacity: 0.45;
    float: right;
    height: auto;
    max-width: 100%;
}
.opacity_img:hover {
    cursor:pointer;
    opacity: 1.0;
    float: right;
    height: auto;
    max-width: 100%;
}

.container {
    position: relative;
    height: 540px;
    width: 960px;
    overflow: hidden;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding-top: 20px;
}

.container a {
    float: left;
    margin: 20px;
}

.big {
    position: absolute;
    top: 160px;
    left: 20px;
}

.big {
    position: absolute;
    top: 900px;
    left: 20px;

    -webkit-transition: top 0.75s ease;
    -moz-transition: top 0.75s ease;
    -o-transition: top 0.75s ease;
    -ms-transition: top 0.75s ease;
    transition: top 0.75s ease;
}

.featured {
    top: 160px;
    z-index: -3;
}

.featured2 {
    top: 160px;
    z-index: 10;
}

.thumb {
    opacity: 0.65;
    float: right;
    height: auto;
    max-width: 100%;
}

a:hover .thumb {
    opacity: 1.0;
}

a:hover .big {
    top: 160px;
}

.erotin {
    float: left;
    background-color:#FFFFFF;
    width: 90%;
    height: 1px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1%;
}
هل كانت مفيدة؟

المحلول

The reason is, that the .container doesn't clear the float of the elements above.

add clear:both; to the .container -block in the css then it's working in ff ;)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top