I'm trying to hide captions on a video element:
I'm using the following css:
video::cue {
visibility: hidden;
}
It works fine in Chrome, but on Safari it only hides the text, and still renders the caption background, like this:
I tried adding background: none as well, but there's no change.
How else can I hide the captions on Safari, besides modifying the text track list programmatically? Could this be a Safari bug?
One solution is already mentioned here: Hiding a video text track with Safari. That is, if what you're trying to do is not display your captions directly in the video anyway, just use the track kind "metadata". In my case:
<track default label="English" kind="metadata" srclang="en" src="../static/captions/mexicocity_en.vtt" >
I think you need to target the parent element of video::cue and hide it. By the way display:none can also be used for hiding though I am not sure
Related
I'm looking for a way to make the scrollbar invisible in Firefox. That is, you shouldn't be able to see it, but you should still be able to scroll. For other browsers, this works:
::-webkit-scrollbar {display: none;}
However, it seems that this feature has been removed from Firefox. Surely someone has found a workaround just for Firefox?
If you want to hide scroll bar, you will need the CSS
<body style="overflow:hidden;"> ...</body>
I am wondering, if scroll bar will not be available to your page, how your content is going to be read fully. By the way, this CSS works will all elements like <div></div> etc. too.
For scrolling you will need to add scroll event. Take a reference from here for scroll event handling.
I have a HTML 5 drag and drop game that doesn't work in IE so I want to basically just show the answers in the form of an image. At the moment I'm using CSS to hide the game div in IE and display a div with using display: block; to show the image and hide it using display: none on browsers like Chrome.
Is this an ok way of switching content based on browser or is there another method I should be looking at? What is the correct way to do this?
The only draggable elements in IE are the <a> and <img> elements.
Some people just wrap their (text) content with <a> tags that go nowhere, as is seen in Remy Sharp's demo: http://html5demos.com/drag. This works just fine in IE9, and probably older versions of IE.
So the "correct" way to handle IE is to use those elements.
site in question: http://ecogroovellc.com
When looking at the 2nd child menu drop-down (Portfolio>Music), it appears properly in FF and Safari, but not in IE8, where it is hidden within the 1st child drop-down. Any solution ?
Thanks!
I know it's because of the filter (providing opacity) in IE - it causes an overflow: hidden-esque effect.
I attempted to precisely locate it, but there's a lot of CSS/JavaScript to look through and I became disheartened.
What you need to do is remove the relevant filter rule when the fade transition is complete in your JavaScript.
If you set the UL in question (the one with audio and videos) to position:relative, it seems to fix it in ie8, but it screws it up in FF.
I had the same issue. I tried multiple variations, in the end I added filter:none !important; to my css rule on the containing element and that is what worked for me.
if you're trying to compensate for issues on IE8 you should always target it conditionally (add conditional class to HTML then write css targeting .ie8 specifically)
there literally isn't any way to write code that works for everything all at once...
I want to create a search bar like one in this page http://dl.dropbox.com/u/333492/search/form.html
If you load that page with chrome, opera or safari, the search bar looks like it should (tested on mac). However, if you use firefox (tested at least with ff 3.5 and 3.6 on mac), you'll see that one extra pixel gets added on top of the text field, and thus the text field is one pixel lower than the button, which looks ugly.
I tried to remove all possible borders and paddings but the problem persists. I also noticed that it doesn't occur when the search button is not there.
Does someone have any idea on what might be causing this behavior? Or, even better, could someone alter the CSS on that page so that the problem would be fixed?
I finally found a blog post that explains the cause of the problem and proposes an answer that partially fixes the situation. Thanks #anttisykari in Twitter!
http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari
So the correct answer is to add following lines to the CSS:
input[type="submit"]::-moz-focus-inner {border:0;} /* ff specific stuff, yuck*/
input[type="submit"]:focus {background:#333;} /* change accordingly depending on your button bg color, this fixes the focus problem when using keyboard to move betweenform elements */
However, IE8 still broke my form, so I had to add these to both input elements.
display: block;
position: relative;
float: left;
Now everything seems to be ok.
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.