HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<video controls autoplay>
<source src="./test.mp4" type="video/mp4"/>
<track default kind="captions" srclang="en" label="English" src="./test.vtt"/>
</video>
</body>
</html>
CSS
.yellowish {
background-color: blue;
color: yellow;
}
.redcolor {
background-color: white;
color: red;
}
VTT
WEBVTT
00:00:00.000 --> 00:00:03.000
<c.yellowish>This text should be yellow.</c> This text will be the default color.
00:00:03.000 --> 00:00:06.000
<c.redcolor>This text should be red.</c> This text will be the default color.
I hosted them on a simple http server with node.js and tried it on chromium and Firefox.
They did not show colors.
I tried including styles in the vtt file, it did not work either.
Size and colors seems to be not working in Firefox and chromium.
Alignment doesn't work in chromium.
All other webvtt features work perfectly.
Am I supposed to use any front-end frameworks for this?
It works on YouTube perfectly.(1:30 to 1:40)
Related
I added some 'letter-spacing' to my 'select' and I noticed that Firefox doesn't change the width of the rendered 'select', meanwhile chromium does.
The result is that the user can't see the entire content of select.
<!DOCTYPE html>
<html>
<head>
<title>select input width with letter-spacing</title>
<style>
select {
appearance: none;
border: none;
letter-spacing: 2px;
}
</style>
</head>
<body>
<select>
<option>hello world</option>
</select>
</body>
</html>
Try it with Firefox or Chromium and see the different.
I tried to fix with 'width: max-content' or similar but nothing works.
I have created a full screen background image website using css, however when I try and also link bootstrap it creates a white, full screen container covering the entire page. When I go into the bootstrap CSS and comment the whole thing out the white container remains. The only way to get rid of it is to remove the bootstrap link from my head tag. Below is the HTML then the CSS.
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="local.css" rel="stylesheet"/>
</head>
html{
background:url('img/50925.jpg') no-repeat center center;
min-height:100%;
background-size:cover;
}
body{
min-height:100%;
}
Anyone got any ideas?
Set the background of the body to be fully transparent with
background-color:rgba(0, 0, 0, 0.0);
jsfiddle: https://jsfiddle.net/o9mgygzu/
I'm not getting rounded corners in IE8 mode within IE11.
I've tried both relative and absolute paths, and neither work.
The PIE.htc file is in the same folder as the html file. I'm running on Jetty and don't have a .htaccess file. The PIE.htc file can be loaded without any problem using http://localhost:8383/various_forms2_less/PIE.htc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
span.command_link_buttoned {
background-color: #96AFCF;
display: block;
width: 130px;
height:30px;
position:relative;
border-radius: 5px;
behavior: url(PIE.htc);
/*behavior: url(http://localhost:8383/various_forms2_less/PIE.htc);*/
}
</style>
</head>
<body>
<span class="command_link_buttoned">
Button
</span>
</body>
</html>
I should start by saying I'm relatively new to the likes of HTML/CSS. I have an image that is 2880x540 and I'm looking to set it as the landing page for a website. This means I need to have the image centered so that the excess width bleeds off the browser window, without having a scrollbar (the excess resolution is there for the likes of higher resolution monitors). I'm planning on using two regions of the image as rollovers for two other images that have the same proportions.
As of right now my code is very basic:
<!DOCTYPE html>
<head>
</head>
<body>
<img src="sitewide.png" width="2880" height="540" alt=""/>
</body>
</html>
Any feedback is greatly appreciated.
You can set your image as a centered background of a div:
<!DOCTYPE html>
<head>
<style>
body{
overflow-x: hidden;
}
#bigImage{
background:url('sitewide.png') no-repeat top center;
width: 2880px;
height: 540px;
}
</style>
</head>
<body>
<div id="bigImage"></div>
</body>
</html>
Please can someone point me in the right direction! I can't get the queries to work as intended.
So, I have for example:
<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />
In the 480 stylesheet:
#box{width:100px;height:100px;}
In the 960 stylesheet:
#box{width:200px;height:200px;}
When I resize the browser to 480px or less the 960 style is overriding the 480 style. I have tried loading all queries in the one stylesheet and I've tried using separate stylesheets for different resolutions but still not working. When testing it in either Chrome or FF Aurora it makes no difference.
What am I doing wrong? Thanks!
Works perfectly for me:
http://felixebert.de/so-12811458/
Is the path to the css files correct?
Is the HTML Doctype correct (<!DOCTYPE html>)?
Do you mix an id-reference with a class-reference? (#box = <div id="box" />, .box = <div class="box" />)
What's in 768.css?
Try this:
<style>
#media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
#media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>
http://jsfiddle.net/sthAngels/EecJD/