I have checked my CSS and I never specify the logo as a background graphic. There is not logo in the background graphic - just a gray bar, but in IE8 and IE7 the logo is duplicating itself one over the other. Here is the website: www.americaninstrument.com.
I ran a W3 compatibility test and, while there were issues with the javascript analytics code and some links, there was nothing that would affect this logo.
The logo image is called object0.png
First child div of the one with class wk-shapes:
<div style='background: url("http://www.americaninstrument.com/images/object0.png") no-repeat 15px 37px; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;'>
has the following inline-style:
background-image: url("http://www.americaninstrument.com/images/object0.png")
Related
I have a responsive embedded YouTube video on my (bootstrap) website.
When I choose the YouTube full screen option, it works on Firefox and Chrome, but on Safari it briefly flickers, then just shows the top of my entire web page in full screen, as though Safari itself is in full screen mode.
CSS:
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
HTML:
<div class='embed-container'><iframe src='https://www.youtube.com/embed/myyoutubecode?rel=0' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
Does anyone know of a way to make this work in Safari?
I found the answer.. in case anyone else experiences this:
wow.js animations seem to break the fullscreen functionality by causing this issue. Disabling the animation for the div fixes the problem.
I am building a responsive website that has an embedded youtube video on it. The video is in a responsive iframe and works perfectly fine in all browsers except in Firefox. There it simply doesn't show up.
I tried savemode, adding html5 to the link, commenting all js and js-queries out. If I add the width and height in px it does show and works fine, but then it's not responsive.
I can make it show up by changing the height of the container into a percentage or vw-value. No matter what figure I add, it will always render the video double height and cutting off big parts of left and right sides. Also it will cut off more of the width when the viewport shrinks. When changing the container value to anything other than 0, the same happens in all other browsers.
Tried Firebug, but that doesn't even see the iframe.
Here is the code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 4vw;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>
web url:
https://www.marjanderksen.com
Have you tried to use FitVids.js?
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".embed-container").fitVids();
});
</script>
Link to download plugin: https://github.com/davatron5000/FitVids.js
I have an <img> that shows a remote image.
I want it to fallback to another local image, in the case where the remote one is not reachable.
<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico">
.cc_image {
width: 256px;
height: 256px;
}
.cc_image.fallback {
/* this URL here is theoretically a local one (always reachable) */
background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}
It works so that when the src image is not found then the background image will be shown.
The drawbacks are:
it will always load the background image (additional HTTP request)
it shows a little not-found-icon (a question mark on Safari) at the place of te original image, that is displayed above the background-image (not a big issue, but I'd like to get rid of it)
How could I solve these issues?
Or: are there other technics to achieve the same result?
I found this question but the given solutions rely on Javascript or on <object> (that seems to not work on Chrome). I would like a pure CSS/HTML solution, without Javascript if possible.
I know about the multiple background-image but am not sure whether it is a good option (browser support? and will it fallback with an unreachable image?).
Or I was thinking about embedding a SVG image as data-uri.
Suggestions for the most flexible (and compatible) method?
Unfortunately, you can't achieve both without Javascript or object tag.
You could do this to avoid the missing image icon:
Place your image in a container (it might already be in one).
Make the container have the same width and height as the image.
Set the fallback image as the background image of the container.
Set the remote image as the background image of your img tag.
Load an 1x1 pixel transparent png as the src of your image (see code for how that can be done without an extra HTTP request).
Code:
HTML
<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
<img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>
CSS
.fallback {
background-image: url(*fallback image here*);
display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
min-width: specify a minimum width (could be the width of the fallback image) px;
min-height: specify a minimum height (could be the height of the fallback image) px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
.cc_image {
min-width: same as container px;
min-height: same as container px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
min-width and max-width make sure that the background images remain visible.
background-position makes sure that the central part of the images remains visible and is a graceful degradation for older browsers
background-size resizes the background image to fill the element background. The cover value means that the image will be resized so it will completely cover the element (some of the outer edges of the image may be cropped)
The base64 data in the img src tag is a transparent 1px png.
This will have an additional benefit that regular users and some bots may not be able to save your images (a rudimentary image protection)
The only drawback is, that you will still have one extra HTTP request for the fallback image.
I have found a solution on Codepen, which I would like to share with you:
https://codepen.io/anon/pen/Eqgyyo
I prefer this solution, because it works with real image tags, not background images.
body {
color: #2c3e50;
font-family: 'verdana';
line-height: 1.35em;
padding: 30px;
}
h1 {
margin-bottom: 40px;
}
ul {
list-style: none;
padding: 0;
}
* {
box-sizing: border-box;
}
img {
color: #95a5a6;
font-size: 12px;
min-height: 50px;
position: relative;
}
img:before {
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 3px;
content: '\1F517' ' broken image of 'attr(alt);
display: block;
left: 0;
padding: 10px;
position: absolute;
top: -10px;
width: 100%;
}
<h1>Broken image fallback CSS</h1>
<img src="no-image-here" alt="Cats with synthesizers in the space " />
<br /><br />
<ul>
<li>✓ Firefox</li>
<li>✓ Chrome</li>
<li>✓ Opera</li>
<li>✗ Safari (desktop, mobile)</li>
<li>✗ iOS webview</li>
</ul>
I have a fixed footer on my site here: http://starprovisions.com/dev/bacchanalia.html On my 1360x768 screen I can only see the top of the footer and when I try to scroll it either does not scroll or if it does, the footer does not scroll with the whole site, staying below the content. Is there a way to fix this so that the whole webpage scrolls up and down so we can see the footer?
You have to set its position to relative, so it will be below your main content. This way it will allow you to scroll down
#footer {
height: 75px;
background:
white;
margin: auto;
position: relative; /*Added this*/
width: 100%;
}
And also for your html css, you should remove the
overflow-y: scroll;
If you dont want to constantly show the scrollbar on the side of the window.
I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).