I was given a CSS file to look at in order to solve a few problems with it. The background for one of the sections is styled as such:
#rt-showcase {
background: none repeat scroll 0 0 #FFFFFF;
}
and looks as expected in Firefox, it is a white background. However, when the page is displayed in Chrome the background is displayed as a grid. Does anyone know why this might occur, and what the grid means? Is it possibly a transparency issue?
It depends on what do you expect.
If you just want a white background in all browsers just use:
#rt-showcase {
background-color: #FFFFFF;
}
Related
For this website:
https://pfiservices.net/
The button in the form appears in white characters on PC. The background is also white, so it can't be read. I'm trying to style it white.
I've tried this CSS:
#nf-field-11.ninja-forms-field.nf-element{
color: #115172 !important;
}
And this one:
.themebutton #media only screen and (min-width: 768px){
color: #115172 !important;
}
And many more.
Also, I've edited the Theme CSS which makes the text inherit that white color. It keeps loading the previous version.
Nothing seems to work. I don't know what to do anymore.
I appreciate any help on this issue.
I'm actually building a website in nuxt.js using Vuetify. I have created a menu based on one v-overflow-btn, one v-text-field and one v-btn.
Here is what my menu looks like actually.
Cause I'm a little bit maniac, I would like to change the bottom border color of my v-overflow-btn to match all the different dividers color bar of my menu. By default, the color is black.
I already tried to define my own CSS in the style section as below:
<style>
v-overflow-btn {
border-color:grey !important;
}
</style>
But nothing changes...
Could someone behelp me to change this border color? Thanks in advance :)
Try this
<style>
.v-overflow-btn .v-input__slot::before {
border-color: grey !important;
}
</style>
I had to add the deep selector in case someone else is having this issue.
.nbb >>> .v-input__slot:before {
border-color: white !important;
}
I am trying to play with colors in the AccessPress Basic template for WordPress (http://accesspressthemes.com/theme-demos/?theme=accesspress-basic) and I am trying to change the color for the BX-Slider navigation "dots" from red to other color.
I've changed it for active "dot" with:
.bx-pager-link.active:before {
background-color: #fff !important;
}
However I cannot change it also for the hover, I tried with that:
.bx-pager-link.hover:before {
background-color: #fff !important;
}
But it does not work.
I'd appreciate any help
That's a specificity issue. Try this:
.ap-basic-slider-wrapper .bx-pager-item .bx-pager-link.active:before,
.ap-basic-slider-wrapper .bx-pager-item .bx-pager-link:hover:before {
background: #fff;
}
See that I have used two things:
Full path.
background instead of background-color.
Works perfectly for me, make sure you load it after the styles.css or at the end of styles.css:
I have a tileable wood pattern as background in an html page. The background looks perfectly seamless when viewed in Photoshop or any other software, but on the html page it looks discontinuous at the points where my main div element begins and ends.
Here's a preview: http://i.imgur.com/eTQthA2.png
This anomaly persists across different browsers. (I have tested in latest versions of Firefox, Chrome and IE.) What could be the reason behind this?
Let me know if you want to look at a specific part of the code.
Edit:
Solved the problem. When asked to post the CSS I noticed that I used the selectors body, html to apply the background-image. Removing html from the selector did the bit.
CSS:
body, html {
margin: 0;
padding: 0;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
color: #455d76;
background-image: url("images/bg.png");
background-repeat: repeat-x repeat-y;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}
First of all whenever asking a question, you should post your code here and not give link to a preview image or your website, because it makes us tough to solve your question.
Coming to your question, from the image it looks like you are using background-image property for different element like say for example div for header, main, and footer, so instead declare that property for body tag instead, in your CSS
body {
background-image: url('whatever.png');
background-repeat: repeat;
}
Fixed the issue. I had used 'body, html' as selector while specifying the background property. Removing 'html' from the selector (ie, leaving just body) did the bit.
(Thanks Mr. Alien, you were right about the background-image property being declared for different elements, ie, body and html in this case.)
Thanks to everyone who answered/commented. :)
I have the following drop down menu and the background looks black in Chrome but white on Firefox/IE/Safari across Windows/Linux/Mac. I'm using the latest versions of all those browsers.
<style>
select {
background-color: transparent;
background-image: url(http://sstatic.net/so/img/logo.png);
}
</style>
<select>
<option>Serverfault</option>
<option>Stackoverflow</option>
<option>Superuser</option>
</select>
Does anyone know how I can style the above so that Chrome shows the background as white when the color is set to transparent like in the other browsers?
EDIT:
My goal is to display an image in the background of select. The image shows up properly in every browser except Chrome.
According to this and this, it is a bug in Chrome that is supposed to be fixed.
The bug appears in version 2.0. I just tested it in 3.0-beta, and it's fixed.
Why are you using background-color: transparent; for "select"? If you remove that chrome works.
What is the effect you are after? Maybe some demo?
This answer https://stackoverflow.com/a/5806434/964227 that I found in another question just like this worked perfectly for me.
Apparently Chrome doesn't accept an image as a select background. So, in order for the color to work, you have to remove the image and then set the color. I'll just copy and paste the other answer here.
select {
background-image: none; /* remove the value that chrome dose not use */
background-color: #333; /* set the value it does */
border-radius: 4px; /* make it look kinda like the background image */
border: 1px solid #888;
}