Floating divs not working properly in Firefox

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

  •  07-10-2022
  •  | 
  •  

Question

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%;
}
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top