Floating divs not working properly in Firefox

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

  •  07-10-2022
  •  | 
  •  

Pregunta

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%;
}
¿Fue útil?

Solución

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 ;)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top