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
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
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I'm having a bit of an issue with a site displaying properly in Chrome. AJAX loads but doesn't make the final call to display in Chrome only. I've tested in Safari and Firefox and it works just fine.
I'm a bit new and don't have the tools to detect browser specific errors and was hoping someone on here could. The site is
http://www.veracitycolab.com
As you'll see, the page content loads in FF and Safari, however it doesn't get to its final display point in Chrome. Any help you can provide would be awesome.
Thanks!
set #main css from opacity:0 to opacity:1 and it work fine in Chrome
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.