I can't seem to change the background color of my navbar in IE9. The site uses Twitter-Bootstrap
Here is the website: http://iioengine.com/
The top navbar has a white background in every browser other than IE. It's black in IE. I've tried targeting every part of the element with CSS but nothing has effected its color in IE.
I've also set background-image to none in all relevant classes
Anyone know what the issue is or what I need to target? IE is driving me crazy.. Thanks
SOLUTION:
.navbar-inverse .navbar-inner{
filter:none;
background-color:white;
}
This is being caused by a MS filter gradient on .navbar-inverse .navbar-inner {}
The solution is to override this with none in your own stylesheet:
div.navbar-inverse .navbar-inner {
filter: none;
background-color: none;
}
I ran into a simlar issue w/IE9 + Bootstrap 3. filter:none did not fix the issue for me. Adding this did:
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
Filter is the problem as pointed out by #Adrift
Related
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'm utilizing Bootstrap's glyphicon font to render icons within menu links. They have a CSS :hover effect that causes them to change color upon hover. For most of the glyphicons this works perfectly fine, but for some reason, when using the "open folder" icon, the right portion of the icon is not properly colored on hover -- it remains the default, unhovered color.
It's only happening on Safari on Mac (seems to work fine on Chrome). I've attached a screenshot. Any thoughts?
Adjusting letter spacing seems to work.
.glyphicon{
letter-spacing:3px;
}
http://jsfiddle.net/Ru8ME/8/
Edit: as suggested by Alex, increase the letter-spacing CSS attribute:
http://jsfiddle.net/Ru8ME/12/
From the fiddle:
.glyphicon {
font-size: 40px;
color: #0C6;
letter-spacing:6px;
}
.glyphicon:hover {
color: #F00;
}
I can confirm this works on Safari 7.0.2 and Chrome 33 for OS X!
a quick hack you could do is to add a padding.
.glyphicon-folder-open {padding-right: 10px;}
http://jsfiddle.net/5Mjq7/
i use Allegro fonts for top menu and got problem when i hover on it the color not display full width in Chrome and Safari :(
you can test on this link
http://preview.86solutions.com/fairpart
There is something wrong with your font I guess.
When you add some more padding-right to the element it looks fine.
.menu a {
color: black;
padding-right: 20px;
}
see it yourself:
Add a border to the element and it will cut off on the right side.
Looking okay in both chrome and IE.I don't know what version are you using now, I have checked this demo in chrome 19.0.1084.82 and IE8 and IE9.I have seen your code and everything looks good.
BUT, IE does not support the font-family inherit property.If you still have the problem you should modify your style.css like this :
.menu a:hover,.menu a:active {
font-family: "Allegro"; /* because IE doesn't suprort inherit */
text-decoration:none;
color:#c4c04d;
}
Hope it helps !
I cannot figure out why IE shows following website with each frame encapsulated with the colors of links:
http://wilson-thun.substans.com/introduction.aspx
This doesn't happen in Chrome and Safari. Can anyone please help me in explaining this occurrence?
Best regards
I think that is css issue...
IE does not support "box-shadow"..
In this case - if you do not specify anything for images - IE will show borders where as chrome/firefox/safari will not show borders. To show the image without border everywhere you need to put BORDER="0" in the img tag.
Cheers
I've run into this issue before. Try adding border: 0; to link's css.
Try This:
a {
outline: none;
border: none;
}
a:active {
outline: none;
border: none;
}
Apply this to your CSS Document.
I have the following:
<div contenteditable="true">Item 2</div>
In webkit I can easily style this with css. Firefox is ignoring the css, and making the contenteditable div white and resizable.
How can I modify the css for contentEditable in Firefox. I want the background to be transparent and to disable resizing, and the resizing handle bar.
Thanks
You can match the div with this code
div[contenteditable=true] {
background: rgba(0,0,0,0); /* transparent bg */
resize:none; /* disable resizing */
}
div[contenteditable="true"] {
/* your style here */
}
simone's answer was mostly correct except there needs to be quotes around "true" in [contenteditable="true"]
Turns out that if you use position:absolute FF auto adds resizers and a grab handler and sets the background to white. You can't override these seetings, well only resizers. Another -1 for FF.
div[contenteditable] {
background: white;
}
When overriding styles for a contentEditable panel, the css selector I found that firefox was adding a css-selectable "focus-ring" to my root contentEditable node
:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}
Try variants of:
-moz-focusring or -moz-focusring[contentEditable='true']
You may want the aforementioned styles:
background: rgba(0,0,0,0);
resize:none;
But, you may need to firebug lookup the -moz specific resize parameter to disable.
For cross-browser stylesheet tests, just browse to this test data url:
data:text/html,<div style='position:absolute;left:100;top:50;width:200;height:300;background-color:rgb(50,50,80)'><div contenteditable>Test<br/>Test </div></div> <style contenteditable>head, title, style {display: block;} :-moz-focusring{background: transparent}</style>
A transparent background gif or png should do the trick