I got this page that works OK in Chrome, and it doesn't in IE9.
I tried making a new css for the IE9 page, using a conditional comment in the html code. That's okay.
But then I tried including a doctype statement... and the following happens:
when I include the doctype in the html file, everything is messed up
(even in Chrome) but once I deleted it, the page looks great in
Chrome and IE9.
If I restart IE9 (or remove temporary data) the page doesn't work
again.
I don't really know what's happening.
Any help would be really appreciated.
As has already been said, always use a doctype. Without one, IE renders in quirks mode, and what you get will be very different from what you get in other browsers.
If you code looks bad with a doctype, then I would suggest your code is bad to begin with. You've designed your site to quirksmode, which is going to give you results that seem random (they're not, but it will seem that way).
You're going to have to redesign your site to use standards mode. Then it will look the same (or similar) in all modern browsers.
First, you should always include a doctype. It tells the browser what set of rules you're going to be playing by.
If you omit a doctype, IE will assume your markup is ancient, and trigger Quirks Mode, which is essentially the rendering of IE 5.5. Side effects of this include the IE box model bug.
Without seeing any markup, I strongly recommend validating your markup and CSS using the W3C validators. Often times, Chrome and FireFox are "better" at guessing the meaning of questionable markup, IE not so much.
First of all, it's hard to find a solution without seeing your HTML/CSS. Generally, you shouldn't need a separate CSS file for IE...
Also I suggest you try using the HTML5 Boilerplate to help minimise browser inconsistencies. This should solve most problems unless it's an error in your CSS.
Related
yes the reply is I'm a very bad css coder but I really need to understand that, I created a page without using any doctype and the things goes whell in IE, FF and Chrome, except one or two very little thing, then I decided to add a doctype to see, but everything is displayed anyhow.
Google doesn't help me...
The page without doctype: http://commenttrouver.com/test/indexwithout.php
And with : http://commenttrouver.com/test/index.php
Thank you
Including (most) Doctypes, triggers Standards mode in browsers.
They stop emulating the bugs that appeared in older versions of browsers and more rigorously apply the standards (such as the requirement to treat a CSS length without a unit as "invalid and to be ignored" instead of "pixels").
Validate your HTML.
Validate your CSS.
Then worry about why anything still broken is broken.
I just made a clean website using HTML4 and CSS. Which worked perfectly fine in Chrome and Firefox. I also checked my site using the W3C CSS validator and fixed all the errors and warnings that were displayed. However, when I checked on IE7. The site was totally misaligned and out of place.
Is there a HTML and CSS validator which also checks for ie7 compatibility?
No, because what you're asking for is not a "validator" but an "invalidator". IE7 has a number of bugs, and lacks implementation of a number of features. There's no way for an "invalidator" to know your intent with anything, and thus, can't tell what you are trying to do.
With your site being a clean html4 and css site, maybe I'm offbase and you've already done this, but just double check that you've included a doctype declaration tag at the beginning of each page. As mentioned above, IE renders in quirks mode without a DOCTYPE specified, and personally i've solved many problems by specifying a doctype in my sites.
The route leads along knowing important CSS concepts and browser characteristics. I think there is no such validation service or tool that points out the hacks necessary. :( But there are some magic bullets against bugs in IE7 (e.g. setting the flag hasLayout=true or position:relative). There is a good collection of bug descriptions and reduction here: http://www.brunildo.org/test/index.html.
I recommend you start using a CSS reset file. This will reset all default css. These default css settings are different for most browsers. If you do not override them manually, you give the browser the control on your layout. And that's not what we want, aren't we?
I suggest you to upgrade you html to some newer version (html5 if possible or) at least xhtml 1.1, I think the problem is that IE7 is working in "quirks mode".
More information about Quirks mode here
I've had to work on a fairly complex design ( http://scoding.com/eyal/ ) because of its layout and shape, finally done it, all happy - until I checked on IE, it's seriously messed up, but why is that? Why is the container not centered? I have looked on google for some answers, and didn't find anything that could help, ANY HELP would be appreciated!
IE is rendering the page in 'quirks mode' (if you press F12 in IE you'll see the 'document mode' defaults to quirks).
Set a doctype like:
<!doctype html>
And all will be well!
For bonus points, run it through the W3C Validator and fix the errors it flags!
This is one of the reasons that every web designer hates IE.. ;-)
Unfortunately, there is no magic answer for you. You have to get the right tools and test every browser you want to support and fix the CSS for every broswer.
Not all browsers interpret CSS in the same way. But IE is the one most people will have problems with.
Hints:
Try using a CSS framework. Blueprint or CSS960 are among the most popular IMO. With a framework, you have a better chance of having the same result in every browser.
For IE, you can download the developer toolbar. It's like Firefox's Firebug but for IE. It is essential to debug CSS problems in IE.
Take note that if you want to support IE6,7,8 you will have to test them all :-( Because you will probably have different results in each version.
If you use JavaScript, I highly recommend jQuery. Never write "native" JavaScript code since it is interpreted differently in each browser. jQuery takes care of that and ensures that your code will be cross-browser compatible.
Good luck
We have a site that works fine with any latest browser including ie8.
But it has lots of issues with ie6, ie7 and ie8(Compatibility mode).
We are using following doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So it is not using quirck mode.
Before i start digging into individual issues, just want to known if i am missing something or doing something wrong to go ie in some different mode other than standard?
I tried to find list of known issues with ie6 and ie7 when using w3c standards but didn't find much useful, but found just enough to confuse me.
Any known site where i can find known issues with old ie's when using w3c standards?
By specifying what type of HTML document you are using at the top of your document you are taking the browser out of quirks mode. Now, the newer browsers are much more standards compliant and therefore easier to code with. Here are some tips that might help you out:
Use DIV instead of TABLE for layout
Watch out for Document Object Model or DOM differences between browsers
Here is a site with CSS compatibility info: http://www.quirksmode.org/css/contents.html
Run your code through W3C's Validator
Instead of W3C's free validator, consider purchasing a HTML validator which you can run on your machine. In my opinion a programmer wouldn't run a C# program without compiling, and web development shouldn't be done without some sort of validation program. It will save you oodles of time.
Sorry I can't post more links. Stack overflow will only allow me to post one.
Here is one link that has a few fixes I used to use: http://hublog.hubmed.org/archives/001515.html
There are more conflicts and non-implementations than one should ever have to know. If you write standards-compliant websites, your websites will not work in IE6 or IE7. Most people special case IE6 and IE7 with special stylesheets to fix the breakage.
The IE6 PNG fix is especially common.
Here's a good overview of IE related CSS bugs.
Also, if you're not doing it already I strongly suggest you use a CSS reset (here's an example of one CSS reset there are others out there e.g. YUI CSS Reset) - bringing all browsers down to the same baseline and then working up will elminate a lot of inconsistencies without having to track them down individual and hunting for causes if they later appear.
To find out whether you are correctly picking up Standards Mode, enter:
javascript:alert(document.compatMode)
in the browser's address bar whilst your page is loaded. If you get ‘CSS1Compat’ you're sorted. If you get ‘BackCompat’, you're in quirks. This can happen in IE when you've put some stray bytes before the <!DOCTYPE declaration, for example a spurious <?xml declaration.
I tried to find list of known issues with ie6 and ie7
It would be quite long. Yes, even in Standards Mode. Anything in particular?
I am a newb for sure. I have been developing in the firefox, and just barely checked in IE. Someone please help me out. Don't know where I went wrong. Thanks!
www.clgproperty.com
"Develop your site using Firefox or Opera. Then test it in IE and Chrome
Don't do inline styling. Use css files.
Continuously check that your design works in these 4 major browsers
Firefox is the best browser for developing websites. Why? Because you can use the FireBug plugin that helps you analyse your html output code and debug javascripts.
Ok, this is all my opinion, but it works for me :)
This is one of the many issues with programming and designing websites. Different browsers render CSS differently (Some are more standards compliant than others). Internet Explorer is notorious for being terrible at rendering CSS.
Your only option is to rethink the design and create a new one that works in both browsers from the get-go, or to use Conditional Comments to include specific CSS for a specific browser, such as:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Start with a strict doctype.
Add this to top of your page (there should be nothing else in front of it, even no whitespace):
<!doctype html>
This way IE will behave according the w3 standards like as the other (decent and real) browsers. This must remove the most of the webdev pains, including the IE box model bug.
As second step, make use of the w3 validator. This isn't the holy grail, but this should spot on the most of the common problems. When fixing w3 validator problems, do it step by step and retest. Most of the subsequent errors are just "sub-errors" caused by one of the earlier errors.
Good luck. And indeed, welcome at the webdev world :)