On Diveboard, we made a nice hack of photoswipe to support videos
Everything went well until I discovered Firefox 11 and 12 beta are not playing the youtube videos embedded any more... it seems they are loaded, we can hear sound ad pufff no images... so it's youtube radio instead
you can see an example here : Video example page
And i've been scratching my head over and over on that one but I'm clueless :( :(
EDIT : Apparently it's an issue ONLY ON OSX!!! which makes me even more clueless...
Any hint would be apreciated
the iframe code is pretty straightforward:
<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe>
What CSS styling are you using on your iframe? http://argylesocial.com used border-radius on youtube html5 iframes, and removing those style declarations resolved the problem.
I had to remove both -moz-border-radius and border-radius the get video to properly display. Works like a charm now!
It's actually a FF bug which is now fixed on mozilla 12 /13/14
http://ksso.net/~alex/ff_bug/moz-transform.html
I was getting the same issue on my website blog I am developing, I added height for the iframe as Firefox was not grabbing the height from the height tag in iframe, the solution is either add the height using style tag, but if its a responsive website use the media css for the iframe tags height. The example might explain it better.
If using a fixed height for the iframe then try adding style tag to the iframe as in
style="height:374px"
If responsive site the add the iframe to the media query in css - eg:
#media screen and (min-width: 100px) and (max-width:768px) {
.video iframe {height:200px}
}
and so on.
It worked for me, I hope it will helps others as well.
Thanks!
Related
I've been designing and building a portfolio site and updated everything to be valid HTML5, but a friend just told me that all links in my header/footer are broken in Firefox.
The header and footer are position:fixed in my CSS — and I know there have historically been a lot of issues with rendering positioned elements in Firefox — but does anyone have any ideas for a quick fix?
The links are present but there seems to be some issue when you are setting html to position relative this is in both about.css and default.css (line 3)
Remove those properties and your hyperlinks become actionable.
html {
position:relative;
}
Background
I've built a responsive website template. I've chosen to use Bootstrap 2.3.2 because it needs to work in IE7+ and be suitable for mobile devices. I've used respond.js and html5shiv.js so that it will work in IE.
Problem
The site works beautifully in Chrome and Firefox. And it displays well in IE8. However in IE8 it's incredibly slow. Even after the page has finished loading the browser freezes up if I try to scroll down or click on something. It looks great but the slow response time makes it virtually unusable.
Cause of problem
I've identified that Bootstrap.min.css is the cause. When I remove bootstrap.min.css from the page and leave everything else the same, the styles don't work but the page loads quickly and it's very quick to scroll up and down and click on buttons.
I think (or rather I hope!) that the cause is not Bootstrap but rather because I'm using the responsive elements of Bootstrap (e.g. row-fluid). I'd like to keep the site responsive for all non-IE users, but I'd like to try making all widths fixed for IE8 users and below.
Attempts to fix
I've tried overriding the percentage widths in IE by creating a conditional IE stylesheet. However it doesn't appear to be possible to override the media queries, even using !important (example below).
HTML
<div class="row-fluid">
<div class="span10 width7">
</div>
</div>
Bootstrap
This is an example of what I've been trying to override.
#media (min-width: 1200px)
.row-fluid .span10 {
width: 40.92827004219409%;
}
CSS to override Bootstrap
The code below is not able to override the bootstrap css above.
.row-fluid .span10.width7{
width: 485px !important;
}
Question
Has anyone got any suggestions about how I might adapt my template so that it continues to be responsive for non-IE users but has fixed widths for IE8 and below?
Many thanks,
Katie
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.
I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:
#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}
the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.
Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?
One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...
div.image {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}
div.image span {
position : absolute;
top : -9999px;
}
Then the HTML would look like this...
<div class="image" title="The title for the image" >
<span>The ALT Text</span>
</div>
The title tag will still work on the DIV so you should be okay on that part.
I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)
you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.
http://jquery.andreaseberhard.de/pngFix/
another option is to use htc for ie6 - see here for solution:
http://www.twinhelix.com/css/iepngfix/
only requires an extra line added to your css file - sorry still may require javascript - not too sure.
I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.
While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)
One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.
In short, visit this site:
http://www.twinhelix.com/css/iepngfix/
I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave
Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.
IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.
I just started experimenting with SVG in web pages, and I discovered that it is only possible to add SVG images into HTML using <object /> tags, not <img /> like I would have expected. Most of the time, I add graphics to web pages through CSS because they are part of the presentation of the site, not the content.
I know it is possible to apply CSS to SVG, but is it possible to add a vector image to an HTML element using purely CSS?
SVG is supported in <img> and in CSS (list-image, background-image, content) since Opera 9. Opera 10 is better still. Webkit/Safari supports svg in <img> too.
Some examples here, a couple more at dev.opera.com and annevankesteren.nl
If you're looking for inline svg examples, have a look at Sam Ruby's site.
You can try to reference an SVG file with the content property, but I don't think it's supported. If it was supported it would look like this:
.putapicturehere:before {
content: url(mysvgfile.svg);
}
This definitely won't work in IE - it might work in the newest Firefox.
I always reference quirksmode.org for css browser support questions.
You might need to make a little CSS-helper JavaScript to read the image out of an offscreen img and put it into your object tag. That way you can still control with CSS.
As far as I know, Opera 9 and WebKit (== Safari & Chrome) do it on PCs, and rumour has it, that FF3.5 will also be able.
Actually, since Apple added SVG support to iPhone's Safari just half a year ago, I'm not sure, if it works, but it's worth a try.
Cheers,
Last time I tried, almost a year ago, it didn't work. You can, however, already mix svg and xhtml markup. Only problem there is that the page has to have correct mime type (application-xml or something like that) or browsers will ignore the svg.
Inline svg is not a perfect solution if you want strict separation of content and presentation, but is seemed to be the most supported way of using svg.