Why Does Firefox Render Dashed Borders Misaligned from Each Other

Why does Firefox render dashed borders misaligned from each other?

For the "why?" part of the question, there's a fairly simple explanation: the w3c doesn't define how to draw the border, so each browser writes their own independent implementation. Firefox's algorithm appears to render the border in a circular pattern, as opposed to WebKit's symmetrical pattern:

┌─ ─ ─ ─ ─ ─ ─ ─ ┐    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐
|                ↓    ↓                 ↓
|                |    |                 |
|                |    |                 |
↑                |    |                 |
└ ─ ─ ─ ─ ─ ─ ─ ─┘    └ ─ ─ ─ ─ ─ ─ ─ ─ ┘
     Firefox                WebKit

You will notice that Internet Explorer doesn't draw the box the same as Opera/Chrome/Safari, either. There's a slight gap to the left of the border on both the top and the bottom (although this might be fixable with border-collapse).

Div's with same content and same style have different dashed borders

That's going to be a rendering issue from your browser. It looks like it's working fine in Chrome but latest Firefox and IE are showing different borders like you said.

If you really must have it fixed I would recommend using pseudo elements with their border-top parameters set to the same value.

.first:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top:1px dashed #FFFFFF;
    height: 1px;
}

http://jsfiddle.net/st9uesqd/

Dashed border on link is appearing solid

Apparently, it's the result of a privacy issue. Refer to the following links:

• Privacy and the :visited selector (MDN)
• Preventing attacks on a user's history through CSS :visited selectors
• Limitations on Styling Visited Links

Per the links above, the styling of a:visited links is restricted to the use of color-based properties only.

IE/Firefox CSS confusion: Why does my table have inside borders on Firefox, but not IE?

A bit of poking around in Firebug reveals that removing the border-collapse:collapse style from the ctl00_wpm_Basket_ctl04_BasketGrid table removes the borders. I'm not even going to try to explain this - the style should be completely unnecessary, as like many of the other applicable styles it's set and reset multiple times at multiple levels... I suspect you're encountering some subtle difference between how styles are applied in Gecko and other browsers; it's probably a bug, but I would encourage you to slim down the test case if you decide to report it...

this isn't something that is currently scoped to fix

It probably should be... Otherwise, you'd better get comfortable using Firebug.

Does Chrome treat css borders differently than Firefox?

Different browsers treat boders differently, try adding this to your .tab class:

.tab {
    ...
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

See http://paulirish.com/2012/box-sizing-border-box-ftw/
and/or http://css-tricks.com/box-sizing/

Alternatively, you could do the following to fix this "issue" for all elements:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

Problem in firefox vs chrome with bold text and double borders

Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.

Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.

You can put the code below in your css to target Firefox and bring the outline back in:

@-moz-document url-prefix() {
    #content{
        outline-offset: -11px;
    }
}

Live example: http://jsfiddle.net/tw16/n8bet/

---

Related Topics