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
Related
So I developed a profile on a website of mine in Firefox (the website accepts HTML in profiles). I then opened it in Chrome and, while there's differences and Pros and Cons I notice to each, I'm not really bothered by anything except the fact that my audio player at the top is properly styled in Firefox, but not in Chrome.
It seems to me that the "height" CSS didn't take in Chrome for some reason, meanwhile it takes just fine in Firefox.
Any idea how to fix this issue? If not, at least help me to make it so that it'll display normally in Chrome, even if it has to be fat instead of the slim bar I wanted. At the very least I want it to be functioning and not obscured by the page, even if it's not exactly what I had envisioned.
I've tried several #media "hacks" to target only Chrome / webkit but they don't take either.
Profile in question located here (flash required). Sources are freely available in the sources tab. The CSS classname is .BGM.
Thanks.
Edit: Images of the difference: https://imgur.com/a/EQyqD
You can see the problem - I want it to display correctly like it is in Firefox, not be crushed like it is in Chrome. I'd actually like to be able to style it further for Chrome - make it styled the same in Chrome as it is in Firefox - though I'm guessing that Chrome may just not be as flexible about this as Firefox is.
PS: Yes, insane that a site still runs on Flash over HTTP in 2018, and yes the profile designs on the site are all juvenile and edgy. It's a guilty pleasure of mine - and it's a nice little coding playground.
Change the height attribute within the .bgm class to something bigger, like 30.
If you're really attached to how the player looks on Firefox, you can also introduce some Chrome only margin to .bgm:
-webkit-margin-before: 12px;
If you want to make the Chrome player slimmer you will need to look into webkit masks, which requires an additional image file.
This is my code and working fine in Firefox, however its not working in the required format what FF showing this time in chrome and IE.
When page load it shows even in Chrome but after that all transformation stops working, let me know what I am doing wrong or how do i fix it.
NOTE- I know blank.jpg does not exists here, but I am sure this wont hurt still for the fix.
Fiddle - Star Fix
FF screenshot (Require)
Chrome screenshot(Not correct)
It does make a difference that blank.jpg does not exists here, Firefox handles the image as 0x0 but Chrome handles it as 50x50 because thats what you set in the <img> Tag
JSFiddle
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.
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.