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.
Related
I'm trying to make a menu in the webpage I'm actually developing, and I've noticed that the css for the menu ul doesn't update as I change code.
It doesn't update in Chrome 37.0.2062.124, but it does in Firefox 32.0.1 when I clear cache (of course, I've tried Ctrl+F5 at Chrome, too). Maybe it's interesting to know that IE 11.0.10 has the same problem than Chrome.
At this point, I want to reduce the text indent from 2.75 to 0.75, to fit text.
Here is the jsfiddle (where it seems to update changes):
jsfiddle
The problem seems to be at
#menu ul,
#menu ul ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
line-height: 2.75em;
text-indent: 0.75em;
}
So I don't know if that is probably an issue caused by Chrome, Apache (I'm using XAMPP 3.2.1 for W7) or any other silly stuff...
Thanks to everyone.
Here is a similar question about apache caching. And here also good article.
Try adding version postfix to your css file, it should force browser to take latest version from server.
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
Or you can add timestamp instead of version.
You can try to use Ctrl+F5, this refreshes the page without using your browsercache.
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 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.
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.