I'm having a CSS issue that only occurs in Safari and Chrome. I have a set of styles for links in the content of a site that I'm working on. Visited links should appear a different colour and with a dotted bottom border. In Safari and Chrome the visited links lack the bottom border though, although all other styles are applied. Does anyone know of a bug in the webkit engine that causes this or have I made some stupid mistake? Code below:
#content a:link {
color: #b32951;
text-decoration: none;
}
#content a:visited {
color: #353535;
border-bottom: 1px dotted;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #b32951;
background: #E6B5AF;
}
This is not a bug, it's a feature. It was possible for a site to sniff the browser history through :visited-styles. You will only be able to style :visited in a way that doesn't affect the metrics of the link, which adding a border would. The same feature is coming to Fx4. (Source, MDC)
Try giving the border-bottom a color:
border-bottom: 1px dotted #000;
Related
I've added some custom CSS code to a Wordpress.com theme to alter link formatting. (I'm a beginner, but I attempted to research this and found some code that looked reasonable.)
Chrome is getting it about 90% right and FF about 10% right. Is this inevitable and I should revert to theme defaults, or is there something I can do differently to make this change work in common browsers?
To be more specific, "border: none" is working in both browsers, but the custom color for the link is usually missing in FF--which means no one but me can tell it's a link. Even in Chrome it's only usually the right color. And, the color I set for "active" isn't displaying at all. Meanwhile, the block quote change is rendering in both browsers.
All I added was this CSS (added in the edit window they provide which by definition means it's at the end of the total CSS for the page, so that should make it override or inherit, I thought).
div.entry-content a:link {
color: #2C60BA;
text-decoration: none;
border: none;
}
div.entry-content a:active {
color: #3A93BC;
text-decoration: none;
border: none;
}
blockquote {
float: none;
width: 24em;
margin-left: 2em;
}
Thanks for any comments.
Have you tried to remove the :link, and just have:
div.entry-content a {
color: #2C60BA;
text-decoration: none;
border: none;
}
Also, just in case your theme has overrides for visited links, you might also want to include a rule for visited as well to be sure:
div.entry-content a, div.entry-content a:visited{
color: #2C60BA;
text-decoration: none;
border: none;
}
Bryant provided the key insight in his first answer and my problem, after further experimenting, is now fully solved (see commments). I'm new here and not sure how to mark this resolved, but am guessing this is how to do it. Thanks again.
I have built a webpage, it works fine in chrome, ff, but not in IE.
http://www.magyarregeszet.hu/
I have found many specific bugs about tables and layout, however I can't seem to figure out the font and text-transform type bugs.
Can someone help me? E.g. the menu entryes on the top left should be uppercase in IE too. This entry is:
.menu-item:not(.menu-item-77) {
color: white;
text-transform: uppercase;
font-weight:normal;
margin-bottom: 4px;
border-bottom: 1px solid white;
text-decoration: none;
}
I use wordpress, and the constructor theme.
You cannot use the :not pseudo-class in IE8, check http://caniuse.com/#search=:not for support. Internet Explorer 9+ supports this advanced selector.
If you require IE8 support, I would encourage you to provide your basic styles:
.menu-item {
color: #FFF
}
And then your specific styles afterward:
.menu-item-77 {
color: #CCC
}
Fiddle: http://jsfiddle.net/jonathansampson/w39a7/
:not is not compatible with IE8 http://www.quirksmode.org/css/contents.html
This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.
a:link, a:hover, a:active
{
text-decoration: none;
color: #FF8C00;
background-color: transparent;
}
a:visited
{
text-decoration: none;
color: #FF8C00;
background-color: transparent !important;
}
a.search:link, a.search:visited, a.search:hover, a.search:active
{
font-family: helvetica-light;
font-size: 19px;
color: #999;
text-decoration: none;
background-color: transparent;
}
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover
{
text-decoration: none;
color: #E3E3E3;
font-family: helvetica-light;
font-size: 20px;
background-color: transparent;
}
For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as stuff
Have you tried changing;
color: #999;
Into;
color: #999 !important;
This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.
Sometimes getting the look you want might require some trial and error. :)
A couple of things you could try
clear your browser cache
Make sure no other css files are been called
Go to w3c html validation site
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.
Working on a new site design in asp.net with master pages. Header of the page is a 35px tall "menu bar" which contains an asp menu control rendered as an unordered list.
The selected menu item is styled with a differenct colored background and 2px border around the left top and right sides. The bottom of the selected menu item should line up with the bottom of the menu bar so the selected "tab" looks as if it flows into the content beneath. Looks fine in firefox and IE but in chrome the "tab" seems to be 1 pixel higher than the bottom of the menu bar.
Just wondering if there is some sort of bug I dont know about.
I realize that you will most likely need code to help with this problem so ill post up the css as soon as possible.
EDIT:
here is the css for the menu...
div.hideSkiplink
{
width:40%;
float:right;
height:35px;
}
div.menu
{
padding: 0px 0px 0px 0px;
display:inline;
}
div.menu ul
{
list-style: none;
}
div.menu ul li
{
margin:0px 4px 0px 0px;
}
div.menu ul li a, div.menu ul li a:visited
{
color: #ffffff;
display: block;
margin-top:0px;
line-height: 17px;
padding: 1px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
color: #ffffff;
text-decoration: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: none;
border-left: 1px solid #fff;
}
div.menu ul li a:active
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
color: #000000 !important;
font-weight:bold;
}
div.menu ul a.selected
{
color: #000000 !important;
font-weight:bold;
}
div.menu ul li.selected
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
}
div.menu ul li.selected a:hover
{
border: none;
}
The selected classes are added to the li and a elements via jquery...
Here is a screenshot of the problem...
The chrome example is on the top and u can see 1px of red border below the tab.
On the bottom is the firefox image where everything looks OK.
EDIT:
After playing around with this a bit more, I have discovered that it is actually the "header" div itself that is growing by 1px in chrome... This seems very strange to me.
None of these answers solve the problem.
Set:
line-height: 1;
padding-top: 2px;
Because webkit & mozilla rendering engines implement line height differently do not use this it to manipulate measurement for single line items.
For items like menus, buttons and especially really small notification bubbles, reset the line-height to normal and use padding or margins to make them behave the same.
Here's a JSFiddle illustrating this issue:
http://jsfiddle.net/mahalie/BSMZe/6/
I just had this same problem, and I solved it by explicitly setting the line height and font size in <li> element that contains the <a> elements that are the tab links. Hope this helps someone in the future.
(edited html links)
This is a common issue I run into on some of my sites... when it's IE having the pixel difference, I can usually just add a pixel of margin/padding in my IE stylesheet. But when it's Safari/FireFox/Chrome, I usually just live with the pixel and make the FireFox crowd happy (for now—until Webkit rules the web!), even though it looks a little strange in the opposite browser.
However, you might also want to check out the line-height values (or add a value, if there isn't one already) on the containing ul or div element. Tinkering with that allowed me to get the padding exactly the same in FireFox, Chrome and IE.
Here is the solution that I found in this page :
button::-moz-focus-inner {
border: 0;
padding: 0;
}
I have been fighting with this problem for a little while now, and almost gave up on the pixel. However it's come to me in one of those eurika moments: if you get the tab lined up perfectly in Chrome (which leaves an overlap in Firefox), set the ul height to the height of the li (including any padding), you can remove the offending pixels in Firefox by setting overflow to hidden on the ul.
Hope this helps someone out there!
I had the same problem with my main tabs displaying them in Chrome, they were one pixel off in height and there for leaving an ugly slit between the tabs and the white background of the mainframe.
I solved the problem by giving the tab div an upper margin with a floated value. First tried margin-top:0.1px nothing then 0.2 etc. until with an upper margin of 0.5 everything displayed fine over all the major browsers.
I had the exact same issue, turns out chrome had zoom set to 110% and that was breaking the menu. I noticed it when I fired up chrome on another computer and it looked fine.
I had a similar issue and it was due to using ems for font sizes, margins and padding. The browsers were rounding the ems differently and causing intermittent off-by-1px issues all over the site depending on the length of content. Once I changed everything to pixel measurements my problems went away.
Hope this helps!
I've come across this problem in relation to text with transparent backgrounds.
I couldn't get any of the above solutions to work consistently so I ended up using a webkit hack to give those browsers a different line-height. Like so:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.your-class {
line-height:20px;
}
}
Eww, hacky! I try to avoid CSS hacks but I just couldn't find another way. I hope that helps someone.
I managed to solve this issue with a web font I was working with by setting the following:
.some-class {
display: inline-table;
vertical-align: middle;
}
Granted it's a bit hacky but does the job. It does mean though you will have target styles specifically for Internet Explorer
try using display:block with the a element"
eg...
<li>Link</li>
css:
li{line-height:20px;}/*example only*/
li a{display:block;}
I guess this is the only way , use different styles for different browsers the problematic sections
/* FOR MOZILLA */
#-moz-document url-prefix() {
.selector {
color:lime;
}
}
/* FOR CHROME */
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}``
if line-height is used for vertically aligning text in a container (which it shouldn't), then consistent behaviour across browsers can be enforced like this:
line-height: 75px
height: 75px
overflow: hidden
you can also make different css for mozila:
-moz-height:2em;
one can also use:
#-moz-document url-prefix{
// your css
}
It's important to realize that web pages will always render differently in different browsers. Acheiving pixel perfection is futile, and nowadays I try to explain to my clients what kind of cost is involved to make every browser render the site exactly alike. More often now, they understand that IE6 and FF4 won't ever render any page the same way. We must try to make our clients understand and embrace the dynamics of the web.
Progressive enhancement and graceful degradation. Peace.
I might be a beginner in CSS, but I found the same problem in W3Cschools.com, in one of their examples.
http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav
this example is about image sprites. You can see in this example, in Chrome, the home icon and prev icon have the 1px divider line, which is not the case in Firefox.
It seems that in Chrome the pixel count is 1pixel different to that of Firefox.
I can't figure this one out. I'm trying to get rid of that blue glow when textarea is highlighted in Firefox.
Here's my CSS:
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
Thanks!
Matt
how about
*:focus {outline:0px none transparent;}
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
If you use this on the textarea style:
outline:none;
... it should work with all browsers, not just Firefox
I'm fairly sure that's a Mac OS X theme-specific behaviour.
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
Only popular browsers which allows the outline tag are Safari and Chrome (not sure about linux browsers).
on #3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
The better way to fix this, in my opinion, is define a custom border and :focus behavior.
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
#-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the #-moz-document url-prefix() rule.