Something I've been wondering for a while whilst doing CSS design.
Are decimal places in CSS widths respected? Or are they rounded?
.percentage {
width: 49.5%;
}
or
.pixel {
width: 122.5px;
}
If it's a percentage width, then yes, it is respected:
#outer {
width: 200px;
}
#first {
width: 50%;
height: 20px;
background-color: red;
}
#second {
width: 50.5%;
height: 20px;
background-color:green;
}
#third {
width: 51%;
height: 20px;
background-color:blue;
}
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
<div id="third"> </div>
</div>
As Martin pointed out, things break down when you get to fractional pixels, but if your percentage values yield integer pixel value (e.g. 50.5% of 200px in the example) you'll get sensible, expected behaviour.
Edit: I've updated the example to show what happens to fractional pixels (in Chrome the values are truncated, so 50, 50.5 and 50.6 all show the same width.)
#percentage {
width: 200px;
color: white;
}
#percentage .first {
width: 50%;
height: 20px;
background-color: red;
}
#percentage .second {
width: 50.5%;
height: 20px;
background-color:green;
}
#percentage .third {
width: 51%;
height: 20px;
background-color:blue;
}
#pixels {
color: white;
}
#pixels .first {
width: 50px;
height: 20px;
background-color: red;
}
#pixels .second {
width: 50.5px;
height: 20px;
background-color:green;
}
#pixels .third {
width: 50.6px;
height: 20px;
background-color:blue;
}
#pixels .fourth {
width: 51px;
height: 20px;
background-color:red;
}
<div id="percentage">
<div class="first">50%=100px</div>
<div class="second">50.5%=101px</div>
<div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
<div class="first">50px</div>
<div class="second">50.5px</div>
<div class="third">50.6px</div>
<div class="fourth">51px</div>
</div>
Even when the number is rounded when the page is painted, the full value is preserved in memory and used for subsequent child calculation. For example, if your box of 100.4999px paints to 100px, it's child with a width of 50% will be calculated as .5*100.4999 instead of .5*100. And so on to deeper levels.
I've created deeply nested grid layout systems where parents widths are ems, and children are percents, and including up to four decimal points upstream had a noticeable impact.
Edge case, sure, but something to keep in mind.
Although fractional pixels may appear to round up on individual elements (as #SkillDrick demonstrates very well) it's important to know that the fractional pixels are actually respected in the actual box model.
This can best be seen when elements are stacked next to (or on top of) each other; in other words, if I were to place 400 0.5 pixel divs side by side, they would have the same width as a single 200 pixel div. If they all actually rounded up to 1px (as looking at individual elements would imply) we'd expect the 200px div to be half as long.
This can be seen in this runnable code snippet:
body {
color: white;
font-family: sans-serif;
font-weight: bold;
background-color: #334;
}
.div_house div {
height: 10px;
background-color: orange;
display: inline-block;
}
div#small_divs div {
width: 0.5px;
}
div#large_div div {
width: 200px;
}
<div class="div_house" id="small_divs">
<p>0.5px div x 400</p>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
<p>200px div x 1</p>
<div></div>
</div>
The width will be rounded to an integer number of pixels.
I don't know if every browser will round it the same way though. They all seem to have a different strategy when rounding sub-pixel percentages. If you're interested in the details of sub-pixel rounding in different browsers, there's an excellent article on ElastiCSS.
edit: I tested #Skilldrick's demo in some browsers for the sake of curiosity. When using fractional pixel values (not percentages, they work as suggested in the article I linked) IE9p7 and FF4b7 seem to round to the nearest pixel, while Opera 11b, Chrome 9.0.587.0 and Safari 5.0.3 truncate the decimal places. Not that I hoped that they had something in common after all...
They seem to round up the values to the closest integer; but Iam seeing inconsistency in chrome,safari and firefox.
For e.g if 33.3% converts to 420.945px
chrome and firexfox show it as 421px.
while
safari shows its as 420px.
This seems like chrome and firefox follow the floor and ceil logic while safari doesn't.
This page seems to discuss the same problem
http://ejohn.org/blog/sub-pixel-problems-in-css/
Elements have to paint to an integer number of pixels, and as the other answers covered, percentages are indeed respected.
An important note is that pixels in this case means css pixels, not screen pixels, so a 200px container with a 50.7499% child will be rounded to 101px css pixels, which then get rendered onto 202px on a retina screen, and not 400 * .507499 ~= 203px.
Screen density is ignored in this calculation, and there is no way to paint* an element to specific retina subpixel sizes. You can't have elements' backgrounds or borders rendered at less than 1 css pixel size, even though the actual element's size could be less than 1 css pixel as Sandy Gifford showed.
[*] You can use some techniques like 0.5 offset box-shadow, etc, but the actual box model properties will paint to a full CSS pixel.
Related
I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image
But for some reason it fills only the four corners of the element:
My code:
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}
<div class="wrap">
<div class="item"></div>
</div>
What do I wrong?
I would expect the little image to be repeated as well vertically as horizontally.
So that the grey box is enclosed with the image pattern.
Any help very much appreciated.
No, it won't because your image is a 50x50 image and the border-image-slice is set as 50 too.
The way border-image-slice works is that the UA will split the image into 9 pieces based on offsets indicated in the slice. In your case, once you slice the image by 50px, there is nothing left in middle to set for the areas marked as 5, 6, 7 and 8 in the below image (Image is copied from MDN).
From the W3C Spec on border-image-slice:
The regions given by the ‘border-image-slice’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.
You'd have to set the border-image-slice as something lesser than 25 for the areas in the middle to get covered with the image.
Note: Though the spec says top and bottom edge image are also considered as empty, I am not sure why browsers show the image on all four corners. That may be down to browser implementation. Plus browsers seem to work fine even when we specify the border-image-slice as 25. It is slightly contradicting with the spec but you atleast get the reason :)
Not sure what works, but using an image of larger size sort of fixed it.
Please note that usually the images that are used for border-image are images with graphics at their edges. It's not that entire image is repeated along the edges. It's sort of all four corners of the image are aligned to the corners of our div and then rest of the image is adjusted according to specified properties.
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid;
border-image: url(http://lorempixel.com/150/150/) 25;
}
<div class="wrap">
<div class="item"></div>
</div>
Not sure if this is what you where looking for. You need to add box-sizing:border-box; to your .item class.
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
box-sizing:border-box;
}
<div class="wrap">
<div class="item"></div>
</div>
Hope this helps :)
The core issue here is that your source image is not properly created! Using any plain image in border-image rules is generally not going to produce the desired effect.
One must prepare the border image in advance so that it provides the 9 regions required by the specification. Here's a good visual example (taken from MDN):
Given this source image of 90x90px (i.e. each diamond is 30x30px)...
...and applying the following width and slice rule...
border-width: 30px;
border-image-slice: 30;
...we get this result:
You can see the full details of how the source image is split here but the main point is that you must have a properly setup source image first.
If I wrote this:
#element {
margin-top: -50px;
}
By general rule, it would move the element upwards by 50 pixels.
Recently, I accidentally used this bit of code instead:
.elements {
margin: -50px;
}
So I had these <div> tags, one beneath the other, and by writing margin: -50px; they all somehow got closer together.
But thinking in retrospect, I don't really see how this worked. The size of the elements didn't change (as far as I know, as they contained child elements, and the child elements were closer together as well), and they didn't seem to zoom in size or anything.
I did some research online, but all I could find was for negative margins on one or two sides at most.
Is there an explanation to this? What actually happens? Maybe it's because I'm using Google Chrome, and maybe nothing happens in other browsers?
Tha margin is not added to the appearance of the element but rather to its bounds, so basically your element looks e.g. 200x200 but its bounds are equal to that of an element of 100x100 since you substract 50px from every side. Try it for yourself:
Fiddle here.
HTML:
<div class="e1"><div></div></div>
<div class="e2"><div></div></div>
CSS:
body {
padding: 100px;
}
div {
width: 200px;
height: 200px;
float: left;
margin: -50px;
}
.e1 {
background: red;
}
.e2 {
background: yellow;
}
.e1>div, .e2>div {
width: 100px;
height: 100px;
outline: 1px solid blue;
margin: 50px;
}
I've added a padding to the body to make the elements be pushed down so you can see the overlap they cause. Updated so you can see the bounds of the squares that result.
So I've seen this post: Can I scale a div's height proportionally to its width using CSS? and it sort of answers my Question. I can get divs to sclae porpotionally as I need. However, what I also need is to set a minimum height for those divs.
In this fiddle http://jsfiddle.net/FBZuB/1/ I have set up what I am trying to accomplish. The BLUE div is a general wrapper that then defines the height of the RED div based on the width of the BLUE div. However when I try to change the min-height on the RED div, the divs that I want to scale AND have a min-height, unexpected results occur.
I would think once I scale DOWN to the min-height point, the div would stop scaling and only change in width. However, it seems like setting the min-height just sets some sort of base point for the whole calculation and everything scales continually. I hope this makes sense.
The RED divs should scale up and down, but at a certain point, when the RED div hits its minimum height, it should stop scaling in height and only in width. I have accomplished this before with pure javascript, but since I read the post above, I am trying to get a CSS only solution.
Here is the code. You can ignore the content for now... I am focuses mainly on the red blocks. Proportionally scale width/height, until it hits the min-height and then it should stop scaling the height and only the width.
HTML
<div style="background: blue; width: 70%;">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
</div>
</div>
CSS
div {
margin: 5%;
float: left;
background: red;
position: relative;
}
#left {
width: 50%;
padding-bottom: 60%;
min-height: 100px;
}
#right {
width: 30%;
padding-bottom: 60%;
min-height: 100px;
}
.content {
position: absolute;
width: 90%;
margin: 5%;
background: green;
top: 0;
left: 0;
height: 90%;
}
Unfortunately plain CSS is unable to calculate any expressions in all browsers except IE, and as such you will have to use at least some JavaScript to dynamically calculate the width.
I would probably do something like this in your html file.
Since you didn't specify how you are resizing your div, I'll assume that it's just when the window resizes.
<body onresize="
var left = document.getElementById('left');
if (left.clientHeight < left.style.min-height) {
left.style.cheight = left.style.min-height;
}
">
</body>
I stumbled upon a difference in layout rendering between Safari and Chrome/Firefox and I don't know which one is "right".
You can check the jsfiddle here
On Firefox/Chrome the layout is as expected, the yellow div is right after the red ones. But on Safari, the yellow div is positioned under the red ones.
After investigating what I did wrong I found out the bug comes from the CSS class E whose property margin-right (value: -11px) is bigger than the width property (value: 10px) for my div.
I think I understand why Safari renders it this way. The width of div of class B is computed as being the sum of the widths of its children as they have the property float: left;.
Here it is widthB = widthB2*2 + widthE + marginRightE + widthC or marginRightE < -widthE so widthB is not large enough to contain each div next to each other.
So my questions are:
Am I right in my understanding of what Safari does?
Why do Chrome and Firefox render differently? Are they just not decreasing the width of the parent div based on a negative margin-right?
Would the proper correction to always have a margin-right lesser or equal to the width of a div in this case?
Thank you!
HTML:
<div class="A">
<div class="C">
<div class="B">
<div class="B2"></div>
<div class="B2"></div>
<div class="E"></div>
<div class="C">
<div class="D"></div>
</div>
</div>
</div>
</div>
CSS:
.A {
background-color: blue;
height: 200px;
}
.B {
height:100px;
}
.B2 {
background-color: red;
height: 100px;
width: 100px;
float: left;
}
.C {
float: left;
}
.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
margin-right: -11px;
background-color: black;
float: left;
}
I'm not sure what you expect to happen with the CSS in the JS fiddle. You are delving into undefined behaviour. I say this because:
'C' is floated but does not have a defined width. This leads to issues in various browsers depending on the complexity of the layout.
None of the floated elements are ever cleared. When floating it is imperative that a clearfix of some description is used, whether it is clear:both, etc.
If you tweak the mark-up and add a clear-fix, you see that the content is always 239px. See http://jsfiddle.net/eaFn9/
However, it seems like the relatively positioned item 'E' and margin is having a negative impact on the width calculation, as Chrome's web inspector seems to always report oddly for the negative margin on this element.
If you play around with this in web inspector you can see it's almost as if the negative margin is the cause of the drop. I think it may be due to a container that does not have a width, and isn't position relative in itself.
How to fix?
Personally, I would want to re-write your layout to include fixed widths on all floats, reduce nesting of floats and clear where possible. It seems overly complex but without a real world use case it's hard to rewrite.
However, It seemed to me that you can wrap 'B2' + 'E' elements in a wrapper that is floated and relatively positioned, then use absolute positioning on 'E' to give the same affect and remove the negative margin.
This is the JSFiddle I came up with: http://jsfiddle.net/jV3Ub/
Sorry, this is not really an answer but it's too long to make it a comment...
Anyway, it took me a minute to figure this out.
I used Firefox 19 on Mac OS X 10.8.2, Chrome 24.0 (Mac) and Safari 6.0.2 (Mac as well). Using the web inspector tools, I realized the divs are not computed the same way indeed. I suck at calculations, but I took the time to sit down and look at this thoroughly, and I do understand Safari's calculations the same way you do.
In Safari, it seems that div B isn't wide enough to contain the yellow div (C) so it seems to reject it to the bottom. For the record, in my tests, I see the yellow div to the right of the red div in FF and Chrome, while Safari shows it right underneath the red, and to the upper left. I am not sure this will help, but I can only recommend you to use the web inspector tools now integrated to all modern browsers to debug this.
I'm not sure about why this happens, all I know is that by only changing the width of E by 1px, like so:
.E {
height: 50px;
width: 11px; /* added 1px to this property */
position: relative;
left: -10px;
margin-right: -11px;
background-color: black;
float: left;
}
it displays correctly in Safari.
Make the following changes to classes .D and .E:
.D {
float:left;
height: 40px;
width: 40px;
background-color: yellow;
margin-left: -11px;
}
.E{
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}
DEMO: http://jsfiddle.net/uryJJ/22/
I hope this helps!
SECOND EDIT:
I think we should link these two questions: https://stackoverflow.com/questions/4989930/css-negative-margin and why use negative margins? to this one.
Also See the W3C spec on margin: http://www.w3.org/TR/CSS2/box.html#margin-properties.
Section 8.3.1 Might actually explain what is going on with your sample. A collapsing margin issue not rendering correctly in Safari.
ORIGINAL POSTING:
So my questions are:
1) Am I right in my understanding of what Safari does. Why do Chrome and Firefox render differently? Sounds like that might be it, but, really, who cares? You are not getting the results you want. You should change your code unless you don't care about Safari users.
2) Are they just not decreasing the width of the parent div based on a negative margin-right?
Probably, but again, not really important.
3) Would the proper correction to always have a margin-right lesser or equal to the width of a div in this case? I would say yes. To fix the issue and get the results you want I would move the div with class E inside the right most div with class B2. Then float E to the right and remove the position, left and margin-right attributes.
.E {
height: 50px;
width: 10px;
background-color: black;
float: right;
}
http://jsfiddle.net/uryJJ/32/
FIRST EDIT
.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
position:relative;
left: -10px;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}
http://jsfiddle.net/uryJJ/33/
Sorry, I might be beating this to death but this fixes it:
.E {
height: 50px;
width: 10px;
margin-left: -10px;
background-color: black;
float: left;
}
http://jsfiddle.net/uryJJ/35/
I was not a fan of negative margin values until just now.
I want to position, in a page, a bar like this:
[corner-l][variable][ornament][variable][corner-r]
the "variable" spacer parts should be resizable, but ultimately, the surrounding container (containing all of this) should dictate the maximum width, and the setup described above should stretch the two spacers equally (without having to state an explicit width for the spacers), leaving the "ornament" in the center.
All parts are of perfectly equal height of 260 px. All of these divs contain the image as a background-image. the "variable" part contains a 1px wide fiber of the bar (again, as a background-image, with repeat-x set).
Can I do this, and perhaps support the major browsers? What's the best way to do it?
Can I do this, and perhaps support the
major browsers?
My answer will work in all modern/major browsers, with the exception of IE7. I'm not sure whether you'd consider that a major browser; it's borderline nowadays.
See: http://jsfiddle.net/PyTAD/ (and resize your browser to test the fluidity)
CSS:
.barContainer {
border: 2px dashed #000;
width: 100%;
display: table;
table-layout: fixed
}
.barContainer > div {
outline: 1px dashed #00f;
display: table-cell;
height: 260px
}
.corner-l, .corner-r {
width: 50px;
background: #ccc
}
.variable {
background: #999
}
.ornament {
background: #f0f;
width: 100px
}
HTML:
<div class="barContainer">
<div class="corner-l">1</div>
<div class="variable">2</div>
<div class="ornament">3</div>
<div class="variable">4</div>
<div class="corner-r">5</div>
</div>
This will keep ornament in the center of the page. The width will be dictated by the header-navigation width
see this
http://jsfiddle.net/7MnKj/1/
you can change width in .vary and see
is that you want??