I'm on a site where you are allowed to customize a profile, but you can only touch the css.
I've managed okay but I have a problem with the scrollbar here. It is going out of boundaries because it is in a div box with border radius on.
How could i fix this? to either make it smaller or pushed away from the side. just as long as it doesnt go out of the div border.
Sorry for no jsfiddle.
It looks as though you have a container element, with an inner element that holds your icons. You cannot clip the scrollbar corners, but there are a few things you can try to fix this visually.
Firstly, for the container element, you need to make sure that you have set its CSS 'overflow-y' property to 'scroll':
.container {
overflow-y: scroll;
}
Then, you can try getting rid of the border radius altogether by doing this:
.container {
border-radius: 0;
overflow-y: scroll;
}
Or, you can adjust the 'border-radius' and increase the 'border' to give the appearance that the scrollbar is properly nested inside of the container and no longer going outside of its bounds:
.container {
border: 7px solid black;
border-radius: 10px;
overflow-y: scroll;
}
I've written a Codepen example for you.
I have a div set with a background image:
<div>Play Video</div>
with the following CSS:
div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}
The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.
Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
Adding a width and height to the SVG as mbxtr said nearly worked for me. I needed to add preserveAspectRatio="none slice" as well to get it working responsively in IE.
For me these 3 fixes helped:
If possible set the background-position to "center"
For background-size set both values, "100% auto" won't do the trick, so use "100% 100%"
If that still doesn't help alter the last to values "viewBox" attribute of the SVG itself and make it one pixel wider and higher than the width and the height of the SVG. This shrinks the SVG a little bit, but stops IE from cutting it off - and the smaller size won't be noticed at all.
I had this issue and I found that either removing the height and width inside the code for the svg BUT keeping the viewBox can solve the issue.
I recommend using a compiler site like : https://jakearchibald.github.io/svgomg/
and setting the option to "prefer viewBox over height and width"
ALSO if none of this works, in Illustrator try applying a square background around the svg image but leaving enough padding around the edges.
And import the svg's in your Stylesheet using --> data uri: ...
example:
background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');
Well, it doesn't look like there is a solution. Surprise surprise. It's IE after all. I ended up using the following code:
div {
padding: 20px;
width: 150px;
position: relative;
}
div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}
I liked the cleaner version better, but this hack works in all modern browsers, including IE8, 9, and 10 (probably 11 but I didn't test).
We had a similar issue with SVG background images that weren't the full site of a containing element (such as the magnifying glass at the left side of a search input).
We'd created out SVGs in Illustrator CC but running them through Peter Collingridge's SVG optimiser to take out all the unnecessary cruft did the trick. http://petercollingridge.appspot.com/svg-optimiser
I tried #mbxtr's solution
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
That still didn't work for me on windows Chrome and IE.
I was exporting a font icon, so if you have a font, make sure you export it as:
"font: convert to outlines"
and "responsive" is false
I also unchecked "minify" just in case...
1. javascript
drips.style.top = -dripsTop + "px";
var browser = window.navigator.userAgent;
if (browser.indexOf("Trident") > 0) {
$(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
}
svg (original height=1050)
add directly to himself svg file
preserveAspectRatio="none" height="2100"
Svg background image size will render same on IE and Chrome using these properties
background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
I changed all my SVGs to not responsive in Illustrator to no avail.
And because I am looking for code examples I missed that the correct answer, when saying "ensure your SVG has a width and height specified", they meant this kind of thing:
.my-class {
background-size: 200px 100px;
}
And if the size is a bit off in IE vs Chrome for example I used a media query to target IE:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.my-class {
background-size: 200px 110px;
}
}
http://74.52.155.226/~projtest/team/harmeet/smoke51/products.html
That is the design that i am currently working on. If you inspect element on the banner below the navigation you can see that the 10px solid white border is taking some gap below the image. I am puzzled as to where is that coming from as logically the border should surround the image only no matter what the height of image is.
you can put display: block; on your <img>
That is because your image in the div.innerbanner is inline (images are inline be default). The space you seen is the descender height.
You need to create a block element of the image to prevent any descender height to show. Try adding this to your CSS:
div.innerbanner img { display: block; }
I want the picture plus the gray background to be centered.
The body's style is set like this:
body {margin-left:auto;margin-right:auto;width:1000px;}
The div for the picture is this:
{width:auto;margin-left:auto;margin-right:auto;float:right;}
The image style is this:
{border:0px;padding:0px;margin:0px;}
If I removed the float the gray border around the image will fill all the page. and I do not want to specify a certain width for the border because some images are big and some are small.
I need help centering the image!
Add text-align: center to #chpheader, and remove float: right.
Add display: inline-block to <div style="text-align:center;background-color:#DCDEDD;margin-top:20px;border-radius: 20px;">.
If you need IE6/7 compatibility, instead add display: inline-block; *display: inline; zoom: 1.
You should not be using inline styles.
image style should be margin:0px auto not just margin: 0px
Given the following CSS rule,
#block1 {
text-indent: -1000em;
background: transparent url(../images/xxx.png) no-repeat scroll center center;
width: 100px;
height: 50px;
display: inline-block;
}
Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.
thank you
You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.
However, you probably should just resize the background image though, unless you have a compelling reason not to :)
CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.
no, the image will just appear to be cropped.