For some reason, on this page, in Chrome 17, CSS3 transitions aren't working the first 3 links in the footer/nav: http://jacob.bearce.me/index2.htm. The links are exactly the same, no added classes, and I went through step by step to figure out what it was, it's changing the HREF property that breaks them. For some strange reason, services.htm works, but projects.htm does not. I have absolutely no idea why.
UPDATE: Tested in Firefox, Opera and Safari it seems to be only a Chrome issue. It makes no sense. It's not even a webkit issue (unless Chrome's got a newer version than Safari).
Sorry if this response is slightly late, however, I'm currently on Google Chrome 16.0.912.63 beta-m and I have the exact same problem as you do. In fact, on your website, out of the 4 links below, it is only the home link that doesn't seem to be working too well with CSS3 transitions (on my side).
On a website I'm currently working on, the transitions seems to only work on some links and not others. I can't really see any trend to understand what causes it. Strangely though, when I visit your website or mine through Incognito, everything works well. It doesn't work even with my extensions disabled.
It looks to be bug with Chrome. I've figured out that it's definitely an issue with :visited links, but can't fix it no matter what. In incognito mode you don't see the issue because Chrome isn't logging what links you've visited. From what I've seen, it looks like it's an issue in Chrome 16 or higher. Hopefully they'll fix this in the next release, but for now, we'll just have to ignore it.
Related
First question in the community and excited to have found a place with so much knowledge!
My website, http://www.localcookingclasses.com, displays slightly differently on Firefox vs Chrome and IE. The gray background shows on Firefox, while Chrome and IE display the entire site in white.
What could trigger this? I think it might be a missing closed but I haven't found it.
Is there a particular file or line of code I can share with you, or can enough info be pulled from the URL I provided? I want to make sure I include enough information.
Attaching screenshot of Firefox which shows the gray background.
Firefox
Just opened them on Firefox and Chrome and they look exactly the same to me.
Maybe refresh the cache?
Also there are some css atributes that are specific of chrome and firefox, if you could share the background snipet of the css I could be able to help.
EDIT: Screenshots of what I see (requested by user)
Chrome-----Firefox
So I've been working on a website, where I have the following CSS for the navigation bar:
.boxshadow div#top_nav li+li::before, .no-boxshadow div#top_nav li+li::before{
content:url('media/images/link.gif');
}
It's supposed to create link separators for the list items in the nav bar, by inserting a certain image before all links except the first one. The .boxshadow and .no-boxshadow classes are due to Modernizr.
The problem is, it's being overridden in IE. It appears to be crossed out when I open the Developer Tools, so I know it's being overridden, but I don't know why. In Chrome and Firefox, the property works, but only in IE I'm having this problem.
Any ideas as to why this is happening? I'd be happy to post more CSS if necessary. All help is appreciated.
Here's a link to the jsFiddle: http://jsfiddle.net/KJYe2/
Edit 2: Sorry guys, but it seems to work in IE through jsFiddle. However, it doesn't show locally on my computer, and I'm not sure why...I tried posting more relevant CSS that's used before the navigation bar, to see if any of those rules were causing the override, but that doesn't seem to be the case either.
I'm such an idiot. It turns out it works fine live, but locally it just doesn't render. I'm not sure why it does that as opposed to Chrome and Firefox (it renders fine locally on those browsers), but for IE, it only works live. Strangely enough though, it's still crossed out in the IE9 dev tools both offline and online. I apologize for the inconvenience I may have caused, and appreciate all who helped in the matter. Thanks!
The situation.
I have a site that has a menu strip with some links. On a desktop these links work as expected, on mobile firefox, great! However on webkit, safari and chrome, they don't seem to register when you touch them.
I used Adobe Edge to check it out, but it worked fine in that browser, which browser is that anyways, is that webkit based or other?
I also tried using js to debug, but no luck. I would try to to get an alert() if say the parent element, or the link element itself was touched, I can only seem to get them to register if I mash around a bit.
The site is built on Sitefinity, I have looked around and can't seem to find anything relating to this.
How might I be able to go about trying to figure out what the issue is here? It seems to me to be webkit related, correct me if I a wrong, as it happens on chrome and safari.
On Android devices, you can write messages via console.log('blah!') and read them using logcat. You shuold also see other javascript errors in there.
See:
http://developer.android.com/guide/webapps/debugging.html
I've been trying to get CSS tooltips with iFrames working cross-browser, but Chrome has issues.
Here's a test page I put together: http://paulleduc.com/test.html
As you can see, it works as expected in FF and IE, with the tooltip popping up to the right of the word every time. In Chrome however, the tooltip pops up at the left of the screen most of the time, and only popping in the correct position when you hover over the words from 'left-to-right' it seems.
Any ideas to get this working in Chrome would be appreciated,
Thanks!
I don't know about the tooltip version you are using specifically. BUT, I use this one
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm
and I have no problem with it working on chrome or FF, it has worked on every browser I have tested it on, it also comes with really good instructions.
And I am not sure if it is supposed to be this way, but when I hover over your links it just opens a small square and I can see the google homepage.
But seriously, the one that i posted above DHTML Tool Tips, works really well cross browser, let me know how it works out if you decide to use it.
Please make sure you are using the latest version of Chrome. I'm using Chrome 17.0.942.0 (Official Build 110446) dev-m and cannot reproduce the issue - the tooltips pop up immediately to the right of the links. However, their contents are empty due to the "Refused to display document because display forbidden by X-Frame-Options." error (which I believe is unrelated.)
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.