What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Problem with the scroolbar on website

2hearts1lovedesignz

Junior Member
I love using a certain code to change the color of the scrollbar to match the colors of my website. ever since windows updated my internet explorer to 10 now the colors doesn't show with the code I am using as it did with IE 9.
Is there anything that can be done to show the color scrollbar up it don't even show up in my I frame either.

here is the code I place in between the <head></head>
<style type="text/css">

<!--
body
{
scrollbar-face-color:#C9BA91;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#C9BA91;
}
-->
</style>
any help would be greatly appreciated :)
Robyn Lewis
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lab4_2.css">
<title>Flexbox solution</title>
</head>
<body>
<div class="three-col">
<div class="col-1">
<h1>Column One</h1>
<p>PARAGRAPH ONE</p>
<p>PARAGHPH TWO </p>
</div>
<!-- Task 05 -->
<div class="col-23">
<div class="col-2">
<h2>Column Two</h2>
<p>There are many variations of passages of Lorem Ipsum availa
ble, but the majority have suffered
alteration
in some form, by injected humour, or randomised words whic
h don't look even slightly believable. If
you
are going to use a passage of Lorem Ipsum, you need to be
sure there isn't anything embarrassing
hidden
in the middle of text. All the Lorem Ipsum generators on t
he Internet tend to repeat predefined
chunks
as necessary, making this the first true generator on the
Internet. It uses a dictionary of over 200
Latin words, combined with a handful of model sentence str
uctures, to generate Lorem Ipsum which
looks
reasonable. The generated Lorem Ipsum is therefore always
free from repetition, injected humour, or
non-characteristic words etc.</p>
</div>
<div class="col-3">
<h2>Column Three</h2>
<p>It is a long established fact that a reader will be distrac
ted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is t
hat it has a more-or-less normal
distribution
of letters, as opposed to using 'Content here, content her
e', making it look like readable English.
</p>
<p>Many desktop publishing packages and web page editors now u
se Lorem Ipsum as their default model
text,
and a search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions
have
evolved over the years, sometimes by accident, sometimes o
n purpose (injected humour and the like).
</p>
</div>
</div>
</div>
</body>
</html>


CSS-----------------------------

/* We set up our CSS for screens less than 900 pixels
NO FLEXBOX, column will be displayed on top of each other */
.three-col {
margin: 20px auto 0 auto;
}
.col-1, .col-2, .col-3 {
padding: 20px;
}
.col-1 {
background-color: lightpink;
}
.col-2 {
background-color: lightgreen;
}
.col-3 {
background-color: aquamarine;
}

/* For screens between 900px and 1500px we must flex only
columns 2 and 3, so we must include these inside of another
div, and only flex that div - also see HTML*/
@media (min-width: 900px) {
.col-23 {
display: flex;
}
.col-2, .col-3 {
flex-basis: 50%;
}
}

/* For screens greater than 1500 pixels we use flexbox
on all elements, equally distributed */
@media (min-width: 1500px) {
.three-col {
display: flex;
}
.col-23 {
flex-basis: 66%;
}
.col-1 {
flex-basis: 33%;
}
}
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style4.css">
<title>Laboratory 04 - CSS</title>
</head>
<body>
<!-- Task 01 -->
<header>
<div class="topMenu">
<a href="#" id="cLogo">My Company Logo</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Offices</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>

-CSS------------------------




@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
/*Declarare variabile*/
:root {
--header-color: #3399ff;
--nav-hover: #0066ff;

}
body {
font-family: "Nunito", "Arial", sans-serif;
background-color: #cce6ff;
}

header {
background-color: var(--header-color);
}
#cLogo {
color: white;
font-weight: bolder;
font-size: 1.5em;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
padding: 20px;
text-shadow: darkblue 2px 2px;
}

#cLogo:hover {
text-shadow: red 2px 2px;
}

header nav {
float: left;
}

header nav a {
color: white;
text-decoration: none;
}

header nav ul {
font-size: 1.3em;
list-style-type: none;
padding: 0px 10px;
}

header nav ul li {
display: inline;
padding: 10px;
}

header nav ul li:hover {
background-color: var(--nav-hover);
cursor: pointer;
border-radius: 10px;
}
/*Daca ecranul e mai mic de 1000px,se schimba culoarea */
@media (max-width: 1000px) {
:root {
--header-color: #ff9933;
--nav-hover: #ff6600;
}
}
 
LOG IN


<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="sub1.css">
<title>Newsletter</title>
</head>
<body>
<div class="login">
<h1>Sing up for our newsletter</h1>
<div>
<form>
<div class= "row">
<label class="margin ">Name</label>
<input class="margin" type="text" placeholder="Nume" required>
</div>
<div class= "row">
<label class="margin">Email</label>
<input class="margin" placeholder="Email" type="email" required>
</div>
<div>
<input type="checkbox">
<label class="margin" >I agree to subscribe your newsletter</label>
</div>
<div>
<button class="sign">Sign up</button>
</div>
</form>
</div>
</body>



</html>


---------CSS---------------

:root{
--div-w:50%;
--div-m:0;
}
@media(max-width:500px)
{
:root{
--div-w:95%;
--div-m:2.5%;
}
}
body {
font: Arial, Helvetica, sans-serif;
}
.login {
margin: var(--div-m);
width: var(--div-w);
background-color: aquamarine;
border-radius: 20px;
}
.sign{
margin: 10px;
font-size:1.2em;
}
h1{
padding: 10px;
}
.margin{
margin:5px;
}
.row{
display: flex;
}
.row input{
flex: 1;
}
input:focus {
background-color: yellowgreen;
}
 
NAV+MIXIN+ PARAGRAPH


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="myStyle05.css">
<title>Laboratory 05 - SCSS</title>
</head>
<body>
<main>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article class= "art1">
<h1>Main content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesettin
g industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an u
nknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, an
d more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsu
m.</p>
</article>
<article class= "art2">
<h1>Second content</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random te
xt. It has roots in a piece of classical
Latin literature from 45 BC, making it over 2000 years old. Ri
chard McClintock, a Latin professor at
HampdenSydney College in Virginia, looked up one of the more obscure Latin words, con
sectetur, from a
Lorem Ipsum passage, and going through the cites of the word i
n classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 an
d 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in
45 BC. This book is a treatise on the
theory of ethics, very popular during the Renaissance. The fir
st line of Lorem Ipsum, "Lorem ipsum dolor
sit amet..", comes from a line in section 1.10.32.</p>
</article>
</main>
<footer>
<p>&copy; Technical University of Cluj-Napoca 2019</p>
</footer>
</body>
</html>


----SCSS----------------------------------------------

/* Task 02 */
/* Theme colors */
$primary-color: #0074d9;
$secondary-color: #7fdbff;
$footer-color: #001f3f;
/* Font import */
@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");

/*declarare mixin*/
$large-screen: 1000px;
@mixin large-screen {
@media (min-width: #{$large-screen}) {
@content;
}
}
/*-----------------------------------------*/
body {
font-family: "Nunito", "Arial", sans-serif;
color: rgb(255, 255, 255);
background-color: $primary-color;

.art1{
background-color: rgb(59, 59, 5)
}
.art2{
background-color: rgb(12, 90, 42)
}
/*dimensiuni mai mari de 1000px au loc schimbari in main */
main {
@include large-screen() {
display: grid; /*nav si acticle */
grid-template-columns: 2fr 2fr 1fr;
article {
padding: 0px 10px;
}
}
}


nav {
/* position:fixed;
bottom: 0;
width: 100%;*/
order:3;
background-color: $secondary-color;
padding: 5px 0;
text-align: center;

}
h1 {
text-align: center;
}



li {

display: inline; /*dimensiuni mai mici de 1000px */
list-style-type: none;
/*dimensiuni mai mari de 1000px */
@include large-screen() {
display: block;
padding: 10px 0px;
position: relative;
left: -20px;
}
/*-------------------------------------- */
a {
color: white;
font-size: 2em;
text-decoration: none;
padding: 0px 10px;


&:hover {
background-color: $primary-color;
border-radius: 5px;
}
}
}

footer {
background-color: $footer-color;
text-align: center;
padding: 5px 0;
}
}
 
Back
Top