I am using background-position and it works fine in Chrome but on Firefox and IE it doesn't work as it should.
.badge {
background: url(badge.png) no-repeat;
background-position: 0px 1px;
display: inline-block;
color: #9e988e;
font-size: 12px;
padding-left: 15px;
What shall I use to make it same in all browsers?
JSFIDDLE
Internet Explorer does this with background-position-x or background-position-y. Firefox doesn’t support that..
just came across a similar issue today.
This can get a little weird, but try adding this to your style.
Example
background-position-x: 54%;
background-position-y: 10%;
You may have to mess around with the exact position, but most browsers accept it.
Related
I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
I have a input select box and I have to align the text in this box.
In Google Chrome, Firefox and IE <= 9 it works fine.
But the Safari don't use the padding..
Here my code:
<select class="anrede1">
<option>Frau</option>
<option>Herr</option>
</select>
.anrede1, .land {
font-family:'Roboto Condensed';
font-size: 22px;
color: #575656;
margin: 10px 10px 10px 0px;
width: 100%;
height: 42px;
text-align: left;
padding-left: 17px;
border: 2px solid #e1eef9;
font-weight: 300;
}
http://jsfiddle.net/jhne7pfe/
Some ideas to fix that?
Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.
-webkit-appearance: textfield;
Using that solved my problem, hope this saves someone else time.
as far as I know W3 specs don't allow to use padding in select fields. So Safari doesn't support it.
But you can use the following instead of padding-left:
text-indent:17px;
This should work fine.
Not sure, if my last comment reply came through:
As I don't have a Safari installed here, I hope this helps. Try to use:
padding-left:17px;
-webkit-padding-start:17px;
instead of
text-indent: 17px;
The -webkit-padding-start is for chrome and safari browsers only and should be ignored automatically, if padding-left works.
Unfortunately I also have no jsfiddle account yet.
Will be done as soon as possible ;-)
I will like to get help please with an issue I got in both IE11 and Opera with CSS SVG sprite.
For some reason both of these browsers are showing the SVG in a very wrong way and some times even not at all.
Here's my code which works great on Chrome, Safari and Firefox:
.item {
width: 50px;
height: 50px;
float: left;
margin-right: 40px;
background: #eee url('1.svg') no-repeat 0 0;
}
.item.i1 {
background-position: 5% 40%;
background-size: 440%;
}
.item.i2 {
background-position: 43.3% 40%;
background-size: 417%;
}
.item.i3 {
background-position: 82.6% 40%;
background-size: 404%;
}
A live jsfiddle demo: http://jsfiddle.net/DBH29/
Am I missing something? if not and my code is fine, and there's no way to fix it, then how can I make a CSS fallback to an image (PNG) or how to detect it with Modernizr please?
possible related to: SVG in Opera using CSS background-image with scaling , in short to work with Opera 12:
"Removing the width and height attributes in the svg"
I have a website that works fine in Chrome but in "IE" it breaks.
Two element are breaking:
**1. **Radio Button:**** Here is the code
input[type='radio'] {
width: 100%;
height: 42px;
padding-top: 12px;
display: block;
float: left;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #000;
background-image: url(btn-toggle-up.gif);
background-repeat: repeat-x;
}
IE Screenshot:
Chrome Screenshot:
2. Select Element : Here is the code
select {
height: 42px;
padding-left: 10px;
display: block;
border: none;
box-shadow: none;
vertical-align: middle;
line-height: 42px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-image: url(select-arrow.gif);
background-repeat: no-repeat;
background-position: right;
}
IE Screenshot:
Chrome Screenshot:
Here is the code which I am using
select::-ms-expand{display:none;}
::-ms-check{display:none;}
After a bit research, I came to this one of the most proper solution to fix both the problems. But it seems I can't get it work on my elements and still the bug is there.
I have tested this in IE7 and IE8.
You are using non-standard appearance property, which happens to be supported by Chrome, but not IE. Pseudo elements like ::-ms-expand and ::-ms-check will work only in IE 10+.
Form controls are known to be hard to style, so if you want a consistent cross browser appearance, use UI libraries like jQuery UI or reconsider styling form controls with your designer.
It's a pretty bad idea to try this kind of stuff.
But if you really want to overwrite this basic statement, the best way is to construct with div and specific classes your radio buttons and using jQuery or javascript to set up your form. example.
I have anchor element with CSS class.
All browser show the BG-image well, except IE 7 (it won't show the image at all). (I added the _attributes since I saw thats what is used in other sites).
When using IE Developr tools in IE7 it says background-image: none... Thanks
color: #FFFFFF;
cursor: pointer;
height: 102px;
left: 0;
margin-left: -7px;
position: fixed;
text-indent: -9999px;
top: 25%;
width: 35px;
z-index: 9998;
background-color: #279cff;
border-color: #279cff;
border-style: outset outset outset none;
border-width: 1px 1px 1px medium;
background-repeat: no-repeat;
height:170px;
background-image: url(../images/1.png);
background-position: 11px;
If the background has alpha transparency you won't be able to see that in IE6 properly because it doesn't render PNGs well. Either switch to gifs OR stop supporting ie6 :P
The underscore is a hack for CSS attribute to work only on 6, don't use it but use different CSS for IE.
IE6 doesn't handle very well with png. try to use jpg and it will probably work.
If not, try to float or display: block the element to see if it shows the background.
If your starting with _property it is for IE6 hacking. It will work only IE6. For IE6 use _property for IE7 use #property