search
Recent Posts
- Activating Flash in IE
- Double margins in IE6
- Red links in Safari
- Background images not repeating in IE6
- Wrong height of thin DIVs in IE6
Archives
other reading
essentials
- Web Developer FF add-on
- FireBug FF add-on
- Multiple IE (WinXP only)
senffworks
- Def Leppard
- Def Leppard Discography
- William Tell
- Vivian Campbell*
- Def Leppard Rock Of Ages*
- Def Leppard YEAH!*
rss feed
Activating Flash in IE
Whenever you put some Flash on your page and you use the standard object embedding method (that is generated whenever you do the F12 thingie in Flash), your Internet Explorer-loving visitors will not be able to use the interactivity of your awesome Flash creation right away. For “security reasons” (yeah, sure…) and something that has to do with a Microsoft/EOLAS lawsuit, the user has to actually click on the Flash bit first before it becomes usable. In Firefox it works right away, really. And I’ve heard that it’s also not a problem in IE for Macs.
See for yourself on this page, where I posted a small example. The flash bit (everything with a black background) on the left will work right away in Firefox (”work” meaning that the red text will change to white as soon as you put your mouse over it, and to blue if you actually click on it), but if you use IE, you’re gonna have to click the Flash part first before it does that.
Of course, in this case it’s not that big a deal, but for more complex/interactive Flash applications this is unwanted and, dare I say, unprofessional — especially since a fix is easy to implement (not to mention it has been available for a long while).
There’s three steps you have to take. First of all, upload a JavaScript file on your web site server. It’s called SWFOBJECT.JS and you can download it from this page (this is also the site where you can read every detail thing about this thingamabob).
Second, refer to this in your HTML file — you should know how to do this. But if you don’t, this is the line to put in your <HEAD>-tag:
<script src=”swfobject.js” type=”text/javascript”></script>
Finally, get rid of the standard way of calling the Flash-animation (everything that’s between <object classid=… and </object>) and use the following code:
<div id=”flashcontent”>This text is replaced by the Flash movie.</div>
<script type=”text/javascript”>
var so = new SWFObject(”flashname.swf”, “yourFlashName”, “200″, “100″, “8″, “#000″);
so.write(”flashcontent”);
</script>
Of course, replace the appropriate parts in that script (flashname.swf is the filename of your Flash file, yourFlashName is the id tag, 200 and 100 are the width/height dimensions, 8 is the required version of the Flash player and #000 is the background color). In the aforementioned example, this is what you see on the right side. Try it in IE and you’ll see that it doesn’t need any activation and that the color changes work right away.
Note that this is the simplest way of implementing this fix. If your scripts/flash files are in different folders than the root, then you need to do some extra work and work with paths and all that, but I assume you know how that works. Play around with it. This thing can also be useful for other ActiveX controls (embedded Media Player instances for example), and there’s plenty of other parameters you can use — again see this page for everything that comes with this fix.
Double margins in IE6
Yes, another IE6-only issue….. Whenever you place a DIV on a page and you want it to have a specific left-margin or right-margin, it’s possible you’ll get two for the price of one: you ask for a margin of 14 pixels, and you get 28! Why? No full explanation here, but it just happens when your DIV has a certain value for the float-property. If the float is left, then the left margin will be doubled, and if the float is right, you can bet your life that the right margin is twice as much as you specified.
(Also, this whole thing applies only if your DIV is the first (or only one) in a container. Following DIVs in the same container won’t show the same erratic behavior.)
The solution is ridiculously simple (and, as usual, doesn’t make much sense): give your DIV the property display:inline;. and you’ll get your correct margins. For more specifics, check this in-depth article.
Red links in Safari
If you see that some of your links show the wrong color in Safari (even though you specifically declared them in your CSS), and they DO look good in other browsers, the reason is probably that your page is calling a .CSS file that doesn’t exist, or is misplaced and you’re calling it from the wrong folder location.
The result is that, for that specific CSS file, a 404 “not found” error is generated, and even though you don’t directly see that page, the styles for that 404 page will override some of your other links. Since the color of links in the standard 404 page are red, some of your links will end up with that color in Safari.
The best way to check this is (obviously) using Firefox and its Web Developer add-on. While on your page, hit CTRL+SHIFT+C to see which styles are being called (click “Collapse All” for a better view), and check if all these .CSS files actually exist (in the correct location). Big chance at least one of them isn’t, and now you know what to fix.
Background images not repeating in IE6
You have a DIV with a certain background image, and the background doesn’t repeat (or ’tile’) in IE6 - but shows just once? Today, I wasted 2 hours of my time only to find out that using a .PNG image for a background is not a good idea. Make sure you use a .GIF or a .JPG for that kind of thing.
Wrong height of thin DIVs in IE6
So, if you want to have a specific DIV on your page with a height of only 5 pixels (it doesn’t really matter WHY - you just want it like that), why the fuck does IE6 make it some 20 pixels high anyways?! Let’s take this basic code:
<div style=”width:300px; height:5px; background:#ff0000;”></div>
The result will be this:
If you have Firefox, IE7, Opera or Safari, it should be displayed correctly, like this (shown for those who have IE6):
However, IE6 displays it as follows (shown for those who don’t have IE6):
Not the 5 pixels high we want, eh! One of the many IE6 bugs? Not particularly. Apparently, the main reason is that IE6 is pretty much ‘reserving’ that much space for any characters in that specific DIV. Sure, there are no characters, but still the browser wants to give them some room should they ever appear.
One way to fix this, is to declare the size of those (non-existing) characters to zero pixels, using font-size:0; — but I personally don’t like this hack-style declaration of giving fonts a size of ‘nothing’.
Instead, you can eliminate the issue of the (non-existing) characters pushing down the bottom border by using the extra declaration overflow:hidden;. The space for the characters is still there, it’s just not forcing the size of the box anymore.
So, in conclusion, this should show this box the way it should in all those browsers:
<div style=”width:500px; height:5px; background:#ff0000; overflow:hidden;“></div>
And yeah, that does make sense when you think of it…..in a way.
Lesson 1: tables are bad
If you’re one of those people who are here to actually learn something about creating web sites, here’s three basic rules that should have been standard by now, but are still not accepted/adopted by way too many people:
- Rule number 1: use the <TABLE>-tag ONLY for tabular data, and use DIVs and CSS tags for layout.
- Rule number 2: see rule number 1.
- Rule number 3: no REALLY, see rule number 1!
If you’re still working with tables, your reluctance to steer away from that method and use DIVs instead is understandable. After all, you’re good at something, and now someone tells you that you should go in an entirely different direction (hey, it’s what I thought when I was told I should move on…)! But, times change and you can’t have a mullet forever — that was cool 20 years ago (and right now it’s quite the opposite). Tables were The Thing To Do until 2 or 3 years ago. Nowadays, they’re only showing that you’re not up-to-date with the coding standards of today.
Seriously. If you want to move on, learn how to use DIVs, how to position them properly, and don’t use a single table for that in your site. You’ll be used to it before you know it. And yeah, there’s plenty of discussions you can have about the whole thing: check tables vs. divs in Google if you’re interested in all the ins and outs.
End of lesson.
Here we go again
So here we are, back at square one, Senff is blogging again. Though, if you are familiar with my previous online trails, I might have to disappoint you. This blog is not about Def Leppard, life in Montreal with my two girls, a certain Hedgehog Police, or any other funny off-beat stuff. It’s gonna be about Web Development.
Fucking hell, that sounds boring!
I’m sure it is. Unless you’re a ’serious’ web developer yourself, however. This thing started when I planned to document some web programming issues, bugs, hacks and fixes I kept seeing while working on some web sites. Always good to have them handy. But why keep them to myself? I’m sure other developers could benefit from it if I would just put these things online (you might not even know it, but you DO need to know about the clearfix method — and so do a LOT of others), which would also make it instantly accessible for myself, should I ever need it whenever I’m “on location”.
Hell, all I want to do is give people some help if they come across some problems when they develop a web site. The browser version compatibility issues (both general and the specific ones), escaping DIVs, correct HTML, and so on. Who knows this could be a handy resource. Maybe not, but then at least I have it documented for myself (ah, gone is the pressure of having to have some audience). And yes, I’m sure this is only interesting material for “techies”.
Which basically means that this is not for those who publish a web site with Dreamweaver, Homesite or SiteBuilder and then call themselves a Web Developer. This is for those who are passionate enough about their web sites to actually want their sites to display correctly in IE7, IE6, Firefox, Safari AND Opera. Or, at the very least, those who make an effort to avoid the use of the <TABLE>-tag in their source code.
Welcome, all three of you…..!