Question

I am having a strange problem. I have an external style sheet in which I have used a webkit scroll bar. Now, I don’t want to use it anymore but when I remove the three line code which implements the custom scrollbar, the whole CSS formatting disappears from all the pages using the stylesheet.

Webpage with the webkit code.

Webpage after removing the webkit code.

Here is the CSS code:

<style rel="stylesheet" type="text/css">
::-webkit-scrollbar-thumb:vertical {background-color:#70AFB4; height:auto;}
::-webkit-scrollbar-thumb:horizontal {background-color:#70AFB4; height:10px !important;}
::-webkit-scrollbar {height:7px; width:7px; background-color:#E7E6E1;}

body{
background: #F6F6F6;
font-family: Ubuntu,Georgia;
font-size: 16px;
line-height: 150%;
color: #333;    }

h1{
color:#0E0B06;
font-weight:normal;
font-size:40px;
margin-bottom:0px; }

h2{
color:#0E0B06;
font-size:15px;
font-weight:normal;
margin-bottom:0px; }

a{
color:#0E0B06;
padding:1px 2px;
background:#70AFB4;
text-decoration: none; }

a.default {
background:none; }

a:hover{
color:#0E0B06;
background:none; }


.wrapper {
width: 800px margin:auto; }

.header {
margin: 30px 50px 75px 400px; 
width: 400px }

.indexer {
width: 150px;
float: left;
margin: 40px 100px 75px 150px; }

.poster {
width: 700px;
margin: 70px 50px 75px 400px;
padding-bottom: 30px; }

The webkit code in question:

::-webkit-scrollbar-thumb:vertical {background-color:#70AFB4; height:auto;}
::-webkit-scrollbar-thumb:horizontal {background-color:#70AFB4; height:10px !important;}
::-webkit-scrollbar {height:7px; width:7px; background-color:#E7E6E1;}

Answer 1

If that’s the external stylesheet with the first line:

<style rel="stylesheet" type="text/css">

Then it is invalid. This way, the rules for body won’t be taken.

The <style> tag is not required in external CSS files, doing so will result in an error, which prevents the first rule not to get executed.

Removing the <style rel="stylesheet" type="text/css"> from your CSS file will fix it.