Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What could make Firefox render an incorrect border width?

Tags:

html

css

firefox

I have a weird problem in a project I'm working on. Firefox (22) magically eats up 1 pixel of my border. All other browsers are fine.

Now, the layout is really complex and I can't show all the code, but I hope this is the relevant part:

HTML

<div class="carouselitem unselectable photo selected">
    <img alt="" src="https://example.com/something.jpg" class="carouselimg">
    <div class="typeicon"></div>
 </div>

CSS

.mediacarousel .carouselitem.selected {
    border: 5px solid white;
    height: 71px;
    opacity: 1;
    width: 136px;
}
.mediacarousel .carouselitem:hover .carouselimg,
.mediacarousel .carouselitem.selected .carouselimg {
    left: -5px;
    position: relative;
    top: -5px;
}
.mediacarousel .carouselitem,
.mediacarousel .carouselimg {
    width: 146px;
}
.mediacarousel .carouselimg {
    vertical-align: top;
}
.mediacarousel .carouselarrow, .mediacarousel .carouselscroller,
.mediacarousel .carouselitems, .mediacarousel .carouselitem, .mediacarousel .carouselimg {
    height: 81px;
}
img, .unselectable {
    -moz-user-select: none;
}
.mediacarousel .carouselitem .typeicon {
    display: none;
    filter: inherit;
}

Firebug shows this:

enter image description here

Uhm, 4.8px, seriously? CSS looks good:

enter image description here

But, 1 complete pixel is somehow disappearing...

enter image description here

I have never seen something like this, and I had no success in finding the root of the evil. So my question is:
What exactly may be the cause for this? Is it a known bug?


Edit:
Turns out this only happens when the font size in Windows 7 is set to 125%. Still not something you would expect. Here's a fiddle where you can try yourself: http://jsfiddle.net/mdynm/1

like image 568
user123444555621 Avatar asked Jun 30 '13 20:06

user123444555621


People also ask

How do you change the width of a border?

Select one or more cells that have a border that you want to change. Right-click over the cells you've chosen and select Format Cells and, in the popup window, click the Border tab. For a continuous line, choose one of the thicker styles from the Line box. In the Presets section, click your existing border type.

How do I make my border thinner than 1px?

try giving border in % for exapmle 0.1% according to your need. Show activity on this post. The minimum width that your screen can display is 1 pixel.

How do I resize border length in CSS?

To adjust the border length, you can use the width & height properties of these pseudo-elements. In the following example, we have added a blue bottom border to the div element and we have shortened it to 50% by setting the width of the ::before element to 50%.


1 Answers

Turns out this only happens when the font size in Windows 7 is set to something else than 100%.

Reported as a bug in Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=890383

like image 82
user123444555621 Avatar answered Sep 18 '22 13:09

user123444555621