I am facing an issue with Jquery Tools Tooltip.
You can see on : http://www.toulousehoopsummit.com/l-ecole-en-basket
The 3 pictures at the bottom have a tooltip.
In IE9 and FF12, the tooltips are too much on the right.
In Safari, it is correctly located.
I had to add
offset: [0, -450]
to fix the problem on IE and FF but Safari users face now the inverse issue.
Do you have any idea why I get this and how I can fix it ?
Thanks in advance.
Try the CSS Browser Selector - this has saved my projects many times.
Just put the JS file in, and your <html> will have added css selectors such as .ie .safari3 etc without having to actually debug the jQuery Tools Tooltip.
It will let you tweak your CSS according to browser version and OS.
Comment if you need any help with this!
Here is a fixed version:
http://pastehtml.com/view/bymzdgvhv.html
This works for me correctly in all browsers.
If you're open to new ideas and some good looking plugins, you should try:
TipTip jQuery Plugin
I've been using it for some time and its awesome!
Hope it helps!
I'm on an iPad now, so I can't really test this out.
But why don't you just fetch the top and left positions of the images using jquery, and offset the tooltips positions compared to the images positions?
Related
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;
Our application is running fine in chrome browser. But in Firefox some features and screens are not working properly. So it needs to be fixed .How can i do that and what could be the solution for that?
The best way to find out what is 'going on' is to debug the code in the browser.
Firefox has a built in debugger but i prefer to use a third party debugger called Firebug.
You should give Firebug a try as indicated in the first answer. However as far as I know you had to install it as Add-on, it is not included in the distribution.
I think your question is a little too general. Anyway, if the compatibility issue is about CSS style, you should check whether you are using WebKit-prefixed CSS only. For example, if you are using -webkit-animation, it would only work in Chrome and Safari. Actually you should set four CSS styles: -webkit-animation, -moz-animation, -o-animation and animation to make your code work in major browsers. There are some documents about Mozilla and WebKit CSS that might help:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
if you go here:
https://secure.dynawebs.net/_studiolite-dev/studiolite-bs.html
I trippled checked all paths as well as re-downloaded bootstrap 3.
with Chrome or FF you will see the glyphicon on the login page just fine (blue icon next to the StudioLite text).
Do the same with IE 10/11 and nada... I have a feeling maybe it's something to do with the fact I use https:// but I don't get any errors in IE and the path to the CSS is relative so it should work.... been banging my head for couple of hours...
any help is greatly appreciated,
Sean.
Font Awesome doesn't support IE7. There is a little info on work-arounds here:
Fort Awesome 3.2.1 Git Hub IE 7 Support
Well, I ended up adding this to me CSS
#import url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
which solved the problem...
What I dont understand is that why this doesnt work:
#import url("https://secure.dynawebs.net/_studiolite-dev/_common/_js/bootstrap/css/bootstrap-glyphicons.css");
as both point to same file, and internally the paths are relative and valid.
I have a feeling IE10 likes CDN due to security and not my path... altough it's odd since its from same domain... weird...
The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html