CSS outline different behavior behavior on Webkit & Gecko
This inconsistent behavior of Gecko is well-known and quite adequately documented, although strangely not at MDN but at the SitePoint Reference:
Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.
This continues to affect all versions of Firefox. I don't see a viable workaround for it at the moment, other than to remove your absolutely-positioned div
from its parent and place it relative to... something else.
Have i found a bug in CSS rendering on some browsers? Involved both webkit and gecko
It's not a bug. The percent defines a percent relative to the parent, the parent is an inline-block element with auto width, so the behavior is that expected. Change to inline and it works
BUG:<div style="width: 1000px; position: relative"> <div style="display: inline; background-color: #ff0000"> <div style="position: absolute; top: 10px; right: 10px">My Floating Div</div> <img src="http://placehold.it/1200x1500" style="width: 30%"> </div></div>
<br>
WORKING:<div style="width: 1000px; position: relative"> <div style="display: inline-block; background-color: #ff0000; position: relative"> <div style="position: absolute; top: 10px; right: 10px">My Floating Div</div> <img src="http://placehold.it/1200x1500" style="width: 300px"> </div></div>
Print Stylesheet - Printed Page width Different in Webkit vs. Gecko/IE
I've decided to give up on trying to improve the print stylesheets anymore, and instead just accept the odd spacing issues in different browsers.
I would recommend, to anyone else trying to style your pages for print, to consider using @screen instead of @all for your main site stylesheets, though—this makes styling things for print easier on some more complex layouts.
Anyways, we should just move into the 21st century and forget about printing ;-)
Sticky flexible footers and headers CSS working fine in WebKit, but not in Gecko
I've discovered with a couple of extra div's and a crucial display: inline-block
it is possible to use the absolute positioning trick Torben mentions, in Firefox as well. This means that fully flexible header and footer is possible as a pure CSS solution.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
overflow-y: auto;
position: relative;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
Header
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
Footer
</div>
</section>
</div>
</body>
</html>
Hope this helps
More Webkit Fail
I'm sorry to say that the HTML in your JSFiddle is far from optimal. You really should never ever use tables for layout. Not only do they require a bunch of unnecessary markup, they confuse screen readers and search engines and are more difficult to style than "normal" elements.
Here's a modern take on the design you're trying to achieve: http://jsfiddle.net/UzPjW/
I've left comments in the CSS that should explain what's going on.
webkit baseline middle and moz middle with baseline
@VSG24:
Are they part of any standards?
Both properties are not part of any standards, according to W3C CSS reference. They only seem to be used by Webkit and Gecko to behave correctly, as expected in CSS 2.1 specification:
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
CSS 2.1 specs, p170
@VSG24:
What is the expected behavior when using them?
After some search on the web, here's what I've found about -webkit-baseline-middle
on the Safari CSS Reference:
vertical-align: -webkit-baseline-middle
:
The center of the element is aligned with the baseline of the text.
I was unable to get any info about -moz-middle-with-baseline
other than this one :
Q: Webkit-baseline-middle - are there alternatives?
A: the same, only for Mozilla
>vertical-align: -moz-middle-with-baseline;
https://toster.ru/q/255210
Below is a test, you may try it using Webkit based browsers (such as Chrome) and Gecko (Firefox):
div {
width: 15%;
height: 100px;
display: inline-block;
box-sizing: border-box;
}
hr {
width: 100%;
position: absolute;
top: 90px;
height: 1px;
background: hotpink;
border: none;
}
.container {
border: 2px solid hotpink;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 100%;
z-index: -1;
}
.reference {
background: darkblue;
}
.standard {
background: teal;
vertical-align: middle;
}
.moz {
background: antiquewhite;
vertical-align: -moz-middle-with-baseline;
}
.webkit {
background: darksalmon;
vertical-align: -webkit-baseline-middle
}
<div class="container">
<hr />
<div class="reference"></div>
<div class="standard"></div>
<div class="moz"></div>
<div class="webkit"></div>
</div>
Firefox label element border cut off with position relative
This positioning of the input elements to the far left
label.input-control input {
left: -9999px;
position: absolute;
}
makes the label outline expand to the left as well (at least in Firefox).
Simply adding overflow:hidden
for the label
elements should fix that:
label.input-control {
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/g617z4qk/5/
Related Topics
Django Forms and Bootstrap - CSS Classes and <Divs>
Vertically Centering Content of :Before/:After Pseudo-Elements
Newline Character Sequence in CSS 'Content' Property
CSS How to Make an Element Fade in and Then Fade Out
Is There a 'Box-Shadow-Color' Property
Zoom Control and Streetview Not Showing on My Google Map
Continuous CSS Rotation Animation on Hover, Animated Back to 0Deg on Hover Out
How to Prevent a CSS Keyframe Animation from Running on Page Load
How to Decrease Image Brightness in CSS
How to Use Vertical Align in Bootstrap
Styling Mat-Select in Angular Material
CSS Two Div Width 50% in One Line with Line Break in File
CSS Sticky Footers with Unknown Height
Styling Elements with a Dot (.) in the Class Name
Differencebetween Block and Inline-Block with Width: 100%
Why Is Backface-Visibility Hidden Not Working in Ie10 When Perspective Is Applied to Parent Elements