CODEWITHSUNDEEP
htmlcss
Enrico724
Enrico724

Reputation: 21

Why doesn't this class work when in a separate file?

ORIGIN:

I'm building a new page where the first part, a <video> tag has to take the entire screen.

I usually create my own stylesheet.css file where I put all my style code.

I've notice that all my code in this file works, except this class, which only works if I put in the <style> part of my page.html.

The class in question:

.starsfalling {
  z-index: 0;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

The html code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
    </head>
    <body>
        <video class="starsfalling" autoplay loop muted>
            <source src="media/fallstars.mp4" type="video/mp4"/>
        </video>
    </body>
</html>

Why doesn't this class work in a separate file. There is nothing which can interfere.

EDIT 1:

thanks to @Shelby115

I've noticed that chrome is overwriting this css class. Why? I've put the !important aside elements of this class, but it does not still working.

EDIT 2:

I've read about this problem due to chrome 52 or up who manage the document flow in a different way, so to resolve this problem I've put my .starsfalling into a div with position relative. now it works.

But I'd understand why. Do you know a website which explain these thing fine?

Upvotes: 1

Views: 389

Answers (3)

Kirtan Patel
Kirtan Patel

Reputation: 189

Elements like <video> and <audio>, doesn't support class attribute.

Check this to see supported attributes for <video> element: https://html.spec.whatwg.org/multipage/media.html#the-video-element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Hope this will help.

Upvotes: 1

alioua walid
alioua walid

Reputation: 247

Double check on the followings:

  1. Check your link : <link rel="stylesheet" href="yourcssfile.css">
  2. Check your classes names.
  3. Check if there is !important on few css properties.
  4. Check if there is others css from another source like cdn.

Upvotes: 0

Anarcociclista
Anarcociclista

Reputation: 312

Probably, in the HTML code, after your file, another css file is loaded, containing the same class name but with different styles.

Upvotes: 0

Related Questions