CODEWITHSUNDEEP
htmlcss
lewis
lewis

Reputation: 89

CSS Only applying when I write it twice

I've encountered a strange problem. I have 3 divs named #page1, #page2, and #page3. I've applied css styles to them, though the #page1 id is only applying when I write it out twice.

Eg,

#page1{
background-color:rgb(27, 163, 156);
height: 100vh;
}

Does not apply the class, though if I add it again like:

#page1{
background-color:rgb(27, 163, 156);
height: 100vh;
}

#page1{
    background-color:rgb(27, 163, 156);
    height: 100vh;
}

then it works fine, at first I thought I had misspelled something though it's working when copying and pasting this.

Here is the full html and css, I can't see what's causing this, thanks for the comments!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 page scroll test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
</body>
</html>

body {
    margin:0;
}

#page1{
    background-color:rgb(27, 163, 156);
    height: 100vh;
}

#page2{
    background-color:rgb(134, 226, 213);
    height: 100vh;
}

#page3{
    background-color:rgb(101, 198, 187);
    height: 100vh;
}

Upvotes: 2

Views: 375

Answers (3)

lewis
lewis

Reputation: 89

Ok bit of a weird one, tried it on jfiddle and it worked fine so I re-wrote it exactly the same to a new css/html file and it is working fine now, thanks for the comments guys much appreciated!

Upvotes: 0

SaidbakR
SaidbakR

Reputation: 13544

Your code is missing <style> tag. In addition the style should be either in the head section or in the body section.

Checkout this DEMO

Upvotes: 1

user663031
user663031

Reputation:

I predict that if you examine your CSS you will see an error before your rule, which is causing CSS to swallow the rule. Once the rule in error is passed over, then the next rule (your duplicate) is processed properly.

Upvotes: 0

Related Questions