I just completed a site: http://www.justcelebrations.co.in . I haven't launched it yet because of certain problems. The site uses css3 text gradients to style text in span and border radius to style most divs. It has to be made dynamic later so I don't want to change the text effects to images or something. The problem I am facing is that the site hangs IE8. I haven't tested it in lower versions of IE. I have tested the markup thoroughly and its validated and the css too is valid except for features which are from css3 like opacity, border-radius etc. I have also added google script to make ie behave properly and mordenizer library. The site still hangs IE8. Please Help me out here..
EDIT: after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9]
and it worked!
after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9] and it worked!
Can you add <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> to target fixes. As you make changes view in IE8 through IE9(F12) and play with -ie-(compared to -moz- & -o-) in your css. I would also keep a CSS 2.1 file and a CSS3 file to keep track of your new code.
It's working good here in Safari. Just to narrow this down, what if you remove all the conditional and IE specific libraries you got from Google? In my experience, all the various JS libraries that are supposed to make older IE versions behave always seem to break or conflict with some other script or library like jQuery.
Also see the answer in this thread for optimizing your page loading by placing the JavaScripts at the end of the <body> section. Perhaps in your case, loading the JS last will make some kind of difference to Explorer.
Related
Probably a weird question and after your answers I might be ashamed for asking this.
I have a specific font embedded on my website (via #font-face) this font is used for a section that is only visible on wider resolutions (desktops). On Smartphones for example, this section is not visible (display:none).
The #font-face rule is not defined within a media-query but right at the beginning of my stylesheet.
I wonder now if it would be possible to avoid loading this embedded font-file if I'm viewing the site on a mobile device.
You know. The font-file has a view kb and I want my site to be as fast as possible. Since the font wouldn't even be needed on my mobile version I wonder if
1.) the font is even loaded at the moment? I have no idea how to test this on my iPhone. Since the section where it is used is set to display:none I don't get any feedback.
2.) If it is loaded (and I guess so) would it be possible to set this #font-face declaration inside a media-query with max-width : 640px (e.g. iPhone) and the files wouldn't be loaded in this case?
Any ideas on that matter?
thank you in advance.
1) Images with display:none are loaded in some browsers and in some others not. So i guess it's the same for fonts.
2) There is a bug in FF 3.6, but they probably have fixed it nowadays. As far as i know, browsers supporting both media-queries and #ff should render it correctly.
CSS standards dictate that At-rules inside #media are invalid in CSS2.1, but according to this post you can load an external file with #import and a media-target declaration, i guess this way:
#import url("fonts.css") screen and (min-width:800px);
But you know, #import doesn't work that well. So i just wouldn't care about CSS2 and pretend to be writing CSS3 ;-)
This guy says that it's ok to just move #ff inside a media query.
I believe the best solution is to put it inside a min-width media query (don't forget to use the only keyword, which is intended to hide media queries from older browsers).
Using min-width is definitely more suitable than max-width for a progressive enhancement approach, and if your site is designed for mobile devices too it's probably what you want to use.
But as others said, testing is a must-do ... and sharing the results too ;-)
It seems to work. Didn't test it in older Versions of IE (I'm using modernizr, etc. for media-query support in older brosers) but it might work.
I'm defining the #font-face rule directly inside the mediaquery where it is needed. I tested it with all modern browsers. There is no request if the browser window is very small and the media-query isn't triggered. Once I resize the window to a larger with (where I need the font) it is loaded.
Just what I wanted.
I'm using #font-face for the first time, and it seems like the font file is always the last resource to load on the page, no matter what. I'm using a Font Squirrel-generated kit with the smiley syntax. I've tried some of the techniques suggested here, among other places, to get the font to download earlier, including putting the font directly as data in the CSS and putting a styled element in the head section of the document. None of these techniques are working; in Chrome, FF, and IE the font file is always downloaded very last.
Is there any to affect the order in which the font loads?
There is a related question here, but it just links to the same Paul Irish post I mentioned.
Font loading differs from browser to browser (i guess you're reffering to FOUC).
I think the only browser that loads it as fast as it reads the #font-face rule is IE and Opera.
EDIT with samples:
Here are some net load lists for a simple site:
font-family is called last in .css file - after all background
images
font being loaded is scriptbl-webfont
#font-face is
defined at top of css after the reset styles.
FF5 - font loads last:
IE9 - font loads on #font-face - and before background images:
Opera 11 - font loads #font-face - and before background images:
Safari 5 - font loads last (there is no favicon in my folder - Safari adds that by itself):
I'm not sure what your experiencing is a problem. To me using a different font that needs to be downloaded should be one of the last things to happen. The different font is a presentational piece, it's extra not required in my mind, let all of the required stuff download and then the extras.
I know there is the conditional comments:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-only.css" />
<![endif]-->
to detect Internet Explorer 9, but what about Firefox 4? How do I load a style only for Firefox 4?
If you must detect the browser and version for FF4, the best answer is to use jQuery's browser() method.
However, I would agree with the comment by #Gareth McCaughan: if you find yourself having to do browser detection (for anything other than IE6/7 and possibly IE8), then it's very highly likely that you're doing something wrong. The fact that you're using it for IE9 in your question indicates that you're probably already getting it wrong.
All the modern browsers, including both IE9 and FF4 have excellent standards support, and a well-written page should render virtually identically in all of them.
If you do have something that renders differently in IE9 or Firefox 4 compared with other modern browsers, please specify what it is, because there may be a better solution than browser detection to get around it.
There is only one thing that I know of in FF4 which might need you to resort to this, and that's text-overflow:ellipsis, which is supported in all modern browsers except Firefox. See my earlier question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)
You can't "detect" firefox in the same way. Conditional comments is IE only "feature". You have to detect it through user agent string on the backend. Or using javascript.
There are no conditional comments in FireFox to do this, if you really need to your best option would be to use jQuery (or similar) to load the relevant stylesheets.
$(document).ready(function() {
if ($.browser.mozilla && $.browser.version == '2.0') {
$('head').append($("<link>").attr({type: 'text/css', rel: 'stylesheet', href: 'css/firefox4-only.css'}));
}
});
I personally wouldn't recommend browser detection though, and you should be using web standards and feature detection if needed :)
I'm a bit stumped on this one. I am referring to this page - http://savitarbernese.com/welcome.aspx. At the moment it looks okay on IE7 but I can't seem to get it to work on other browsers. As it stands now I had to wrap a couple of DIVs within tables to make the background extend behind the full content. I'm guessing this has something to do with the div overflow? I'm not sure...
What's the best practice for cross-browser compatibility when using DIVs?
Cheers,
D.
Add
overflow: hidden;
to #container and to #content in your css and presto!
This directive tells the browser to extend the height of the parent divs to the inside divs, even when they are floating.
What's the best practice for
cross-browser compatibility when using
DIVs?
Allways code for firefox first, then for IE.
You are starting in the wrong end. If you build it for IE7, it will rarely look the same in any other browser, and not in IE8 either.
First make sure that it looks right in a standards compliant browser, for example Firefox, then it will almost always look the same in all other standard compliant browsers, which is just about everything except IE7 and earlier. IE8 still has some rendering problems, but it's a lot closer to being compliant than IE7. You will have to make some tweaks to the page to make it look the same in IE7 also, but that is a lot less than trying to make it work the other way around.
And first of all you should make sure that you have a proper doctype on your page so that it doesn't render in quirks mode. That helps a lot when you want it to render the same across browsers.
Thanks - that's a fair comment. My dev machine is down and I only had access to IE7 at the time. Normally I would definitely start off with Firefox 3.5 and go from there.
That aside, it's a small problem that is hampering me at the moment. In FF3.5, Safari, and IE8 the background of the content panel does not extend down the full height of the content like it does in IE7. I have changed the doctype to use XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is there something obvious I have missed here?
Thanks again.
Here's my JS insert:
<script type="text/javascript" src="include/profile.js"></script>
In IE8 with "Compatibility View," the file never loads. The first line in the file is a simple alert() call, so that I know it loaded. Change the browser to Standards View, and it loads fine.
Also, if I add:
<meta http-equiv="X-UA-Compatible" content="IE=100" >
It forces to Standards View and it loads fine.
Any idea why this would be the case? I've not been able to test against IE7, but I know the JS file also does not load in IE6.
Right now the tag is in the section of the file.
It would seem that IE8, Safari, Firefox, et al will tolerate certain JavaScript syntax errors. IE7 and IE6 (and IE8 in 'compatibility view') will not, and they will also not throw a parse error or any other kind of clue.
Pasting my code into http://www.jslint.com/ revealed a couple of syntax errors that weren't affecting the code's operation in other browsers. So boo on me.
Okay. Had the same problem on IE8 and safari 5 on windows and finally got this working. This one is really beauty...
I had a function with a parameter named 'class' which was causing the issue. Renaming to clsname fixed the problem. Apparently FF and chrome were lenient about this.
Turn on script debugging and see if you are getting a javascript error in compatibility mode. The presence of an error would keep the javascript from executing even if it is loaded. You might also want to use the developer tools in IE8 to debug the javascript and/or verify if the file is loaded or not.
just spent couple of hours on this - IE7 & 8 suffers from "return" identificator
I had:
m["return"] = 123;
var x = m.return; // SILENT ERROR!
Obviously, renamaing identificator solves this