I insert the following between the <head> tags:
<link rel="stylesheet" type="css/stylesheet" href="fileadmin/css/konsensusempfehlung.css">
This stylesheet does affect my HTML code in Firefox.
However in IE11 it does not.
konsensusempfehlung.css:
tr.hauptzeile {
background-color: #FFFFFF;
text-align: left;
}
tr.tr-even{
background-color: #edf7f9;
}
th {
padding: 0.5em;
}
td.td-0 {
font-weight: bold;
}
td {
padding: 0.5em;
}
.table-scrollable {
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
}
.table-scrollable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-scrollable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
How do I fix this?
Use the proper type.
<link type="text/css" rel="stylesheet" href="yourLink">
You need to change the value of the type attribute from "css/stylesheet" to "text/css".
Please try this type
<head>
<link rel="stylesheet" type="text/css" href="konsensusempfehlung.css" />
</head>
OR if you want to target only IE, Then try this.
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="konsensusempfehlung.css" />
<![endif]-->
</head>
Let me know further clearification
Should use text/css in link type. Also set href to your link . Shouldn't be a browser issue though
Related
i added a new file for the CSS in VS code and wrote all the styles codes and wrote the link element in each page in the website but the CSS styles are not applied to the website
i was trying to apply a style for all pages and i was expecting it work normally
body {
background-color:#b3e6ee
}
hr {
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 7px;
width: 6%;
}
img {
height: 200px;
}
h1 {
color: #66BFBF;
}
h3 {
color: #66BFBF;
}
here are the css file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> magzwebsite </title>
<link rel="stylesheet" href="css/style.css">
</head>
and here is the index.html file
You forgot the semicolon at the end of the first parameter in the body selector.
body {
background-color: #b3e6ee;
}
This should fix it.
I have read the other threads but still could not figure this out. When I hover over a button with cursor:pointer; set it does not work.
Not only that the hover effect does not work too.
I have posted all my code below, including the javascript. Not sure if it would have anything to do with the javascript or not, but I doubt it.
const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');
const colors = [
'#6C5B7B',
'#C06C84',
'#F67280',
'#F8B195',
'#EC2049',
'A7226E',
'45ADA8'
];
//add event listener
colorBtn.addEventListener('click', changeColor);
function changeColor() {
// bodyBcg.style.backgroundColor = colors[2];
//get random number, Math.floor gives you a number between 0 and 0.9999... so we round down and times by the length of the array
let random = Math.floor(Math.random() * colors.length);
bodyBcg.style.backgroundColor = colors[random];
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.colorBtn {
padding: 0.25rem 0.5rem;
border: 3px solid #fefefe;
border-radius: 7px;
color: #fefefe;
background: rgba(0, 0, 0, 0.6);
font-size: 1.5rem;
text-transform: capitalize;
cursor: pointer;
outline: none;
}
.colorBtn:hover {
background: rgb(0, 0, 0);
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<button type="button" class="colorBtn">Press to change color</button>
<script src="/script.js"></script>
</body>
</html>
There were two classes named .colorBtn in the css. Should work after removing the unnecessary one.
If you wonder why the color sometimes doesn't change, then add a line console.log(random); like the snippet below. Sometimes it seems to not change the color just because it did change but by randomly, it could change to the same color with the previous, so it looks like it doesn't work. But in fact, it works very well.
const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');
const colors = [
'#6C5B7B',
'#C06C84',
'#F67280',
'#F8B195',
'#EC2049',
'A7226E',
'45ADA8'
];
//add event listener
colorBtn.addEventListener('click', changeColor);
function changeColor() {
// bodyBcg.style.backgroundColor = colors[2];
//get random number, Math.floor gives you a number between 0 and 0.9999... so we round down and times by the length of the array
let random = Math.floor(Math.random() * colors.length);
console.log(random);
bodyBcg.style.backgroundColor = colors[random];
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.colorBtn {
padding: 0.25rem 0.5rem;
border: 3px solid #fefefe;
border-radius: 7px;
color: #fefefe;
background: rgba(0, 0, 0, 0.6);
font-size: 1.5rem;
text-transform: capitalize;
cursor: pointer;
outline: none;
}
.colorBtn:hover {
background: rgb(0, 0, 0);
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<button type="button" class="colorBtn">Press to change color</button>
<script src="/script.js"></script>
</body>
</html>
I have a select box styled for good browsers, and for ie9 and down, I wish to have the default select box displayed, with no custom styles.
Styles for good browsers:
select {
display: inline-block;
background: transparent;
padding: 5px;
font-size: 16px;
line-height: 1.3;
border: 0;
border-radius: 0;
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
}
/*ie-10 fix*/
select.select-k::-ms-expand {
display: none;
}
select.select-k {
font-family: Bitter, Georgia, serif;
font-weight: 700;
border: none;
padding-left: 20px;
}
select.select-k.quantity {
width: 80px;
background: url(../img/forms/arrow.png) no-repeat 80% 50% #fff;
}
Now I have the following conditional:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/css/bugbrowser.css" />
<![endif]-->
My question is, in order to overwrite those styles on IE, should I redeclare all values? If so, where can I see the default IE styles to overwrite?
Considering that IE 10 and higher don't support conditional comments, why not write something like this:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<!--<![endif]-->
Or if you persist on using inline styles:
<!--[if !IE]><!-->
<style>
select {
display: inline-block;
background: transparent;
padding: 5px;
font-size: 16px;
line-height: 1.3;
border: 0;
border-radius: 0;
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
}
/*ie-10 fix*/
select.select-k::-ms-expand {
display: none;
}
select.select-k {
font-family: Bitter, Georgia, serif;
font-weight: 700;
border: none;
padding-left: 20px;
}
select.select-k.quantity {
width: 80px;
background: url(../img/forms/arrow.png) no-repeat 80% 50% #fff;
}
</style>
<!--<![endif]-->
So let's say you create a new file that you only want to display on modern browsers, (including IE10+, but not IE9 and below) then you'd call that file something like: gt-ie9.css (greater than IE 9). Then, in your HTML you'd call that CSS like so:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/path-to-file/gt-ie9.css">
<!--<![endif]-->
I am new to this, and have created a Twitter Bootstrap page, based on an MVC4 application.
In my layout, I start with this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="#Url.Content("~/scripts/jquery-1.9.1.min.js")" rel=""/>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>
<link href="#Url.Content("~/Content/Site.css")" />
<title>#ViewBag.Title</title>
</head>
<body>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="../../Properties/../scripts/bootstrap.js"></script>
And then the rest of the page.
Within my Site.css, which is where I put my custom css, I have the following:
body {
margin-bottom: 80px;
}
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
.page-header {
margin-top: 0;
}
.panel-body {
padding-top: 0;
}
.featuredImg {
margin-bottom: 15px;
}
It seems none of my pages are using this CSS though. The body doesn't seem to add the margin...
If I used Firebug, and select the CSS tab, I see no reference to Site.css. Only to 'bootstrap.min.css'.
In design time, the path to my CSS file seems right, as I can click it in the designer, and it takes me to the css file.
It just seems not to load it at runtime.
Is there a fault I am doing?
Try adding rel to your link tag
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" />
So I have a class that overwrites .navbar-inner. It works fine in IE10, Chrome, etc. But in IE9 the default .navbar-inner styles are being shown and when using the IE dev tools, there is no mention of my custom class.
Any ideas?
LESS
.navbar {
.navbar-inner {
.logo{
margin-left:80px;
.brand {
background: url("/images/spritesheet.png") no-repeat scroll -71px -236px transparent;
height: 40px;
padding: 10px 15px;
text-indent: -99999em;
width: 20px;
}
}
background: #494949;
border: none;
border-radius: 0;
height: 60px;
}
}
Import Order
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/employers/style.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<script src="/javascript/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
</head>
Bootstrap is being imported at the very top of our styles.css file. We have check to make sure is being imported correctly and before any of our changes to .navbar-inner.