I have this particular html code involving a couple of HTML5 features. The layout of the page is exactly what I am expecting on every browser (not tested on Opera) but with the addition of the HTML5 doctype, the "curvy" shape around "buy it" is no longer present, and the orange color that both "buttons" (do it and say it) are supposed to have disappears. Could anyone provide some pointers on how to get the page to look normal on all major CURRENT browsers. I have a fairly technical audience coming to my site, so non HTML 5 compliant browsers will not be an issue.
Original without doctype (You will have to copy/paste into chrome or firefox to see what I mean, sorry!):
http://jsfiddle.net/bRCw3/
With doctype:
http://jsfiddle.net/ZXXYy/
Thank you for any help you give me.
You've specified the orange background colour (FF9900) in two places without a preceding #. Quirks mode is forgiving on this but standards mode is stricter and will ignore it.
Just change background-color:FF9900 to background-color:#FF9900 in both places and you're good.
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've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
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.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
I just opened a webpage in safari and what did I see? The whole text was green? But I only make the captions green, so the regular text should be black? Then I thought: Well I programmed this site in Firefox. At first I thought it was a bad interpretation by Safari but I reviewed my code again and I saw this:
<h3>Caption<h3>
<p>BlacktextblacktextBlacktextblacktextBlacktextblacktext</p>
I haven't closed the h3 tag.
So Safari interpreted my code correctly, and the Firefox tolerated this typo? In Firefox it works as it should: GREEN caption BLACK text; Safari says: "No no! You forgot to close the h3? Well now everything is green, deal with it."
My Question is: How tolerant are the major browsers? What (typos, invalids, etc) do the browser tolerate?
Actually, both browsers "tolerated" your invalid markup (invalid because you had two unclosed <h3> tags), they just did so in different ways. Gecko (Firefox) decided that the h3 can't contain a p and closed them both just before the opening p. WebKit (Safari, Chrome), on the other hand probably closed them at the end of the document body.
All browsers will do their best to recover from the biggest mess of a HTML document. Their "tolerance" level is more or less equal, but the results will vary between them. It's best not to rely on browser error correction. Use the w3c validator to make sure your code is valid and give it the best chance of parsing correctly in all browsers.
Browsers doesn't have any tolerance for errors at all, but they will make their best to correct code that is not correct so that it can be rendered.
While there is well defined standards on how to render correct code, there is no standards at all on how to interpret incorrect code. Any browser may use their own plan on how to make the best out of the situation.
Neither of the browsers can interpret the code right, as the code itself is not right. So, neither of the browsers does anything wrong, they just do things differently.