The problem only affects IE (Mine's 9) and as it's shown there are unwanted paddings on each side of the img tag.
Here's the CSS:
.imgclass {
position:relative;
top: 10px;
left: 60px;
border: 1px solid #666;
box-shadow: #666666 0px 0px 3px;
border-radius: 5px;
opacity: 0.9;
}
And so far I've tried img>padding 0& img>display>block & img>vertical-align.
Screenshot: http://i.stack.imgur.com/u2K4E.png
Thanks in advance
try adding the below to your imgclass in CSS
filter:alpha(opacity=90);
padding: 0;
and also check for padding in parent element
you can adde specifically that padding = 0
padding: 0;
also it would be good to know what class/attributes are applied to the div/element containing the image as if it is larger then padding may not be the issue? perhaps specify a specific width and height if you can to prevent css guessing.
Related
I have an issue where you can clearly see the parent in the top right and top left corners of the child.
I have tried with using overflow: hidden; on parent as well as using border-radius on the child.
The issue is a bit hard to explain but you can clearly see the issue on the fiddle.
https://jsfiddle.net/2Lccaf0u/
edit: Here is an image showing the issue as well (using chrome)
An easy fix would be to make the outer element have a large radius than the inner for only the top portion
body {
background: #000;
}
.outer, .outer2 {
width: 200px;
height: 100px;
border-radius: 15px 15px 5px 5px;
background: #fff;
margin-bottom: 20px;
}
.inner, .inner2 {
background: #111;
width: 100%;
height: 50px;
border-radius: 5px;
}
Edit: It's happening because that is how the browser renders it. Not all browsers will produce the same result.
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
http://jsfiddle.net/hpLYD/1/
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
box-shadow: 0px 0px 0px 5px #f00;
jsFiddle example
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).
You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.
Here's an JSFiddle with the result
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
Here's an JSFiddle with the result
You can't place a border within an element, however you can use box-shadow to give that effect:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
JSFiddle example.
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.
I suppose you could add another class to the circle.
I have done this for you.
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
.scirle {see fiddle}
http://jsfiddle.net/hpLYD/7/embedded/result/
The problem is a border takes up screen real estate whether we like it or not.
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
How to give border to any element using css without adding border-width to the whole width of element?
Like in Photoshop we can give stroke- Inside , center and outside
I think default css border properties is center like center in photoshop, am i right?
I want to give border inside the box not outside. and don't want to include border width in box width.
outline:1px solid white;
This won't add the extra width and height.
Check out CSS box-sizing...
The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Depending on your intended browser support you can use the box-shadow property.
You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).
Example:
box-shadow: 0 0 0 1px black; // Outside black border 1px
or
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
One great advantage of using box shadow is you can get creative by using multiple box shadows:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.
I ran into the same issue.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.
Of course change your pseudo elements properties as you need to single out a specific side.
* New and Improved *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
This allows ability to use border and hit multiple sides of a box.
Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.
Use outline to create a border OUTSIDE a div without modifying div width.
Here an example:
https://jsfiddle.net/4000cae9/1/
Notes:
border-box currently it is not supported by IE
Support:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
With this html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
And the html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
Use padding when there is no border. Remove padding when there is a border.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
Essentially, just replace the 2px padding with 2px borders. Div size remains the same.
Usually, layout shifting is the problem.
If you don't need border-radius then outline: 1px solid black; works.
If you do, make the border transparent and change its color when it's supposedto show:
/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}
.my-div:hover {
border: 2px solid #ffffffa8;
}
/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}
<button class="pretty my-div">
Button
</button>
In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.
I really don't like this suggestion, but I don't think there is a way do handle this cleanly.
Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctype which forces IE into quirksmode.
Another option, if your background color is solid:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}
outline:3px solid black || border:3px solid black
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>