I have this code:
<div title="" class="icePnlGrp graButtonActionDiv graButtonBackgroundOn">
<label id="j_id89:j_id99" class="iceOutLbl graButtonActionLabel">Select</label>
</div>
With css:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
and
.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
I cannot figure out why on Firefox and IE, hovering on that div does not change the background image.... But on Chrome it works perfectly.
Can you please give me a helping hand?
Thanks.
Try giving the :hover style rule more specificity over its normal state, so:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
div.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
which will over write the original style rule
Related
I have an issue with the ::first-line selector in Chrome. In Firefox and even IE11 the result looks correct.
Here is what I expect it to be: Rendered in Firefox/IE11
Here is what I get in Chrome: Rendered in Chrome
But there is a weird behaviour in Chrome which results in a correct rendering:
open the developer panel (F12)
select the "t1b" item
untick the "box-shadow" property
tick it again
Here is a link to an example: jsfiddle.net/smc0hx78/
<body>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>
body {
font-size: 50px;
}
.test {
width: 2.5em;
height: 3em;
line-height: 3em;
display: inline-block;
position: relative;
overflow: hidden;
box-shadow: inset 50px -50px 0 0 cyan;
}
.test span {
font-size: 13px;
}
.firstLine::first-line {
font-size: 13px;
}
"t1" has no "first-line" (working fine in Chrome)
"t1b" has "first-line" (not working in Chrome)
"t2" has "first-line" but for a sub element (working fine in Chrome)
I need t1b to be working in Chrome.
Do I have any error in my CSS?
Is there a workaround without a sub element?
Thank you for any help.
This seems to be a Chromium Bug, though I have not found anything like that in the Github Issues (still, it could be resolved in a future release)
You have two options:
1 - Add an empty div before your spans. It seems to work if you put an empty block-element before your inline-blocks (don't know why)
<body>
<div></div>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>
or 2 - Change inline-block to inline-flex. The bug seems to affect only inline-blocks
.test {
display: inline-block; /* OLD */
display: inline-flex; /* NEW */
}
I'm trying to use the element+element-Selector to change the CSS for an element following a button.
The following snippet works in Chrome, Edge, Firefox - not in Safari for MacOS:
.button:focus+.change{
color: red;
}
<p>When you focus the button, the text color should change to red.</p>
<button class="button">click me</button>
<div class="change">Change color</div>
Any ideas, how I could resolve this problem?
Thanks for your help.
There is bug in safari. It will not give focus event on click in safari. Instead give focus event on TAB click.
Or :active will give effect. But, upto when mouse press. When you release it will remove effect.
.button:focus+.change, .button:active+.change{
color: red;
}
Fiddle Link
If you have 'a' tag, you can just add "tabindex" attribute to HTML tag to fix this issue on Safari. For example:
<a href="#" tabindex='-1' />
Read more about tabindex here
.buttongroup button {
margin-bottom: 10px;
display: block;
border-radius: 10px;
width: 100%;
background: #f1f2f2;
color: black;
border: none;
height: 45px;
}
.buttongroup > button:focus {
background: #25a0da !important;
}
/* This worked for me in safari and firefox. ATB
.buttongroup > button.selected {
background: #25a0da !important;
}*/
<div class="buttongroup"><button ga-tag="input" data-value="patient" class="selected">Hey</button><button ga-tag="input" data-value="caregiver" class="">There</button></div>
I am using Bootstrap 4 alpha. How can I customize (Eg: removing border-radius, changing bar base color, filled color etc...)?
Tried with below code.. but it is not working though :(
LIVE DEMO
HTML
<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>
CSS
.b4-test{
padding:50px;
width:500px;
margin:50px auto;
text-align:center;
background:#ccc;
}
progress{
border-radius:0 !important;
background-image:none !important;
background-color:red !important;
color:green !important;
height:50px;
}
Check this snippet in Firefox
This snippet will work in Firefox only..
Edit
I have also created plunker to show in Firefox please check this
Firefox Plunker
.b4-test {
padding: 50px;
width: 500px;
margin: 50px auto;
text-align: center;
background: #ccc;
}
.progress[value] {
border-radius: 0;
background-color: red;
}
.progress[value]::-moz-progress-bar {
background-color: green;
}
<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>
For Chrome check the below plunker
check this Chrome Plunker
Had similar problem, but I just wanted to change the color of the progress part.
My progress bar is the following:
<progress class="progress progress-custom" value="25" max="100">25%</progress>
I added the custom class progress-custom to the Object and defined some CSS for it.
.progress-custom[value]::-webkit-progress-value {
background-color: #FE6502;
}
.progress-custom[value]::-moz-progress-bar {
background-color: #FE6502;
}
.progress-custom[value]::-ms-fill {
background-color: #FE6502;
}
#media screen and (min-width: 0\0) {
.progress-custom .progress-bar {
background-color: #FE6502;
}
}
These additional CSS will change the color of the progress part. I also tested with the border-radius, it is also possible to change this to whatever you want.
I just tested it really quickly: Chrome and Firefox were affected by the changes, IE had the right color, but the border-radius did not work.
I have an issue with the rendering of a tag on my page in IE. The problem lies in the following; the tag, in IE does not fill the tag. The picture is the link but in IE the text takes precedence and overrides the image to make the text a link. Chrome and FireFox have no issues and render fine. My question is:
How can I make the image the link in IE and get it to work like it does in Chrome and FireFox?
The following images showcase my problem:
The problem in IE:
How it should render as per Chrome and FireFox:
The code for the section is as follows:
h1#site-name, div#site-name /* The name of the website */
{
margin: 0;
font-size: 2em;
line-height: 1.3em;
height: 115px;
background: url('/sites/default/files/images/ipark2-theme-assets/iPark_title.jpg') no-repeat top right;
margin-left: 212px;
color: transparent;
}
#site-name a:link,
#site-name a:visited
{
color: transparent;
text-decoration: none;
display: block;
height: 100%;
filter: alpha(opacity=50);
font-size:1em;
}
EDIT: addition of html markup:
<div id="logo-title">
<div id="logo"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="Home" id="logo-image" /></div>
<div id="site-name"><strong>
Teaching and Learning Innovation Park
</strong></div>
</div> <!-- /#logo-title -->
</div></div> <!-- /#header-inner, /#header -->
You're applying an ID to two elements (your H1 and your div), make use of classes as at the moment you're just slapping an ID on everything.
I'm not sure if that will solve your issue, but it won't hurt and I know older versions of IE are more strict about recognizing an ID if it's not unique. Since you're targeting your anchor tag through that ID, it just makes me question if it isn't the issue.
In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.
Please check these images.
And her is the direct link of the page having the issue (check in Firefox and Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
Any CSS tricks that I can apply for Chrome?
this is a known Bug in Chrome which does not have real workarounds.
The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:
Workaround
HTML:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
CSS:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
You could create your own sprite with radio buttons in your desired design...
Hope that helps, if you have any more questions, let me know.
-Hannes
Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:
Markup:
<div class="radio_contain">
<input type="radio" id="r1" name="r1">
</div>
CSS:
.radio_contain {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.radio_contain input[type="radio"] {
display: block;
margin: 0;
}
I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem.
I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:
zoom: 0.999;
in right css class and that fixed it for me.