I’m constantly finding myself needing to reference this for colleagues or for myself so it’s only appropriate to add it to the blog. If you’re working with Internet Explorer on a regular basis and let’s be honest, if you’re in web design, you will be.
Here are the supported conditional mark ups for each version of IE:
height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */
I was working on a video player that had it’s controls rendered in HTML/CSS with Javascript hooks into a SWF file that actually streamed the video when I started looking at trying to use Object instead of an iFrame to display/share the project. I read just about everything I could find on it:
After reading all of these articles and playing with the results I’ve come to a few conclusions:
So here’s essentially what everyone’s code looks like:
<object width="660" height="399" type="application/x-shockwave-flash"></object>
My problem? It doesn’t work reliably across all browsers. IE only renders it when it has a classid and the standards brigade doesn’t render it when it is there. There isn’t a solution that would allow a nice and tide sharing copy/paste line of text that works across all browsers like an iFrame…yet. And in case you’re not following along, what I’m talking about is something like what YouTube does:
<object width="560" height="340" data="http://www.youtube.com/v/GggVSAPt-HY&hl=en&fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/GggVSAPt-HY&hl=en&fs=1" /><param name="allowfullscreen" value="true" /></object>
Microsoft, if you’re listening. Please can you take a look at this and figure something out? We’d all love to be standards compliant and strict even, but iframe is going the way of the dodo and object isn’t supported by that lovely browser that doesn’t seem to support anything cool.