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/
Related
I'm trying to get a semi-transparent background that "follows" the text: i.e. the background should not be a rectangular box, but rather a "jagged box" that stops at each linebreak.
Like this:
I do this with the following style:
p {
display: inline;
background-color: rgba(0, 0, 0, 0.5);
font-family: "Montserrat";
font-size: 18px;
/* Add spacing between lines */
line-height: 28px;
/* Make sure background covers space between lines */
padding-bottom: 6px;
}
An example can be seen here: http://jsbin.com/texala/6
The problem is that Firefox and Chrome renders these differently. The two browsers are using the exact same .woff font (not .woff2) and trying all different resets from cssreset.com still doesn't work.
The problem
What you can see here is that the background from each line is overlapping in Firefox but not in Chrome.
I'm using OS X 10.7.5 with Firefox 35.0.1 and Chrome 40.0.22.14.111
I know that font rendering is different from platform to platform and browser to browser, but with an explicitly set line-height and font-size (and padding) in pixels -- isn't one of these two renderings wrong?
Furthermore - does anyone have a solution to this problem so that the background covers all the space between the lines with no overlap in both Chrome and Firefox?
Maybe with other line-height?:
p {line-height: 158%;}
Positioning of the CSS reset within the entire document structure is key. However, for this specifically,
p{display:inherit;text-align:justify};
Edit
Read up on using EM and REM. It is superior to pixels in every way.
p{line-height:1.61em};
Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-top and padding-bottom of 5px on a select element, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??
You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers.
DEMO http://jsfiddle.net/XxkSC/3830/
There is better option to achieve a natural design:
height:30px;
background:#ffffff;
DEMO JSFiddle
p.s
Vector's answer is hiding the arrows on the right side.
Add the following property to your select in your css file:
-webkit-appearance:none;
If you are using bootstrap, you can add class custom-select:
<select class="form-control custom-select">
After adding it, you can eventually adjust height by adding line-height property to css:
select {
line-height: 1.3;
}
https://getbootstrap.com/docs/4.1/components/input-group/#custom-select
This solution is not only for select but also for input and textarea.
select,
textarea,
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
I also applied the solution for all browsers, so it should work the same way everywhere.
!important did the trick for me, but it will depend if you will need it or not.
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
when i use
cursor: url(xxx.ico)
it works fine with chrome and FF.
but when i try to use IE9 when i hover the div - the cursor "jumps" 30px up.
why is that?
*( i tried to use 32X32 and 16X16 icons - and it's the same)
The CSS:
.main_div {
cursor:url(/static/IMG/hand.ico),auto;
}
thanks!
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 !