I have used modernizer & html5boilerplate's css. I haven't been good at designing/debugging for IE. I have been over reliant on FireBug I guess... whats wrong my my WIP http://jiewmeng.kodingen.com/demos/folio-wip/index.html
It looks like below in IE (even 9)
What it should look like ... in Firefox/Chrome
Little know fact: you need to put the modernizr script on inside the head tag, otherwise IE doesn't know how to style the elements before rendering them. The webpage is perfectly fine declared as html5, lots of production websites are already doing this.
IE simply doesn't support selectors like: a:link::before (you're using this in your menus).
Edit: heck, <section>, <article>? IE anything? Man this is all HTML5 stuff. IE isn't going to support it at all (9 eventually, 6,7,8, never unless they use chromeframe!)
Related
Here is the situation - I am using the HTML5 "main" tag on my site, but as it turns out, IE doesn't support and it doesn't display it at all.
I am using the html5shiv script (https://code.google.com/p/html5shiv/) and was wondering if it will be a problem to include it non-conditionally - for all the browsers. Can I expect any problems with that?
In their site they don't mention anything about using it non-conditionally.
I tried using the "if IE" conditional tag, but it seems IE10 is too modern browser and it doesn't support it :D
Use
main {display: block;}
in your Stylehseet.
You should only use it with a conditional statement to identify IE versions that need it. There are many sample HTML5 DTD declarations on the net that implement html5shiv correctly and gave been tried and tested with many browsers.
on a website I am working on I have problems with an rendering issue which I can't figure out.
I've already played with margins, positioning, z-indices and so on to get it away but nothing of that helped.
It only occurs in IE8 (under Windows XP, don`t know if on newer OS also). I know IE8 is a bit deprecated, but because the rest of the page is displaying fine with it I would also like to support it, since some of my visitors may have installed it.
If you take a look at the page you can identify the issue very fast when using IE8:
http://kunden.tommy-computer.at/fsv_noetsch/
Here is what the menu headers look like in modern browsers like FF/Chrome/Opera/IE>8:
And here is what they look like in IE8 (wrong):
How can I get rid of it. Please help, can`t figure it out why this happens. Thank you very much !
You are using the new html doctype and I noticed you are also using at least one html 5 element article. IE 8 won't recognize that element, or anything related to html 5. You need to use javascript to fix IE by using a script called html5shiv.
What this will do is inform IE of the new elements so they can be styled.
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.
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 :)
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html