CSS "Outline" Different Behavior Behavior on Webkit & Gecko

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

Diagram showing the effect of various values of 'vertical-align' on table cells

@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/

CSS "Outline" Different Behavior Behavior on Webkit & Gecko