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 !
Related
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'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 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
I am currently working on a site at: http://hverdagskupp.no/v4/
I have a CSS problem specific to Chrome. The navigation on the site is made with the following markup:
<nav>
<ul>
<li>Alle tilbud</li>
<li>Bunnpris</li>
<li>Europris</li>
...
</ul>
</nav>
I have the following CSS to make the links color #555:
nav li a {
color: #555;
display: block;
padding-left: 25px;
}
However, when Chrome renders the site, its with the color #222. It says in the inspector that its #555, but its really #222. Chrome is the only browser that interpets the code this way.
Please inspect the code to see what i mean.
Does anyone know why Chrome does this? Or it it a bug in my code?
Thanks!
Added a screenshot. As you can see its actually close to #000. Im using Chrome 8 for MAC.
I'm using Chrome doesn't seem to happen to me see:
Edit:
I can see the color change
It isn't using #222, it is using the #000000 that you specified on the line 2 of "style.css".
Ok, i found the sinner:
a:visited {
color: inherit;
}
This obviously caused this problem, which only occurred on Chrome for MAC.
For some reason, I have some problem with my CSS positioning on a social networking sharing tray on my site..
The even odder aspect of the problem is that it's only showing up in IE and FF..
I've tried playing with the CSS properties in FireBugg, but to no avail.
The link is here:
http://www.marioplanet.com/index.asp
The look in FF and IE makes the icons look all jumbled, while in Safari and Chrome, you can see that they are all lined up properly.
Could anyone help explain this odd phenomenon?
Try add this rule, it's image border when I view it in FF.
a.trayIcon img { border: 0px; }
I changed line 85 in default.css:
#facebookicon, #youtubeicon {
margin-left: 22.5px;
}
to
#facebookicon, #youtubeicon {
margin-left: 17px;
}
and it looks like chrome.