Pardon any brashness here, I'm about at my wits end looking for answers.
I am looking for a list (if one exists) or some resource guide of specific html and css tags that have changed from IE7 to IE8. Specifically, I want to see something like "this code works in IE7 but not IE8... here is the broken tag's equivalent to make IE8 work."
I do NOT [begin frustration rant] want to hear anything about the meta x-ua-compatibility work around to put in my header. We are FIXING our app for IE8, not putting on a band-aid.
Thanks in advance!
//sw
I fear this is somewhat of a pipe dream :)
However, my solution is to use IETester. This has helped me enormously!
http://www.my-debugbar.com/wiki/IETester/HomePage
I don't know the CSS differences, but IE8 and IE7 support HTML identically. HTML, aside from HTML5, has not changed in more than 10 years.
http://www.quirksmode.org/css/contents.html is by far the best resource for testing CSS differences between browsers. It is frequently updated, quick to scan, and very detailed and accurate. He has stuff on non-css differences as well but I find those sections less imperative.
Related
The website I'm working on is currently working fully on latest chrome which is what I'm using, but when I use tools like IE NetRender to check its compatibility with older IE versions, the site comes up plain, with no styling AT ALL!
However, IE8 is on a completely different level. The site is looking almost as good as it's on chrome/firefox/whatever.
I tried using IE9.js, modernizr, IE Hacks, everything - but nothing worked.
Somehow it all seems to take effect only on IE8+.
It's as if IE7- don't even load the stylesheet.
I also checked my code for errors in the CSS/HTML markup but all of the errors point at the IE css hacks.
What could possibly be the cause to this? I'm literally frustrated with it.
The site (just a development page) is http://kanjiman.0zed.com/
Any help will be MUCH appreciated.
Please try to render the page using IE NetRender and see what I'm talking about.
P.S; I did try to Google/search for a solution - but in none the situation was as bad as mine.
EDIT:
The problem was IE9.js - I found this out thanks to Fabio's answer.
Whether you want to keep it or not is up to your project requirements and your priorities.
I personally am going to keep it since as both Rob / Felis commented, IE versions 6/7 are DYING! I'd rather provide a better user experience for now rather than supporting and spending more time with older browsers.
Also, this is only a matter of about 3 lines, so if your site starts to gain more IE7 traffic (I doubt it will even worth it), it's always changeable.
Thanks Rob, Felis and Fabio :)!
This is what i see in Internet Explorer 7
<style _7="
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}">CSS Stylesheet</style>
this is what should be there:
<style>
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>
For some reason, you are assigning the style as an attribute for the style tag making it useless for internet explorer. Why dont you use css files for styling instead of mixing it with the html source code?
Hope it helps
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
I have just started web development after a few years. Mostly in the past I would specify a style-sheet dedicated to IE6. Now, Chrome and Safari seem to be rendering elements better, over FireFox.
What is standard procedure for external style-sheets these days? IE6 (STILL?) - IE8? FF even?
It would be greatly appreciated if anyone has advice specifically catered to marketplace development, ie XHTML / Wordpress development.
There is no specified number of stylesheets. Usually it is one for IE and one for rest of the browsers. Note that there exist solutions such as ie7.js or CSS3 Pie to make IE behave like standard-compliant browser.
I personally use 2 stylesheets. One core one, and one for IE6.
Most of the modern browsers simply ignore anything that they don't support, and dont have quite the sheer number of behaviours that require hacks.
Given that a stylesheet isn't required at all, the answer is none. I would still say you need only 1 though. (If you've created your css properly and used a proper doctype). Technically you shouldn't need to have browser specific styles at all. And for the few times you might, you can use Star Hacks for IE...
I think question you're asking relates back to the much bigger topic of how best to handle cross-browser issues.
It's a wide and varied topic, but to help you with you're specific question about CSS branching (forking)... you may be interested in the following article from "A List Apart"
"Stop Forking with CSS3" http://www.alistapart.com/articles/stop-forking-with-css3/
Cheers.
My <marquee> tag is working perfectly in ie6 and ie7, but in ie8 it only shows first item.
How can I fix this?
Thanks in advance.
The marquee element is deprecated. The W3C recommends using <em> and <strong> as alternatives. If you need to mimic the behavior of the marquee, JavaScript has tools for doing that. This discussion has a working JavaScript example.
As much as it pains me to link this:
http://remysharp.com/demo/marquee.html
A jquery based marquee which will work across browsers.
As much as I loathe the element and the vast majority of its use-cases, CSS3 seems to have brought it back:
CSS Play: CSS 3 Marquee.
CSS3.info: CSS3 Marquee Module.
From what I understand Marquee is deprecated, and IE8 might be the version of IE that Microsoft decided to completely leave out support for that tag. Even if you do find a way to get it to work, I would suggest using another method to get the text to scroll (if that is what is needed) becuase you will probably have the same problem in the next version if IE.
EDIT:
You can try java script...after a quick search I found this site that looks like it will generate the code for you. Also, since it's javascript it should now also work on Firefox, Chrome, etc.
http://rumkin.com/tools/marquee/
I really feel the scroller mechanism is pre-Web 2.0. If your client wants it, well you may not have a lot of options but I would really try and do some kind of demo to highlight that there are better ways and it would not cause any instability to the site if implemented correctly.
I know many clients are cautious, but in my experience if you can show them a better alternative which is as stable or even more stable and at a low cost (time and money) then they are willing to accept the new way more often than not.
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 :)