I have an interesting problem with placing a border radius on an image. The radius works fine when the page is rendered in the browser, but doesn't work (full rectangular image is shown) when I try to print the page.
This the HTML syntax (CSS is inline so it's easy for you guys to see).
<img style="padding:0;margin:0;border-radius: 75px;-moz-border-radius: 75px;-webkit-border-radius: 75px;border: 3px solid #f58d1e;" border="0" height="50" width="50" src="myimage.jpg"/>
I'm using Mac/Yosemite and my version of Google Chrome is "Version 40.0.2214.94 (64-bit)"
Related
An SVG newbie needs your help.
I've created some SVG files using Inkscape and trying to implement these in my website scaling them over CSS ( height:12pt;width:auto; ).
It does work fine in Chrome and Opera but doesn't in IE 9 and IE for WP8.1:
The images are cropped to the indicated height instead being scaled.
Does anyone have the same issues or even a solution?
Thank you in advance!
Here's a link to the Image
Here's the integration code:
<div id="social">Social:
<a href="http://www.xing.com/profile/Alexander_Radeke" target="_blank" rel="me"title="Besuchen Sie unser XING-Profil">
<img id="xing" class="svg" src="fileadmin/sprachvertraut/svg/xing.svg"alt="Unser XING-Profil">ing</a> </div>
CSS:
#xing {height:1em;width:1em;border:solid 1px #eef;border-radius:0.2em;margin-bottom:-0.1em;}
Do you need more infos?
I have a good selection of SVG graphics on my site here
http://www.poipleshadow.com
They look crisp and I would love to continue using them, although I have a problem when i combine them with fallback for IE when they have links.
For example this is fine
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
But when I add the svg as an object and include a line for PNG support the link does not work anymore.
<a href="Goa-India-Map.htm" title="Goa Tourist Map">
<object type="image/svg+xml" data="Images/Buy-Items-To-Donate.svg" class="myimgleft">
<img src="Images/Buy-Items-To-Donate.png" width="200" height="156" alt="Give to charity - Donate to Street Children Charity" class="myimgleft">
</object>
</a>
I have searched and found that I could include the link in the SVG itself, although this means that the SVG would only link to a single address. Not ideal. Anyone know of a clean, basic, solution as I like to keep my site as basic as possible where ever I can just using HTML5 and CSS.
This is hacky, but I've used a trick from CSS Tricks in the past.
Unfortunately there's not a convenient anchor on that page to link to, but it looks like this:
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
Apparently support of multiple backgrounds and SVG mostly overlap, so anything that doesn't support svg will use the top background-image while anything that does support svg will use the bottom. Clever, but like I said, hacky, and the best trick I know that doesn't use Modernizr.
CSS Tricks reports that "this works well in IE 6-8, but sadly not in Android 2.3 which supports multiple backgrounds but not SVG," so caveat emptor.
In reply to your comment below:
Your SVG looks like this right now:
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
In your stylesheet, you can add to class .logo200:
.logo200 {
background-image: url(Images/Poiple-Shadow.png); // make a png or jpg version of the image
background-image: url(Images/Poiple-Shadow.svg), none;
width: 32px; //give it width and height
height: 32px;
}
Now, instead of using an <img> tag, use a div:
<a href="index.htm">
<div class="logo200"></div>
</a>
The browser should show the SVG if it supports multiple backgrounds (and therefore svgs). If the browser does not support SVG, it likely doesn't support multiple backgrounds, so it will only show the first background-image property.
Well, this is a weird one.
I have web page with several svg images.
(I also detect not supported svg browsers and display a regular image instead, but I guess it is not relevant here).
Sometimes (I found it so far in Chrome OSX and Windows), the browser displays another svg instead of the one mentioned in the html .
Assuming I have to svg files linked from my page, logo.svg and logo2.svg, it might display logo2.svg intead of logo.svg.
I've inspected the elements , and all seems to be fine. HTML referes to one svg, while the browser displays a different svg (located on another part of the html) instead.
Any idea ?
<a href="Home">
<div style="float:left;width:170px;height:154px;">
<object class="svg-default" data="/images/logo.svg" type="image/svg+xml" style="width:100%; height:100%;z-index:1000;">
</object>
<img class="svg-fallback" src="/images/logo.png" style="width: 151px; height: 41px; display: none;">
</div>
</a>
Maybe you can dynamically insert the div element with the <object> as its child. And when you want to show another svg, remove the previous div & insert a new div with updated svg.
I am using a HTML5 video tag in my website. That video is playing perfectly with all browsers, but in IE9 it shows a black border(black extension). It is like the one usually the video players will show some black color extension on its both the side when the size of the player is more than the size of the video.
This is the solution we use.
For video, we display HTML5 by default backed in CDN storage. We also have fall back for Flash and then fall back for non-flash. So it checks HTML5 first, then flash failing that and then no content for non-flash support indicating some message about the user to upgrade their Fred Flintstones machine, we also offer an alternative so they can move out of BedRock!
Code
<style type="text/css">
.videobox{position:relative;width:300px;500px}
#video_box_id_css, .video_box_class{border:0px !important}
/* BACKGROUND SHOULD BE PAGE BACKGROUND */
.left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff}
.right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff}
</style>
<div class="videobox">
<video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500">
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/>
<!--
ALTERNATIVE CONTENT LIKE SWF
VIDEOS FOR NON HTML5 BROWSER
//-->
</video>
<div class="left"></div>
<div class="right"></div>
</div>
Code Info
Our code is above (removed the flash so it is more readable). A side thing to note is we add a left and right div column which goes over the video black borders. You can tweak these and even add a bottom and top if needed.
Photo
The green border is actually the white div in opacity so you can sit the effect. It may be hacky but it the best solution we found.
Final
The result is much better as you can see below:
I've had this issue before, usually the problem lies within the video itself. When you encode your video try to match the settings as closely as possible to what you will use in your tag. It shouldn't be a roadblock for you, once you inspect the video a bit closer you should see a discrepancy.
I am trying to position a transparent button over an embeded mpeg video?
I can position the buttons, but when the page loads, it seems the buttons are behind the
movie.
This works in Mac Safari and Firefox, but not in IE or PC Firefox.
I've tried z-index but I'm sure I'm not doing it right. The link is http://www.ba-doyn.com/junk/video/
You need to add wmode="transparent" to your embed tag:
<div id="video">
<embed src="final_hsbvideo_12-8.mpg" width="480" height="375" wmode="transparent"></embed>
<div id="button1">button1</div>
<div id="button2">button2</div>
</div>
Demo: http://jsfiddle.net/yrecK/
Did you try giving the video embed a z-index lower than 100?