Borders are supposed to go outside of the width x height of a div. But this jsfiddle - http://jsfiddle.net/L33cK/5/ - shows borders being added to the width x height of a div when they're transparent. I would expect the line in the jsfiddle to be 1px when given transparent 1px borders, but it's 3px.
Does anyone understand what's going on here? I'm looking at it with Chrome.
Thanks
div#line {
margin-left:100px;
width:1px;
height:200px;
background-color:red;
border:1px solid transparent;
}
The borders are transparent, so you can see the div's background through them. It's that simple.
In this updated fiddle I've added another div that has a dotted border.
background:red; border:10px dotted yellow
And you can see the background of the div between the dots of the border.
So if you want the borders to be the colour of the body background, the solution is to not make them transparent, but to give them the same background-color as the body. Or, use margins rather than borders.
Since the div is in content-box mode(*), the CSS width property does not designate the total outer width of the div, but its content area. The outer width is equal to width plus the size of the padding plus the size of the border. (If you give the div some padding as well, you will see that the outer width gets even larger, even if the width property remains 1px.)
(*) You can change this behaviour by using the box-sizing property. See MDN page on how to use it and what vendor prefixes to apply. Basically, with box-sizing: border-box you tell the browser that width is to be taken as the outer width of the element rather than the content area.
Related
Desired effect: background image with 100% height and horizontally starts at 50% of the element. (The background ends before the right end of the element, or overflows hidden at the right edge of the element depending on the image / element size ratio)
MDN "A <length> or <percentage>. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%."
So I tried to set background-position:50%; but oddly this centers the background image horizontally.
Background pivot is set to center when using % values?
Even MDN example shows this behaviour.
I know there is a "hack" with :after pseudo element to achieve this effect, I just wonder is this possible with "background" css properties?
Like you already noticed and as I explained here background-position with percentage won't behave like you may think.
An idea to achieve this is to consider adjusting background-origin like below:
.box {
padding-left:50%;
height:300px;
border:1px solid;
background:url(https://picsum.photos/200/200?image=1069) left/100% auto no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
the trick is to have the padding covering half the width and we start placing the background inside the content-box
Simple test case:
http://cssdesk.com/K2xmN
Another Example:
http://developer.nokia.com/
Problem: When you change the zoom page to 90%, the border goes to 1.111 (1.333 at 75%) and breaks the layouts.
In the nokia website, you can see the top containers break because there is no space left. In the CSSDesk testcase, if you inspect the computed styles, you can see the border width going higher.
Why this happen? border is not set in EM or %, why does it scale?
The why has been explained but I though I'd share a workaround which I just discovered:
Often you can replace the border with a box-shadow that looks just like a border but doesn't add to the outer width of the element:
Instead of
border: 1px solid red;
write
box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;
The width and height of the div have to be adjusted accordingly to accomodate to the fact that the 1px of the borders on each side are gone now.
Now when zooming out the browser will still treat the box-shadow the same as the border, i.e. it won't shrink below 1px, but it will not influence the width of the element and thus the layout won't break.
Alternatively, you can probably use box-sizing: border-box; to some similar effect.
This is an artifact of the problem of scaling down a 1px border. To illustrate what happens, I have modified your test case to include zoom: 0.5;
in the css: http://cssdesk.com/zn4Lx
Notice that if you inspect the computed style, the border width will be 2px. What happens is that Chrome tries to scale down the element, but after scaling, the border still has to be 1px wide if it is to remain visible (after all, 1px is the smallest unit that can be rendered on the computer screen, and if the border width is scaled down to a floating point number smaller than 1.0, it will be rounded down to 0px and disappear). But to justify the scaling, it over-compensates by adjusting the initial width to satisfy the equation
new_width = old_width * scale
In this example, since new_width = 1px, and scale = 0.5, it re-calculates old_width as 2px. Note however that the actual width of the border that is rendered after the scaling is still just 1px.
So in your example, the adjusted old width will be approximately 1.11111111px, and the rendered border width will be 1px wide, but since all the other widths in the layout that are larger than 1px also have been scaled down by approximately 90%, there is no room for a 1px wide border, which results in a broken layout.
The box shadow solution by Shepard might not work well for elements with children that occupy all their space because the shadow will be covered by the children.
Another fix would be to use a border width larger than 1px but smaller than 1.5px.
border-width: 1.3px;
I found 1.3px or 1.4px to be the ideal value and it works in Chrome and IE11 with zoom >= 75%
I have a div with this css specifications:
width:200px;
padding:5px
border:1px solid
and another div as it's child with this css:
width:100%
border:1px solid
and these divs has rendered in FF and IE like this:
But it seems the right padding is less than left one! can any one tell me why this behavior causes?
Thanks
this happens because the borders of the inner div are not part of the definition of the width itself, so your inner div is actually 100% + 2px wide.
you should specify box-sizing: border-box; for the inner div, so its width will include borders
See the MDN documentation for further information (and browser support) about this property.
Its the border that pushes it to the right. set box-sizing: border-box to the inner div.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
You should check the box model once again.
You are having a div with width 100% and adding border 1px to it, so the divs becomes 100% + 2px width and it's pushed to the right like you see.
You should drop the "width: 100%" and add just the border. (since the div is a block element it will take the full width)
You don't need to add box-sizing even, since IE7 won't support it. (if you want IE7 support)
What is the overflow like on your parent element? Unless I am mistaken your setting the width to 100% with a border, so the width is 200px inside a div that is 200px and so the border will not show.
My quick solution (sure there is a better way) would be to make the padding on the right 2px more or left 2px less than the overall padding.
I want to resize images when the browser is resized but I would like to keep a border of 30px on both the left and bottom of the image when doing so. Like this: http://www.jennyvansommers.com/non-commissioned/corner/#347
Is there a simple way to do this using CSS?
Thanks in advance
I would try putting the image inside of a container, the container having 100% width and height, with padding on the left and bottom of 30px, and the image inside it also having 100% width and height.
EG
<div id="imageWrapper">
<img src="imageurl" />
</div>
<style>
#imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
#imageWrapper img{width:100%;height:100%;}
</style>
The wrapper should fill the window, and the image should fill the wrapper out to the padding. This will most likely stretch your images though if the shape of the image differs to the shape of the window. If you want to keep the aspect ratio of the image try just setting the width or the height of the img, but not both.
Hope this helps :)
EDIT:
Not sure if you want to fill the screen, play with img{max-width:100% and img{max-height:100% instead of width and height if you want the image to retain it's natural size unless the window is smaller than it..
I would expect setting a min-width and min-height of 30px, with a relative width and hiehgt of 50% or whatever relative size you would like would achieve this sort of effect
.image-resize {
min-hieght:30px;
min-width:30px;
height:50%;
width:50%;
}
Sorry misread your question there, a border? or a margin? so somthing like
margin-left:30px;
margin-bottom:30px;
instead of the height and width, you could use border-left and border-bottom i suppose using a transparent border, but i perfer margin.
But relative sizing i think is what you want? so it resizes with the browser, or actually resizes relative to its parent so depends where it exists in the dom
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.