Bootstrap 3 not loading glyphicon icons... help :( - html

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...

Related

Layout in internet explorer is broken

So i've been working on this website ( http://iulian.cablevision.ro/fc-botosani )and my layout in chrome and firefox seems to be ok. But when i open in Internet explorer 8 it's like a disaster... everything is messed up. Can't find why and how to fix this problem.
I've found one of the most useful things for sorting out Internet Explorer problems is running the site through the W3C Validator:
http://validator.w3.org/
Often just fixing whatever the validator says is wrong, even the simple stuff, corrects issues in IE. Good luck!
Without much details, we won't be able to help you. What did you try to do? Do you have an idea? You can use the site caniuse.com to find the problem by entering a CSS property or HTML tag. First of all, look at your CSS to find the problematic rule.

Firefox and internet explorer does not css render correctly?

Im having a few issues with IE and firefox css
go to http://www.chriscaplan.com/KEW/
have a look in chrome that is displaying correctly
then have a look in IE or firefox it doing some weird stuff.
is there something im doing wrong ?
can any one help???
You have 2 style sheets working against each other:
skeleton.css
style.css
Replace the skeleton.css with the latest version and run it in IE and you will see. I switched your version with the latest and it started to work on IE.
Your method for clearing floats is not working.
If I were you, I would take some time to look at multiple examples on live websites of how people have put together their sites' headers. Right now the structure and styles on your header don't seem to follow normal design patterns. And by normal, I mean common, well tested, typical for a reason, etc

Can't get the Slideshare icon to work

For some reason, I can't seem to get the Slideshare icon (f1e7) to work.
Every other icon in the font seems fine - and I made sure my installed fonts were all from the latest 4.2 archive.
Any ideas?
TIA,
Adam.
I'm having the same issue currently. I think this may be an issue with the font files, because when I comment out the sources so only the .svg is used, the icon shows up fine.
Until the issue is resolved, I would recommend using the .svg of the slideshare icon, and implementing it using icomoon.

How to get backbone and HTML5 elements to work in IE8

I have a very light backbone app which I've been developing recently and I'm having a lot of trouble getting HTML5 elements to work in IE8. I've found multiple blog posts around the place talking about html5shiv and modernizer
I have tried both of these as CDNs and local JS libraries but no matter what IE will not detect the new elements.
I found an old issue on github that is the same as mine but details that html5shiv should fix my issue but it really doesn't. I've double checked that the JS libraries are loaded and run, I've tried moving it around above my stylesheets, below my stylesheets, and at the very top of the head section but nothing will work. I even found an old blog post which talks about work arounds for my exact issue, and says that the new html5shiv as of Jan 2013 should fix it. I'm really at a loss here, has anyone had this working nicely?
I'm running backbone 0.9.10 and jQuery 1.8.2 with a Drupal 7 backend but I think these are irrelevant.
I have finally managed to create a jsfiddle which demonstrates my issue and shows that html5shiv should indeed fix the problem. It also shows it has nothing to do with backbone, this is a bug in jquery.
The broken dom elements come from the line
$(document.body).append($('.test').clone());
Viewing the full result page in IE8 correctly shows tags. Removing html5shiv reproduces the issue I have, even though adding html5shiv to my own project does not fix the issue.

Jquery tools tooltip misplaced

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?