using SVG sprites in Opera is rendering badly - css

I would like to use SVG sprites in Opera, and images are shown well on default zoom level, but when i zoom in they are not rendering properly.
The reason i want to use this is so i can have a simple sprite.png fallback for browsers that do not support SVG.
This works well in other browser, only Opera is giving me trouble...
Example of html and css:
<span class="members-login sprites">Login</span>
.sprites {
background: url("/images/sprites.svg") repeat scroll 0 0 transparent;
}
.members-login {
background-position: 0 -39px;
display: block;
height: 1em;
line-height: 1em;
padding: 0 0 0 16px;
}

Opera is known to cause issues with svg as background images, especialy for sprites. Since you are using fallback png, do that also for opera with opera specific css like this.
doesnotexist:-o-prefocus, .sprites {
background: url('/images/sprites.png') no-repeat 0px 0px;
}
If you find a solution to fix opera issue with svg sprite please post it here.

Related

Background in safari is distorted

I'm working on a new client's website, and everything looks good in every browser except safari. The Problem: The Background image is not responding to the css in place in safari(The 5px size).
.et_pb_section_0 { /* The background CSS */
background: url(http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png) 5px;
}
I have been unable to find any definitive information regarding this issue.
Because Safari shares webkit functionality with chrome, attempts to resolve this issue via that resulted in the site breaking in chrome. Is there a way to target safari specifically?
In the CSS background shorthand property, the background-position comes before background-size. This makes your 5px correspond to background-position, not background-size.
To fix this, add a background-position and separate it from background-size with a slash:
.et_pb_section_0 {
background: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png") 0 / 5px;
}
Alternatively, define background-image and background-size separately:
.et_pb_section_0 {
background-image: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png");
background-size: 5px;
}

Is it possible to use box-shadow in IE8?

Why is this CSS being applied inconsistently across frameworks/environments/browsers?
I've got a prototype created in Meteor where the CSS works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:
#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
border: 1px solid gold;
}
It works fine - on mouseenter / hovering into an image, it grows a golden five O'Clock shadow.
However, virtually the same thing in the Sharepoint code:
.finaff-form-help-post-travel-centerimage:hover,
.finaff-form-help-post-travel-bottomimage:hover {
z-index: 4;
-moz-box-shadow: inset 0 0 7px #000;
-webkit-box-shadow: inset 0 0 7px #000;
box-shadow: inset 0 0 7px #000;
border: 1px solid gold;
}
...only works in Chrome and Firefox (not in IE8).
I tried this, which supposedly works in IE8:
#imgPostTravel:hover {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
...but it doesn't work (does not add a box-shadow to IE8).
Is there anything I can to do get a box-shadow to work in IE8?
You can try #thirtydot answer:
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
EDIT:
or you can try #Marcus Pope answer :
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);
Possible duplicate of
Box shadow in IE7 and IE8
CSS3 Box Shadow Effect for IE8?
You are trying to make an inset boxshadow in Internet Explorer 5.5 through 8.
This is completely possible.
Here is a code example with explanations:
(THIS WILL ONLY SHOW UP RIGHT IN INTERNET EXPLORER 5.5 - 8):
#box {
/* Make sure to set it to min-width so you can push the outside "Microsoft Shadow" out of the screen to the left, right, bottom, and top, because the shadow adds pixels to the 100% width whether you set it to width:100% or not, but if you set it to 100% width, you won't be able to make the margin push the outside shadow out. */
min-width: 100%;
/* For some reason, the above rule is not the case for height. I'm not sure why for Internet Explorer. */
height:100%;
position: relative;
/* I discoverd the shadow won't even appear unless there is a boder of the same div. That's no big deal, just push the boder out too, along with the bleeding outside Mirosoft Shadow". */
border: solid 1px black;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=270);
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
margin-bottom: -39px;
margin-right:130px;
}
.box-parent-fix {
/* This appears to be a hack as far as I know, the bleeding Microsoft Shadow (not the inset part, the outside part is what I'm talking about) will only be pushed out if it has a parent with the follow CSS: */
position: relative;
min-width: 100%;
height: 100%;
}
.box-parent {
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
margin-top:-49px;
margin-left:-45px;
height:100%;
min-width:100%;
background-color: white;
position: relative;
}
body {
position: relative;
height: 100%;
min-width:100%;
/* This hides the pushed out bleeding non-inset Microsoft Shadow. Please excuse my ugly sentence, haha. */
overflow-y: hidden;
overflow-x: hidden;
}
<body>
<div class="box-parent-fix">
<div class="box-parent">
<div id="box">
</div>
</div>
</div>
</body>
Here is a screenshot of it working in Internet Explorer 6:
Here is a screenshot of it working in Internet Explorer 8:

Background property browser compatibility

I am using background: url('../img/icon_drop.svg') no-repeat 25px 30px / 17px; in one of my websites and it works very well in all browsers. Except Safari, unfortunately in Safari so written css is not recognised. I've already tried to find compatibility but i could not find any. Does anyone know is this supported by Safari?
Update your code like below.
body{
background: url('http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg') no-repeat 25px 30px;
background-size:17px;
}
DEMO
As far as I know, Safari doesn't understand the background size, so you have to do something like:
background: url('../img/icon_drop.svg') no-repeat;
background-size: 25px 30px / 17px

How to create this shadow effect?

I am trying to create similar to this shadow effects, and inspected CSS in chrome, still i am not getting what i want, my current code is:
.imageShadow {
background: #fff;
-webkit-box-shadow: 0 0 5px 0 #bbb;
box-shadow: 0 0 5px 0 #bbb;
height: 293px;
}
Note: My image height is 293px
Is this will work in all browsers?
Anyone have an idea?
If you mean the nice, curvy dropshadow then CSS at the current state does not allow it. They haven't used CSS to do this, they used image sprites.
Here is a chart that shows compatibility for css box-shadow:
http://caniuse.com/css-boxshadow
IE 9+, Firefox 4+, Safari 5+, and Chrome all support the style.

rounded corner not working on IE

I used rounded corner and gradient. it's working good on firefox but rounded corner not working on IE. IE rounded corner only working when I remove gradient css. Please help me.
<h2 id="user_comments">9. User Comments and Notes</h2>
h2 {
-webkit-border-radius: 8px;
-moz-border-radius:8px;
background:-moz-linear-gradient(center top , #A0ABBF, #DEDEDE, #A0ABBF) repeat scroll 0 0 #A0ABBF;
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#DEDEDE', EndColorStr='#A0ABBF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#DEDEDE', EndColorStr='#A0ABBF')"; /* IE8 */
border:2px solid #A0ABBF;
font-size:16px;
letter-spacing:1px;
margin-top:36px;
padding:0 1em;
position:relative;
}
Firefox:
IE:
IE7 and IE8 don't support border-radius.
IE9 will.
There are JavaScript hacks, most involve a heap of 1px elements absolutely positioned or use SVG.
You can also images.
I'd just leave it as is, and consider > IE8 and other browsers are getting the progressive enhancement.

Resources