I came across an 'issue' some time ago that I never did get to the bottom of. Hopefully somebody can shine a light on it. What causes certain browsers (Chrome, Opera and Safari) to render a page differently when I change the DOCTYPE from strict to transitional. I know the general cause of this is quirks mode being triggered, but both the XHTML and CSS for both files validate according to the w3c validator.
I can only assume that these browsers use different internal style sheets for the two DOCTYPEs, but have no real idea why they would do so. I was just hoping somebody could confirm why this happens.
The difference that can be seen is the space between the bottom of the 'header image' and the border of the menu bar. In the aforementioned browsers there is no gap between the two when using a transitional DOCTYPE, but there is when using strict (in IE and FF the gap is present on both). I eventually worked out that adding display:block to the img tag stops the gap appearing in all cases (which was my objective).
transitional example,
strict example
It would appear that by default in 'strict' mode an image is displayed as an inline element. Inline elements are given a space at the bottom to account for descender characters such as g or q. Since an image will not have any descender characters this was considered strange behaviour which led to the introduction of 'almost strict' mode. In 'almost strict' mode all img tags are rendered as display: block rather than inline. Further details can be found here.
The final piece of the puzzle is that all modern browsers render pages with a strict DOCTYPE in 'strict' mode and pages with a transitional DOCTYPE in 'almost strict' mode. More details can be found here.
Many thanks to both Moses and Riley, some of the information they provided helped me find the answer.
I don't truly understand this quirk myself. I do think it has to do with white space. In quirks mode, white space is more forgiving. However, in standards, white space can cause issues.
For instance, in your example, you have a nice beautified source that is easily readable. Removing the white space and line breaks between containers and elements will allow you to remove the gap in some browsers (FF I believe). To fix it in IE, you will need to add line-height:0; to the containing element of the image (in this case the containing anchor or link tag).
You should also note, if you care about IE6 at all, that having each of your <li>'s on their own line will add extra lines between each list item when rendered.
There are only a few differences between Strict and Transitional DOCTYPES, none of which really explain this. (note, I only have FF, IE installed so I can't see the error itself).
As far as what caused this to happen, it could be a case of browser's having different stylesheets for the different rendering modes. However, I think it really just comes down to the fact that the browser takes different approaches to how it renders the page for each mode Strict/Trans/Quirks/Frames. While the only documented difference between Strict and Trans is how to handle inline images inside tables, browsers don't have to adhere to W3C specs and can do whatever they really want, and this tends to cause bugs like the one you apparently just found.
Related
I'm currently faced with a weird inconsistency issue between my pages that are in Quirks mode and in non Quirks mode (i.e. IE9 Mode). In my CSS, I set one of the div tag to have width:100%, but the behavior of the same div tag is different when I put it on the two different pages. In non quirks mode, the div tag will span slightly longer than when the div tag is in the Quirks mode. I'm really having trouble trying to figure out why there is this inconsistency when the CSS is exactly the same. Anyone has a clue on this?
Before Quirks Mode
In CSS 1 and 2, the W3C dictated that width and height shall describe only the dimensions of the "content" of an element, disregarding its padding, border, and margin, which would be added expanding around those dimensions.
However, Internet Explorer, from versions 4 through 5.x, did things differently by also considering padding and border as part of width and `height:
The above illustration is from a great Wikipedia article on the subject.
Quirks Mode
Internet Explorer 6 fixed this bug by following the W3C's specification, but changing this behavior would break the appearance of many websites that depended on this bug, so Quirks Mode was introduced to emulate the behavior of older versions if an old page was suspected.
That's why Quirks Mode can make the same page look different even if the CSS is exactly the same, as you described: it causes elements to be sized differently in order to emulate old browsers. The inconsistency is intentional and expected. Microsoft has a page detailing the effects of Quirks Mode in Internet Explorer 9.
CSS3
With CSS3, the W3C introduced a property named box-sizing that allows specifying this behavior. This doesn't really relate to Quirks Mode (since Quirks Mode ignores CSS3), but I thought it might be worth mentioning since it's related to the box model.
What to do?
What I recommend is to avoid Quirks Mode. With the complications it entails and its non-standard behavior (both in that it does not conform to standard and also in that it means different things to different browsers), it might save you a lot of work to bring all your pages to be displayed under the same rules.
Here's a great bit more about the emulation of old versions of Internet Explorer and how to set it:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
I'm now building a website for my sister. It looks normal on Chrome, firefox and IE9 but for some reasons, some of my div lost all background color in IE 7 --.
http://xx3004.kodingen.com/JDProperties
Open the website and you can see the pop up message has problem with title and button set (background color) - I'm using IE 7 right now. Then the content of the left body lost background color too, and the right column lost background too. I've been doing many searches on Google plus I notice that jQueryUI could not be wrong, so I guess it's because of my DOCTYPE in the begining of the source code. I've tried to change to some other DOCTYPE I saw on the Internet, or even omit it, but the website becomes either messing up or remains the same.
This is the first time I see this situation, it's weird and I hope I don't know how to fix it.
I'm expecting to solve the problems soon :-). Thanks everyone in advanced.
[x]
I started to look, and then saw this
</head>
<body>
</body>
</html>
</head>
<body>..
Try building the structure properly and see what happens yo.
You have mismatched HTML tags. Chrome, firefox and IE9 are cleaning up for you, but IE7 isn't that nice.
Agree with #albert, you do need to recode that page, although it's seeming to mostly working, the nesting of multiple head, body, style elements going to lead to trouble, and I suggest you change to an HTML4 Doctype as the coding is not XHTML, the more conflicts (tag soup) a browser has to deal with the more likely you will get them interpreting your intentions differently.
As for the IE backgrounds in numerous (inline styles) places you have background: inherit IE does not understand the "inherit" value of properties - or more specifically for IE7 and earlier it only applied "inherit to the direction and visibility properties
How do other designers normalize padding and margins across browsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies.
It seems for some elements, with some browsers, setting a padding or margin to 0px will trigger the browser to use a default padding and margin determined by that browser. Is there a way to hard reset the padding or margin across all browser so there is a consistent look?
Update
It seems from additional research and the feedback here, it's near impossible to get websites to look the same across different browsers to the letter. I think I'll stick with using a CSS Reset and just try to plan out my sites better.
I'm not sure how to overcome the default browser mechanisms that override style settings and it would probably be too much effort to do so.
This is usually solved with a CSS reset but not all of them are complete. On some browsers, the overall body has to have its border set to 0 (i.e. Opera and sometimes IE) to be truly the same. Try the following:
body,html{margin:0;border:0;padding:0;}
Since you don't say which element or give a link I can't really go too far into this. Which elements are you having trouble with?
Its not worth the extra CSS interactions and extra code to add a complete set of "normalizing" padding or margin elements.
Its best to style for what you need by explicitly stating the padding and margin for the elements you are using on your pages.
Paddings are usually 0 everywhere. It are the margins which are the most disbalanced among browsers. Just define your own margins on HTML block elements. A CSS reset is like a sledgehammer. You'd need to redefine more than only margins. But it may be helpful for beginners since they often can't at first glance distinguish between default inline and block elements in HTML. A CSS reset would force them to redefine the one and other "the right way".
Related questions:
Are margin and padding the most disbalanced among browsers?
That said, if you keep seeing inconsistencies among browsers, then it may happen that you're using a doctype which forces the browser into quirksmode. In MSIE the box model bug would then come alive. You'd like to use a strict doctype: <!DOCTYPE html>.
See also:
Activating browser modes with doctype
How to get consistence rendering of paragraph text in all browsers?
See IE 7 rendering like this
alt text http://easycaptures.com/fs/uploaded/248/0266470505.jpg
and FF like this . which is ok to client
alt text http://easycaptures.com/fs/uploaded/248/8655561297.jpg
How to get same result in both browsers, i mean FF rendering in IE? my client needs "non-executive" in same line in all browsers, Is <br /> only solution of this.
Update : see all code for <p> here http://easycaptures.com/fs/uploaded/248/4505395091.jpg
I'm already using XHTML 1.1 doctype and eric meyer reset CSS
Update: 28 March
Thanks for all replies!
I tested this problem is only not coming on firefox . but coming in all other browser IE6, 7, 8, Safari(windows), Google Chrome.
Is there any possibility css only solution now?
For your specific issue, use the <nobr> tag around your text, or a span with the CSS
whitespace: no-wrap;
This will prevent non-executive from breaking across lines.
However, you should note that getting entirely consistent rendering is quite difficult between browsers and platforms.
Update
You are most likely setting both a fixed width and a padding on the left and right of the element. IE and Firefox will interpret that differently due to box model differences. If you cannot recode your page to use a fixed width and a left/right margin, then you will need to specify a different fixed width in an IE only stylesheet to compensate for the problem.
Education
Web development is about education. Much of that education is educating your client on what to expect and not to expect.
Help by explaining to your client that each browser, and OS combination handle fonts a little differently. One engine may place the letters slightly closer to each other than another.
You could put tons of work into getting this just right, but if your end user has enlarged their fonts at all, all the time and money spent on making sure one hyphenated word stays on the same line will go out the window.
Technical Thought: Both browsers appear to already be rendering the text as closely as they can, I don't think a reset.css is going to help you at all.
Resetting all styles to get rid of the differences in the browser stylesheets might be a good idea. YUI's reset.css can do this for you. then you can start from scratch to format your paragraphs, using percentages for font size , spacing etc. (see YUI CSS cheatsheet).
EDIT: Just saw your comment to cletus' answer. So: what CSS are you using for laying out your text?
This is nothing to do with margins, padding, fonts, resets or any CSS, really. It's about how browsers interpret hyphens. IE obviously decides that it can break the line on a hyphen, whereas Firefox treats it as one word.
Like McPherrinM said, you can use no-break tag: <nobr>non-executive</nobr>. Or you could simply remove the hyphen altogether.
Or you could just explain to your client how all browsers and systems render text differently and there is no way you can prevent this occurring in all situations. What is the problem with the word splitting over two lines anyway?
You might look into the use of a soft hyphen
­
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.