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 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.
I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.
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 a site that gets completely screwed up in IE, and I was wondering if anyone could help me track down what's wrong with it.
The page in question is http://eksai.com/testing/
When I open it in IE it's like half the CSS code didn't get loaded. Font colors are the same, there are no columns, etc. I've cut the CSS file to a minimum trying to figure out what's causing this...but I still can't get it to work right.
Can anyone help me figure out what's causing it?
here is the CSS file:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
a img{border:none}
#font-face{font-family:"agb";src:url("../fonts/b.eot");src:url("../fonts/b.eot?#iefix") format("eot"),url("../fonts/b.ttf") format("truetype")}
body, input,textarea,select,button{font:normal 16px "helvetica neue",helvetica,arial,sans-serif;line-height:24px}
h1{font:48px/60px "helvetica neue",helvetica,arial,sans-serif;font-weight:normal;margin-bottom:20px}
h2{font-size:26px;line-height:30px;margin-bottom:5px;font-weight:bold}
h3{margin-bottom:5px;font-size:20px;line-height:25px;font-weight:normal;color:#3a3e42}
h4{font-weight:bold}
a{outline:0;text-decoration:none;color:#2d81c5}
html{background:#d5d8db url(../images/public/body.png) fixed;background:url(../images/public/body-gradient.png) repeat-x fixed,#d5d8db url(../images/public/body.png) fixed;color:#52585d;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wrapper{position:relative;width:1020px;margin:30px auto 100px;padding:0 2px}
.page{position:relative;background:#fff url(../images/public/page.png);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);-o-box-shadow:0px 0px 3px rgba(0,0,0,0.5);box-shadow:0px 0px 3px rgba(0,0,0,0.5);margin-bottom:20px;min-height:400px}
.page:after{content:" ";position:absolute;bottom:-8px;left:-1px;width:1022px;height:8px;text-indent:-119988px;overflow:hidden;text-align:left;background-image:url('../images/public/page-shadow.png');background-repeat:no-repeat;background-position:0 0}
.platter-section{padding:20px 60px 0px 20px;}
.main-nav{height:74px;background:#fff;-moz-box-shadow:rgba(0,0,0,0.1) 0 1px;-webkit-box-shadow:rgba(0,0,0,0.1) 0 1px;-o-box-shadow:rgba(0,0,0,0.1) 0 1px;box-shadow:rgba(0,0,0,0.1) 0 1px}
.main-nav .logo{position:absolute;top:18px;left:24px;display:block;width:152px;height:40px}
.main-nav .actions{position:absolute;top:20px;right:25px}
.hang{ background-image: url("../images/hang.png"); background-position: 0 0; background-repeat: no-repeat; height: 284px; left: 180px; overflow: hidden; position: absolute; text-align: left; text-indent: -119988px; top: -46px; width: 300px; }
.actions {z-index: 2;}
h1{font-size:60px;line-height:64px;margin:20px 0}
.alpha{float:left;width:474px; color:#ff0000;}
.beta{color:#fff000; border-left: 1px solid rgba(0, 0, 0, 0.1); float: left; padding-bottom: 20px; padding-top: 159px; position: relative; width: 300px;}
.signup-section-full-width{clear:both;}
Many of the elements your applying styles to are HTML5 - IE8 and below don't recognize them as valid, block-level, or stylable.
For old versions of Firefox, you just need to do stuff like:
section, article {display:block;}
For old versions of IE, use this in the head:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
FYI, you have a number of CSS errors.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Feksai.com%2Ftesting%2Ffiles%2Fpublic.css&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en
EDIT:
You're also using HTML5 elements, so you might want to include something like Modernizr, which will adapt HTML5 to downlevel browsers.
IE8 and below do not support CSS for unknown elements which you use in HTML5 by default (no fuzz in IE9 though).
But if you create a element of the same tagname with JS document.createElement, IE will magically become aware if those previously unknown elements. See here: http://ejohn.org/blog/html5-shiv/
So use a script which creates dummy elements of HTML5 and you can go on.
http://remysharp.com/2009/01/07/html5-enabling-script/