CSS absolute positioned button doesnt work in Firefox + fiddle - html

Question

I cant figure out why the red buttons are not displayed properly in firefox. In chrome it looks good.
Here is the fiddle:
Fiddle
That is my chrome:
That is my firefox:
My HTML:
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
My CSS:
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
}
Well I dont know what details to add. I tried to change everything in firefox browser dev tools but could never achieve the same behaviour as in chrome.

Answer 1

https://jsfiddle.net/7vz89t4d/2/
.img-element-del {
position: relative; /* this is new */
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
position: absolute;
bottom: 0; /* this is new */
left: 0; /* this is new */
}
Short explanation:
If using position:absolute; do also set position:relative; to the parent. Then absolute is always from the parent.
This picture might help:
the picture is from css-tricks.com/absolute-positioning-inside-relative-positioning which explains it even a little further.
The above picture in code would look like:
.parent {
position: relative;
width: 400px;
height: 300px;
border: solid 3px CHOCOLATE;
}
.absolute-one,
.absolute-two,
.absolute-three {
position: absolute;
background-color: CHOCOLATE;
color: white;
padding: 10px;
width: 100px;
height: 100px;
}
.absolute-one {
top: 0;
left: 0;
}
.absolute-two {
bottom: 5px;
left: 10px;
}
.absolute-three {
top: 30%;
right: -25px;
}
<div class="parent">
<div class="absolute-one">
top: 0;
left: 0;
</div>
<div class="absolute-two">
bottom: 5px;
left: 10px;
</div>
<div class="absolute-three">
top: 30%;
right: -25px;
</div>
</div>

Answer 2

I've updated your fiddle here -> https://jsfiddle.net/7vz89t4d/3/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
bottom: 0;
left: 0;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>

Answer 3

Try adding "Left:0;" and "bottom:0;" in your deletebtn css

Answer 4

Here I have craeted a new one. You do not have to use position absolute or something similar.
jsfiddle
I have just put each "image" and "a" in a div
<div class="bilder-row">
<img src="..."/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
and style:
.bilder-row{width:160px;float:left;}
this will solve the problem.

Answer 5

When styling a page with markup, generally avoid absolute positioning within your layout. Absolutely positioned items make for very brittle layouts which make responsive design very very challenging. Only use it as a last resort. I'd recommend you fully utilize Bootstrap. It's a very powerful tool but is opinionated about your markup. I've refactored your example into something more responsive while taking full advantage of the Bootstrap grid: http://getbootstrap.com/css/#grid
Here's the full Codepen example: http://codepen.io/toddsby/pen/pRLQem
Viewed on Firefox 51 (macOS)
HTML
<div class="row gutter-5">
<div class="img-element-del col-xs-3">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg" />
<div class="deletebtn-container">
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
</div>
</div>
CSS
/** custom Bootstrap grid gutter **/
.row.gutter-5 {
margin-left: -10px;
margin-right: -10px;
}
.gutter-5 > [class*="col-"], .gutter-5 > [class*=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
I've moved the items into a col-3 (12/4) grid. Then styled the image and button to take up 100% of their containers. This allows for a flexible and responsive layout. You can then use Bootstrap breakpoints to target different devices. ie <div class="img-element-del col-xs-1 col-md-2 col-lg-3">
Note: This layout would be very simple with Flexbox. As of 2016, Flexbox is supported by all major browsers! You can learn more about Flexbox here: https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af

Answer 6

Try add position: relative; to .img-element-del
and to .deletebtn add this properties:
z-index: 1;
left: 0;
bottom: 10px;