Category: Bugtracking

Mac OS X Mail Problem: Attached Images Show Up Embedded In Outlook & Other Clients

I’ve had this problem for a while, that Mac OS X Mail (the native mail client in OS X) sends emails that other email clients don’t recognize as attachments, but as embedded pictures. This has been really frustrating, because if I’m sending an image to a client that needs to be saved on the client’s computer, he or she is unable to do so because the image is not a “real attachment”.

So, here are the facts: Wether an image is embedded in the email or not, it’s still an attachment. Thus, OS X Mail does nothing wrong when it embeds the image, other clients simply doesn’t want to understand that it’s still an attachment. The clients (read: “Outlook”) offer no way to save the image other than to right click it inside the email, but that only generates a .bmp that’s scaled down to the email size in pixel width.

Please note that it doesn’t matter if you click the Attachment button in the main taskbar or simply drag the images to the email body.

The solution:
The reason my images were getting embedded was because I was using some signatures with colors in them. As soon as you set the font, a color or similar, Mail turns the email into a “Rich Text” email, which basically means it’s a HTML email. So when you attach images to such an email, Mail generates an tag for that image, thus embedding it into the email itself. You can avoid this easily by just using Plain Text emails (see screenshot).

You can also try to simply don’t use any formatting in the email, including your signature.

Hope this helps. 🙂

Tips on Using the Outline CSS Property

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

IE6 & IE7 Doctypes problem

All browsers have their flaws, that’s for sure. But sometimes you see pure stupidity, and then it might be worth writing something about it.

If a web page doesn’t have a doctype, it usually means that the page is either very old or created by someone that don’t care or doesn’t know anything about doctypes. The strange thing though is that Internet Explorer treats those pages as something completely different than normal, modern web pages. If you don’t add a doctype to your HTML document, Internet Explorer will not rely on it’s rendering rules any more. For example: If you set both a width and a padding to an element, normal browser rendering makes the total width of the object to be width+left padding+right padding.

.box {
padding: 10px;
width: 200px;
}

The total width of .box becomes 220px. However, without a Doctype to rely on, Internet Explorer does not default to a simple Doctype like HTML 4.01 Transitional which would follow this rule. Instead it decides that the page is not worth a second chance, and some rules are rendered incorrectly. In this example, .box would actually become 200 pixels wide according to IE’s rendering.

You might think that this is not a big deal, but consider that other browsers are smarter than this, which makes the crossbrowser rendering of the web page a mess. It is also a fairly unknown and “not so easy to discover” kind of bug which makes it even harder.

Read about the existing Doctypes and why you should use them over at A List Apart: Doctypes.

Annoying Firefox+Firebug anchor bug

picture-1.png

UPDATE 2008-03-20: This bug is easily resolved by upgrading to the latest Beta version of Firebug (currently 1.1). Thanks to PatternHead!

I’ve experienced this bug for quite a while now, and it is really annoying. Basically you can’t inspect an anchor in Firebug, and there’s no way around it.

Today I had enough and decided to do a thorough search on the web to get rid of the problem.. Looks like it’s a well known bug. Someone suggested that I’d revert back to Firefox 2.0.0.11, as it didn’t have this bug. I found an old version, sadly a .exe though. I could not find any mac equivalent, until I stumbled across a Ukrainian .dmg file… So now my Firefox is in crazy Ukranian, but at least it works properly!

Flash Movie Controls – Play/Pause Button

I’m not very experienced in Flash. I can do basic movies with tweens, some playback buttons and maybe one or two animations, but that’s pretty much it. For a recent project however, I had to do a pause button.

Now this might seem like an easy task, but it isnt. A pause button must both pause and play the video. I looked around the web for some easy solutions, but couldn’t come up with anything useful (although I’m sure there are guides for it out there, I just didn’t look hard enough..). This is what I came up with:

How to create a Play/Pause button in Flash

  1. Create a movieclip called “playpause”. Put this movieclip anywhere in your main movie.
  2. Create a button in this movieclips first frame, call this button “pause”.
  3. Now go to frame two, create a keyframe and another button, call this one “play”.
  4. Create another layer, call this layer “script”. Put the marker in the first frame and open Frame Actions. Type in “stop();”. Create another keyframe, and do the same thing again.
  5. The buttons need some actionscripting too to be able to work. They need to both make the other button display and to play and pause our movie, which is the main target. I found a way to do this really easily. Click the button “pause”, and open Button Actions. Then type in:

on (release) {
gotoAndStop(2);
_parent.stop();
}

The first line displays the play button, the other one pauses the main movie. Select the other button, “play”, and type in:

on (release) {
gotoAndStop(1);
_parent.play();
}
Save the document, press Command+Enter (PC: CTRL+Enter) and make sure it works.

I hope you found the guide useful! Please leave a comment below and let me know what you thought.