I have angular7 application and i have wrote my own class, for my button. the code of the button and the class "btn-baya" is like the following code .
<a [routerLink]='["/eval-detail",evaluation.id]' class=" btn-baya">En savoir plus</a>
.btn-baya {
background-color: rgba(243, 116, 33) !important;
color: #ffffff !important;
cursor: pointer;
}
this code works on all browsers but not ie10 and edge !! any solutions please
The rgba color expression needs 4 values. From it's name — "red", "green", "blue", "alpha". You only have three.
Either specify alpha:
rgba(243, 116, 33, 1)
Or use rgb():
rgb(243, 116, 33)
Related
background-color property with #rrggbb value and bgcolor attribute on td tag, not working on edge for a certain website. What could be the problem?
Try converting your hex (#rrggbb) to RGB. For example:
#8bd8f9 -> rgb(139, 216, 249)
background-color: rgb(139, 216, 249);
You can convert with this website.
My project is to create a video streaming app using NextJS, where I want to display a video and also its subtitles.
Problem:
In Chrome browser the subtitles have a background and I want to remove it (or change its height):
In Firefox or Safari it all works fine.
My code:
margin: auto;
outline-offset: 0.5px;
outline: 100vw solid
rgba(32, 35, 37, 0.85);
background-image: linear-gradient(
to bottom,
rgba(32, 35, 37, 0.85),
rgba(32, 35, 37, 0.85)
);
I also tried background-color but it is not working.
Is there any solution?
I am making a small web based tool, but running into a problem, both background and hr tags break when the page is larger in width then the initial viewable area. In other words, once I scroll sideways!
EDIT: This needs to work for chrome. (Or possibly firefox if not possible in chrome)
Also, thanks to Celts response I can possibly solve the hr issue, background is still not repeating as it should!
However in my real app I don't know the width of the page, as its content and layout are dynamic. (This I could work around with javascript if needed)
Html code for replicating the problem:
And apparently I cant post pictures here yet. So links to the 2 pictures:
Initial view: http://imgur.com/HdHedgk
Scrolled View: http://imgur.com/hh2wgE4
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 100px,
rgba(70, 82, 152, 0.31) 100px,
rgba(70, 82, 152, 0.31) 200px
)
}
<div style="width: 100%; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
Because you are setting the div's width to 100% this means it will only ever be as big as the initial screen size that your page loads on. The hr tag inside the 100% width div it is getting cut off for this reason. To prevent this from happening set your 100% width div to the same size as the one below it.
This code works fine in chrome:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 350px,
rgba(70, 82, 152, 0.31) 350px,
rgba(70, 82, 152, 0.31) 700px
)
}
</style>
</head>
<body>
<div style="width: 4000px; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
</body>
</html>
You should really build your styles into a separate style sheet. It is good practice and will make future maintenance of the web page much easier.
UPDATE:
To solve your repeating background problem you can change your background style to use percentages instead of pixels:
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 10%,
rgba(70, 82, 152, 0.31) 10%,
rgba(70, 82, 152, 0.31) 20%
)
}
</style>
I'm just wondering why in IE that the button is grey and then when you hover over the button goes blue, it should be blue and then when hover over it goes darker blue.
I've got it working in other browsers but I can't figure out the code for IE.
Thanks in advance.
Here is the CSS:
#mc_embed_signup .button {
background-image: linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -o-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -moz-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -webkit-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -ms-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(95, 176, 244)),
color-stop(1, rgb(70, 130, 180))
);}
And here is the HTML for the button:
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
It's actually live in the footer of http://www.housebuyfast.co.uk. It's the subscribe button under "Join Our Mailing List Now".
IE9 and earlier does not support standard CSS gradients.
IE10 does support them, and your code should work fine in IE10 (unless it's in compatibility mode).
If you need to use gradients in IE9 or earlier, you have a few options:
Use IE's proprietary -ms-filter style. Something like this:
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
Use a polyfill script like CSS3Pie. This will allow the standard CSS gradients to work in older IE versions.
It is because the version of IE that you are using does not support gradients.
More info at: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
Basically it isn't supported until IE10, but as other posters point out there are alternatives.
Use CSS3PIE for makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features http://css3pie.com/
my question says it all. I'm interested in the text color and the background color that disabled text-boxes in HTML use ( the entire CSS a disabled text-box use is also welcomed ). I need this so I would match the color settings of some readonly text-boxes with the color of disabled text-boxes in my html page ( don't want them to stick out ).
P.S. I need readonly text-boxes so I can capture events with them.
The background color is rgb(235, 235, 228); or #EBEBE4 in hex.
At least that's the value in chrome (checked with the debugger tools). This value could be different in other browser
They are whatever you set them to. Only IE9 and older have a fixed, unchangeable setup for disabled elements (which is oddly the only way you can get any kind of text-shadow in those versions...)
You can literally do this:
:disabled {background-color:pink; color:blue}
And get bubblegum-coloured textareas when you disable them!
What I'm trying to say is that you can set the styles to whatever you want, so you could do this:
:disabled, :read-only, [disabled], [readonly] {background:#cccccc; color:#ffffff}
I implemented the following to make any read-only textbox or textarea (useful in my case) appear disabled when it was readonly.
<style>
input:read-only,
textarea:read-only,
[contenteditable]:read-only {
cursor: not-allowed;
background-color: #EBEBE4 !important;
color: #C6C6C6;
}
</style>
Or this:
<style>
input:read-only,
textarea:read-only,
[contenteditable]:read-only {
pointer-events: none;
background-color: #EBEBE4 !important;
color: #C6C6C6;
}
</style>
Hopefully this helps someone!
It depends on the browser. In Chrome, it is the system color 'graytext', so you don't need to remember the hex code.
My chrome has the following default:
background-color: rgb(235, 235, 228);
color: rgb(84, 84, 84);
I guess it can change with browser though?
This is how it's rendered in Chrome:
textarea:disabled {
cursor: default;
background-color: rgba(239, 239, 239, 0.3);
color: rgb(84, 84, 84);
border-color: rgba(118, 118, 118, 0.3);
}