Website is displayed wrong in Firefox
Question
I have programmed a website and it works fine. Basically I am using this FullPage Slider. Everything works fine but not in Firefox. One section with a table that holds these image overlay hover Effects. The image overlay library is tested in Firefox and works fine. But not in Firefox for me.
It's time for some Code.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title class="uppercase">MY HOMEPAGE</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../css/imagehovereffect.css" >
<link rel="stylesheet" type="text/css" href="../css/basics.css" >
<link rel="stylesheet" type="text/css" href="../css/menu.css" >
<link rel="stylesheet" type="text/css" href="../css/popup.css" >
<style>
/* Centered texts in each section
* --------------------------------------- */
.section {
text-align: center;
}
</style>
<!-- js -->
<script type="text/javascript" src="../js/vendor/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/fullpage/vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="../js/fullpage/jquery.fullPage.js"></script>
<script type="text/javascript" src="../js/fullpage/examples.js"></script>
<script src="../js/imgLiquid-min.js"></script>
<script src="../js/modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
sectionsColor: ['#fff', '#fff', '#fff', '#fff'],
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['Intro', 'References', 'About', 'Contact']
});
if (Modernizr.touch) {
// show the close overlay button
$(".close-overlay").removeClass("hidden");
// handle the adding of hover class when clicked
$(".img").click(function(e){
if (!$(this).hasClass("hover")) {
$(this).addClass("hover");
}
});
// handle the closing of the overlay
$(".close-overlay").click(function(e){
e.preventDefault();
e.stopPropagation();
if ($(this).closest(".img").hasClass("hover")) {
$(this).closest(".img").removeClass("hover");
}
});
} else {
// handle the mouseenter functionality
$(".img").mouseenter(function(){
$(this).addClass("hover");
})
// handle the mouseleave functionality
.mouseleave(function(){
$(this).removeClass("hover");
});
}
});
$(document).ready(function() {
$(".imgLiquidFill").imgLiquid();
});
$(document).ready(function(){ $.fn.fullpage.reBuild() });
</script>
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=ErrorPage.html">
</noscript>
</head>
<body>
<a class="noDecorationLink" href="index.html"><img src="../img/Back_Button.png" alt="Back Button" class="backButton"></a>
<div id="fullpage">
<div class="section" id="section1">
<table class="tableReferences">
<tr class="row1">
<td>
<table class="tableRow1">
<tr>
<td class="cell1">
<div class="referencesPic" style="background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>
</td>
<td class="cell2">
<div class="container">
<div class="demo num1">
<table class="hoverContent">
<tr>
<td class="hoverContent">
Backgroundtext
</td>
</tr>
</table>
</div>
<div class="effects clearfix num2 effect-1">
<div class="img invisibleAnimationContainer">
<img src="../img/background.png" alt="" >
<div class="overlay expand">
<table class="hoverContent">
<tr>
<td class="hoverContent">
hallo meine Freunde
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
<td class="cell3">
<div class="container">
<div class="demo num1" style="background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>
<div class="effects clearfix num2 effect-1">
<div class="img invisibleAnimationContainer">
<img src="../img/background.png" alt="" >
<div class="overlay expand">
<table class="hoverContent">
<tr>
<td class="hoverContent">
Foregroundtext
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr class="row2">
<td>
<table class="tableRow2">
<tr>
<td class="cell1">
<div class="container">
<div class="demo num1">
<table class="hoverContent">
<tr>
<td class="hoverContent">
Background
</td>
</tr>
</table>
</div>
<div class="effects clearfix num2 effect-1">
<div class="img invisibleAnimationContainer">
<img src="../img/background.png" alt="" >
<div class="overlay expand">
<table class="hoverContent">
<tr>
<td class="hoverContent">
hallo meine Freunde
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
<td class="cell2">
<div class="container">
<div class="demo num1" style="background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>
<div class="effects clearfix num2 effect-1">
<div class="img invisibleAnimationContainer">
<img src="../img/background.png" alt="" >
<div class="overlay expand">
<table class="hoverContent">
<tr>
<td class="hoverContent">
Foregroundtext
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
<td class="cell3">
<div class="referencesPic" style="background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr class="row3">
<td>
<table class="tableRow3">
<tr>
<td class="cell1">
<div class="container">
<div class="demo num1" style="background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>
<div class="effects clearfix num2 effect-1">
<div class="img invisibleAnimationContainer">
<img src="../img/background.png" alt="" >
<div class="overlay expand">
<table class="hoverContent">
<tr>
<td class="hoverContent">
Foregroundtext
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
<td class="cell2">
<div class="referencesPic" style="background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>
</td>
<td class="cell3">
<div class="container">
<div class="demo num1">
<table class="hoverContent">
<tr>
<td class="hoverContent">
Backgroundtext
</td>
</tr>
</table>
</div>
<div class="effects clearfix num2 effect-1">
<div class="img invisibleAnimationContainer">
<img src="../img/background.png" alt="" >
<div class="overlay expand">
<table class="hoverContent">
<tr>
<td class="hoverContent">
hallo meine Freunde
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
CSS:
#section1.section .tableReferences {
width:100%;
height:100%;
background-color:#F3A008;
border-collapse: collapse;
}
#section1.section .tableReferences .row1 {
height:33.33%;
}
#section1.section .tableReferences .row1 .tableRow1{
height:100%;
width:100%;
border-collapse: collapse;
}
#section1.section .tableReferences .row1 .tableRow1 .cell1{
width:25%;
}
#section1.section .tableReferences .row1 .tableRow1 .cell2{
width:50%;
}
#section1.section .tableReferences .row1 .tableRow1 .cell3{
width:25%;
}
#section1.section .tableReferences .row2 {
height:33.33%;
}
#section1.section .tableReferences .row2 .tableRow2{
height:100%;
width:100%;
border-collapse: collapse;
}
#section1.section .tableReferences .row2 .tableRow2 .cell1{
width:50%;
}
#section1.section .tableReferences .row2 .tableRow2 .cell2{
width:25%;
}
#section1.section .tableReferences .row2 .tableRow2 .cell3{
width:25%;
}
#section1.section .tableReferences .row3 {
height:33.33%;
}
#section1.section .tableReferences .row3 .tableRow3{
height:100%;
width:100%;
border-collapse: collapse;
}
#section1.section .tableReferences .row3 .tableRow3 .cell1{
width:25%;
}
#section1.section .tableReferences .row3 .tableRow3 .cell2{
width:25%;
}
#section1.section .tableReferences .row3 .tableRow3 .cell3{
width:50%;
}
#section1.section .tableReferences .container{
height: 100%;
width: 100%;
position: relative;
z-index:2;
}
#section1.section .tableReferences .num2{
height: 100%;
width: 100%;
position: absolute; left: 0px;
z-index: 2;
}
#section1.section .tableReferences .num1{
height: 100%;
width: 100%;
position: absolute; left: 0px;
z-index: 1;
}
#section1.section .tableReferences .num2{
height: 100%;
width: 100%;
position: absolute; left: 0px;
z-index: 2;
}
#section1.section .tableReferences .num1{
height: 100%;
width: 100%;
position: absolute; left: 0px;
z-index: 1;
}
#section1.section .invisibleAnimationContainer {
height:100%;
width:100%;
}
.referencesPic {
height:100%;
width:100%;
background-color:black;
}
.hoverContent {
height:100%;
width:100%;
font-size:2.0vh;
text-align:center;
color:yellow;
horizontal-align:center;
}
.imageContainer{
height:100%;
width:100%;
background-color:green;
}
/* Test */
.myScreen {
height:100%;
width:100%;
background-color:green;
}
I am very grateful for every help because I have already spent hours on that issue and I am not able to fix it....
2 answers
solution1
0 2015-09-07 20:30:41
As pointed out here , add background-clip: padding-box to your td elements and it should work. Seems like this bug in Firefox hasn't been fixed?
solution2
0 2015-09-10 15:58:55
Okay, I have found out, that Firefox finally display an image when I add
height:100px; width:100px;
to a div with background image. On one hand the image is displayed on the other it is useless without a relative size. And a value of '%' does not work... The hover effect still does not work.
And with
width: -moz-available;
I have got the full width of the picture. How can I get the height like that too? the -moz-available argument does not work for it.
The website works fine on Safari, Chrome, IE and Opera. Just not on Firefox
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Get specific elements of a website displayed in firefox
svg not displayed in Firefox
Header not displayed correctly in Firefox
HR displayed different in Firefox
Website not displayed properly in Safari
only part of a website displayed
the image is displayed wrong
Button displayed in a different position on Firefox
the letters “ff” in “staff” are not displayed in Firefox
Change Image Displayed When Website Is Displayed On Facebook?
Related Tags