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.
Related
Here is the doctype I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This will happen if you have content (an HTML comment perhaps) before the DOCTYPE. White-space should be OK in IE8 - although I think even this caused problems with IE6.
(In IE6 an XML declaration before the DOCTYPE would trigger quirks mode - this was fixed in IE7, but it would seem that other content before the DOCTYPE still triggers this.)
not being funny, and I'm sure you've already checked this, but...
Have you tried pressing F12 to step into the IE Developer Console. Is there achance maybe that the "Document Mode" or "Browser Mode" is set to "Quirks Mode"
Forgive me if this isn't the case... I've simply fallen foul of this stupidity before...
It sounds like you're dealing with an Intranet page, which IE8 and IE9 treat differently. If your page is considered to be in the Intranet Zone, IE8 will default to a compatibility mode that might be borking your page up a bit.
You may be able to get around this by using the X-UA-Compatible meta element, but I haven't tested this myself.
This page is high in Google rankings for 'why page triggers ie8 quirks mode', so I will post my 2 findings (through painfull troubleshooting experience):
1) Page will triger quirks mode if you use php in general, but say on that particular page you do not have any php code in the before <html> section at all, but for compatibility you wish to write empty <?php ?> tags at the opening. Now, say, you wish to 'minimize' that code and remove all the empty spaces in between, so you write:
<?php?>
This will trigger IE8 Quirks Mode, because before <!DOCTYPE html> now you will have an extra line with something like this in IE8:
<!-- -->
and in Chrome 34.x:
<!--?php?-->
common, but deadly mistake. Just put
<?php ?>
(with space) to be safe.
2) Second reason was indeed very hard to discover. If you use UTF-8 for your documents and edit them with Notepad++, you will most probably set your character encoding as pure UTF-8 (Notepad++ > Encoding > Encode in UTF-8), and by chance you may trigger IE8 Quirks Mode!
Now, the solution is very simple: using Notepad++ just select Encoding > Convert using UTF-8 without BOM.
Quirks Mode is again gone!
Took me a while to catch all these, trying hard to find bugs in CSS, that were not CSS-related at all!
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.
We're in the process of converting web app to IE8 (now client is using IE6). We didn't create that app. We are only modifying and adding features to it. When I visit most of the pages in this app using IE8 developer tools show that IE is working in Quirks mode. But some of the pages work in Internet Explorer 8 Standards Mode. This page http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx says:
"Quirks Mode: This behavior matches that of Internet Explorer when rendering a document with no doctype or a Quirks doctype."
But all of our pages have DOCTYPE defined - !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" (I don't know how to enter angle brackets here but they are present on webpage.
Can anyone explain me why is IE8 working in both Quirks and standard mode when displaying pages that all have DOCTYPE defined? Or maybe show me two examples of pages that IE8 displays in Quirks and standard mode?
The doctype tag has to be first in the markup, otherwise it's ignored. If you have an XML declaration tag before the doctype tag, IE will ignore the doctype.
If the HTML markup is utterly broken, the browser might fall back into interpreting it as tag soup instead of as an HTML document, and rendering it in Quirks mode.
Use the W3C HTML validator to check that the code doesn't have any serious errors.
Try viewing your HTML i an HEX editor. There might be some weird characters (usually 3: ef bb bf) just before the DOCTYPE declaration. IE also falls into quirks in that case. Happened to me before, and happening right now as well.
I'm running Selenium in singleWindow mode and IE8.
If i start IE8 manually the IE8 mode is set, but when i launch it with Selenium, the mode set is IE7 using the compatibility mode.
Anyone knows why the compatibility mode is not the IE8 view when launching the browser with Selenium?
Or, how can i disable totally the compatibility mode in IE and force it to use always the IE8 view?
I've given the question a +1 because it's a very good question -- it's not obvious how to do this, and if you need to test both modes, then it is a necessary thing to do.
You could get the site to serve <meta http-equiv="X-UA-Compatible" content="IE=7" /> within the page when running the tests. This should force the output mode.
Obviously, that's not ideal, because it means changing your code to produce the meta tag on demand. I'd normally consider it a bad thing if you're having to change the main codebase in to add code for the specific use of your test suite, but in this case I can't see any other solution.
Given that we've decided to go down this path, you could write your code to accept a specified argument in the URL that triggers the meta tag to be served. The IE7 tests could then be written to send that URL argument.
By the way, it's worth pointing out that IE8's IE7-compatibility mode is not 100% identical to IE7; it has its own quirks and bugs which are distinct from those of a real IE7 browser. For the most part it should be fine, but it's worth being aware of this if you're expecting your tests to confirm that the site works in IE7. See this blog post for more info
I have some workarond solution for this, I use it regularly:
In internet explorer goto:
1. Tools / Compatibility view settings.
2. At the Add website input textbox add your website url.
Hope that helps, best regards,
Peter Nadasi (HUN)
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 :)