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.
Related
What features can I use in HTML5 and CSS3 without thinking too much about IE6 and similar? What features should I avoid?
What features can I use in HTML5 and CSS3 without thinking too much about IE6 and similar?
Define "too much". Anything that is in HTML 4 and CSS 1 makes for a very safe baseline…
On a more practical note caniuse will tell you when support for a particular feature has been added. You then need to decide if it will degrade cleanly or not.
That said, don't go looking HTML 5 / CSS 3 / etc features to use. If you have a problem, look for a solution. Don't look for a solution and then try a find a problem to solve with it.
http://www.caniuse.com/ is a great resource when you have a particular feature in mind to use - but are but sure the of browser compatibility.
In addition, many HTML5/CSS3 features have additional links with further information available on Can I Use.
Paul Irish has an awesome commented HTML5 Boilerplate.
From "Why it is awesome":
Cross-browser compatible (IE6, yeah we got that.) HTML5 ready. Use the
new tags with certainty.
Open this website in IE6 and find out: http://html5test.com/
(I don't have IE6 installed so I can not check it for you atm)
You also might wanna have a look at: HTML5 Cross Browser Polyfills.
I guess you have to avoid many things :-)
I would start by avoiding:
- Drag and Drop API,
- File API
Quirksmode has always done me well.
I think you should be a little more specific in your question - I don't worry about IE compatibility so I would say use them All. However I know that view is not shared by all, So i think a better answer would be use them all until you run into one that explicitly is not compatible with your target browsers / os
Once you start to see problems then work on correcting them.
I will say it once again - put together a specific list of supported browsers / os and you will be much much better off (hint - don't support < IE9 if you want to use the majority of these features)
The HTML5 doctype (<!doctype html>) works just fine in IE 6 (in as much as it puts IE 6 into standards mode).
Aside from that, I think pretty much nothing new in HTML5 or CSS3 (apart from #font-face) is supported in IE 6, so you’ll have to at least decide whether the experience in IE 6 is good enough. Usefully though, the new features generally don’t have any negative effect in IE 6.
For example, the new <input> types like <input type="date"> will render just like <input type="text"> in IE 6. So you’ll have to decide whether just having a simple text input is fine for IE 6 users, or whether you need to provide date-picking functionality using JavaScript.
This is pretty much the question with all HTML5/CSS3 features — can users of older browsers do without them, or do you need to add an alternative implementation?
The main exception is new tags in HTML5 — Internet Explorer 6 won’t let you style tags that it doesn’t know about, unless you create an instance of that tag using JavaScript. (The same is true of the HTML 4 tag <abbr>, because IE for some reason doesn’t know about that either.)
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 a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.
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.
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.