Web BorG: January 2007

1/29/2007

New Paint.NET available

Today I've received an auto-update of Paint.NET to version 3.0. Super. Just at a first glance, here are some features:

Multi-document interface
Gradients integrated into the Tools pane
User defined color paletes
New effects

And the thing I love the most (being also a PhotoShop user) - now you can switch primary and secondary color with just pressing key X. Small but I missed that a lot :) Thumbs up!

So if you don't have auto-update turned on, or you don't have this program yet, click here to download the latest version of paint.net

Technorati tags: free tools, web design, graphics, paint, drawing, picture, photo

1/28/2007

IE 6 can support transparent png

Even though the new IE doesn't have problems with semi-transparency in png images we would believe that we still have to be careful - a lot of people is still using Internet Explorer 6. In my previous posts I've already shown that one solution is to use additional CSS for ie6 and older.

I've found that with the help of a simple JavaScript fix also the old IE can display transparent pngs properly.

Read about how to enable transparent png-s in Internet Explorer 6 and older here.

We still need a separate CSS for other incompatibilities :)

Technorati tags: web design, css, compatibility, internet explorer, transparency

1/20/2007

Some good resources from Adobe

Probably you've noticed that the topic of the month for me is the cross-browser compatibility. So here's an additional resource from Adobe. Community based portal where you can get a lot of experience from others, facing certain problems with CSS. And it's well categorized also.

The site is called CSS Advisor. Already in my bookmarks. Thanks, Jose for the tip.

My new blog

Hurray for SharePoint. Using it I've managed to establish my new blog quite easily. Though it's also easy to create blogs in services like blogger, MSN spaces, etc. I'm happy that I have a blog in SharePoint.

Anyway, what is it about? It will be my attempt to say something about environment and ecology. So please visit my new eco blog - Eco wwway.

And as a starting point, I've created a short survey on how many e-cards you've sent instead of regular cards. So please help me spread the word and get as many answers to the survey!

Thanks in advance and happy blogging!

1/15/2007

CSS for different output (handhelds, print,...)

Thanks, Jose, for a good question. I've done some more digging and as a mater of fact we can make specific CSS according to the device the page is intended for. We can define CSS for different outputs, like handhelds, printing, screen, even projectors, etc. using the media type. Below's an example for first inserting the CSS for all output and then additionally adding the separate CSS for printing.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="printing.css" media="print">
</head>
<body>
...

Another method is in the CSS itself. Below is an example of writing specific styles for handheld devices and printing inside of the CSS file.

<style type="text/css">
@media = print, handheld {
    h1 { font-family: Arial; font-size: 0.8em; }
}

As seen in the example above, the Heading 1 is going to be with font Arial and size 0.8em.

Which options you have for output (most common used in bold):

all - for all media type devices
aural - for speech and sound synthesizers
braille - for braille tactile feedback devices
embossed - for paged braille printers
handheld - for small or handheld devices
print - for printers
projection - for projected presentations, like slides
screen - for computer screens
tty - for media using a fixed-pitch character grid, like teletypes and terminals
tv - for television-type devices

(source for above: W3Schools)

Even though there is a way to distinguish CSS for IE and other browsers, detecting them is a whole another story.

Technorati tags: css, compatibility, web design

1/14/2007

Having IE6 and IE7 at the same time

Continuing with the topic of my previous post. If you'd like to have compatible website you need to see it running in Internet Explorer 6 and Internet Explorer 7. This is tough though, because IE7 updates the IE6. If you don't want to have a separate computer just for IE6, click here to see how to have both IE-s running on the same computer.

I've installed the IE6 standalone and it works beautiful! Below is a screenshot from my start menu.

Technorati tags: compatibility, internet explorer, web design, ie7, ie6

1/13/2007

CSS compatibility IE6, IE7, Firefox and others

How cool! The new Internet Explorer 7 now supports semi-transparent PNGs. So web design got a bit easier. Or did it? According to w3schools web statistics there is still a BIG amount of users of IE6. So how to adapt that web site will use advanced features on browsers that support them?

You can use some CSS hacks. Here's what you can do:

If you want to distinguish CSS for Internet Explorer (IE) and other browsers (so CSS display problems occur in IE), create a separate CSS file (many web designers call it iehacks.css). Next in the website after linking your original CSS for all the browsers add the following code:

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="iehacks.css" />

<![endif]-->

And enter all the corrections for Internet Explorer in the iehacks.css file.

If you want to make specific css only for older versions of IE, then you have to use  instead of <!--[if IE]>.

Below is an example if you want to use semi-transparent .png as background in IE7, Firefox, Opera and others, but .jpg as background in IE6 and older. You can also use !important to seperate CSS for other browsers and IE.

HTML page:

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

<body>
<div class="watermark">....</div>...

styles.css

/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
    background-color: black;
    background-image: url('images/gradient.jpg');
    background-position: left top;
    background-repeat: repeat-x;
}   /* black background with gradient on top. */

div.watermark {
    background-image: url('images/watermark.png'); /* transparent */
    background-position: left top !important; /* for all but IE */
    background-position: right top; /* for IE */
    background-repeat: no-repeat;
}

iehacks.css

/* for IE6 and older */
div.watermark {
background-image: url('images/watermark.gif'); /* here is a transparent that will be displayed better in IE6 and older */
}

Ofcourse above is just an example using semi-transparent png for all browsers but IE6 and older. Like that you'll be able to make your website more compatible.

Technorati tags: web design, css, compatibility, internet explorer, firefox, opera, css hack, transparency, png, IE6, IE7

1/05/2007

50 coolest websites

Time.com announced 50 coolest websites. So if you're up for becoming the candidate for the next year, check and compare yourself to them. It's a good starting point :).

Web BorG

Important notice