Are you afraid of shadows?

Have you ever wondered how iTunes manages all those cool effects with the iPhone App images? The neat text shadows and box shadows for images, the curved corners… I thought it was something they were using an image tool for, but the more I looked at the feeds, the more I noticed that the the feeds were just that, straight text with not a lot of graphics. Yes, the app image is an image, and yes they are manipulating it, but does it surprise you to know that they are simply using CSS3 effects that are available in WebKit?

I was going through styles at the end of my work day today because our pages just look so bland. I was looking for easy ways to spice it up, even just a little. I started playing with shadows, and instantly fell in love. I made the title of the page look like it was popping out of the screen, and the boxes appear above the page. These were VERY cool effects, but they would only be available to webkit browsers – Safari on Windows and OSX, and on the iPhone and iPod Touch – pretty much anywhere if I understand the documentation correctly.

And that’s when it hit me. Isn’t Google’s Chrome web browser based on WebKit too? So I open it up to the page I was testing and wow! My shadows all worked wonderfully!

I was upset because I know FireFox 3 does not support shadows, but then found a reference to FireFox 3.1a saying that this will be the first version that allows for the shadows. About time I say!

But here we are, supporting an 8 year old browser which will never support these cool effects. I even looked to see if IE8 will show the text shadowing, and even though it’s in RC1, it does not support text shadowing. Maybe that’s why there’s word on the street that IE8 will possibly be the last version – which I’m sure only means for the engine, which is already out dated before launch since it does not support many of the visual effects that WebKit does, which really amounts to the coolest browsing with the least overhead.

With any luck, the tide will turn, and we will be able to produce more and more rich web applications, with eye-popping effects by simply using CSS. Here’s to hoping!

Tags: css, css3, firefox, google chrome, ie6, ie7, ie8, iPhone, safari

You should upgrade to IE7

This text was found when browsing using IE6 – I loved it and wanted to share it with you! Found on Click Forensics

Your are currently browsing this site with Internet Explorer 6. When it was released in August of 2001 Internet Explorer 6 was a cutting edge browser, unfortunately after nearly 8 years the technology behind Internet Explorer 6 has lost its luster. Internet Explorer 6 lacks many powerful features and security enhancements of modern browsers. It is also very poorly lacking in standards compliance which means it’s simply unable to render sites properly without hours of hacks and workarounds.

The last version of Internet Explorer 6 was called Service Pack 1 for Internet Explorer 6 and was released in December of 2004. By continuing to run Internet Explorer 6 you are open to any and all security vulnerabilities discovered since that date. In October of 2006, Microsoft released version 7 of Internet Explorer that, in addition to providing greater safety in navigation, which allows the Internet Explorer browser to identify as’ modern browsers’. Microsoft has launched Internet Explorer 7 as a high-priority update, and is now available to download for free without any certification requirements. As of Feb 12th, 2008 Microsoft is forcing updates to Internet Explorer 6 in order to move people towards the much improved and secure version 7. Please ensure you don’t hamper this process. It’s for your own good!

Download Internet Explorer 7 NOW!

Just another great reason to take the leap away from IE6 — if you can. Is there a version of IE7 for Win2k users?

Tags: ie6, ie7, internet explorer, service pack 1, windows

Cross Browser DOM Ready

This is an interesting post about cross browser DOM Ready…

Reinventing the wheel, cross browser DOM ready

There are different techniques to have DOM ready functionality. Some techniques are faster,smarter than the other (or a combination of both). Having it working in various of browser has always been an issue, with HTML 5 they introduced a new event called DOMContentLoaded.

Its a great step to have cross browser DOM ready functionality, but there will always be browsers who doesn’t have this implemented *cough* Internet Explorer *cough* and also the older browsers that some people are still using. So I think it will be safe to say that we can use the DOMContentLoaded completely crossbrowser in the year 2020…Read More

What he’s come up with is very interesting, and for high intensity sites, could be a huge boon.

Tags: firefox, ie6, ie7, safari

Hiding and showing scroll bars with JavaScript

Have you received a requirement that says “We want to see this many elements before you add a scroll bar, we don’t care about the height of the elements, just the number”? If you are using YUI, there is a VERY easy way to handle this! YUI has the following 2 CSS classes which you can add either through javascript or other server side language:

show-scrollbars
hide-scrollbars

The CSS for this is VERY simple:

.hide-scrollbars,.hide-scrollbars * {
    overflow: hidden;
}
.hide-scrollbars select {
    display: none;
}
.show-scrollbars {
    overflow: auto;
}

Now you have scroll bars on command through any language. Using YUI, implement this by addClass, and in Spry, addClassName.

<div class="myBody">
    <ul>
        <li>List of stuff 1</li>
        <li>List of stuff 2</li>
        <li>List of stuff 3</li>
        <li>List of stuff 4</li>
    </ul>
</div>

<script type="text/javascript">
   YAHOO.util.Dom.addClass("myBody","show-scrollbars");
</script>

I’m using the div id “myBody” as text above, but the function also accepts an array of elements, or a single element. You can also wrap addClass into a function that decides when to show or hide the scroll bars.

Tags: firefox, ie6, ie7

IE6 – ul Background Color & Border Missing – Fixed!

So the bug I was working on today had to do with the error messages. In Firefox 2 & 3, and IE7, they show up great! Nice yellow background, red text, red border. Nothing fancy, but it definitely sticks out. IE6 gives me the fancy red text, but no background and no border. So off I go on the hunt to figure out why, oh why IE6 has cursed me so.

During my stalking of the interwebs, I came across the adobe forum and someone who had problems with their disc showing up on their <li> elements. Okay says I, how can I use this to my advantage? I read through the comments and the IE6 background bug strikes me like a brick in the forehead. Of course! I’ve solved THAT one before.

So the simple problem boils down to this code:

<span id=”errorMessage”>
   <ul class=”errorMessage”>
      <li>Some Error Message Goes Here</li>
   </ul>
</span>

At first glance, there’s nothing really wrong here. The span has a display:block on it, so it should be great right? Yeah, not so much. Since IE doesn’t expect that a span would ever be used as a block, an explicit width must be set (the background bug solution). So my CSS now looks like this:

span#errorMessage {
display: block;
width: 590px;
}

Now just to be retentive, I’ve also set the <ul> and <li> elements:

ul.errorMessage {
/* added to correct IE6 error styling */
display: block !important;
display: inline;
}
ul.errorMessage {
display: auto !important;
display: block;
}

So now, my IE6 has some specific settings and my FF and IE browsers completely ignore it, thus solving the problem.

Hope this helps!

Other references to this and similar IE bugs:

Missing Backgrounds Bug
The IE7 CSS Hack | iBloom Studios
IE7 Repaint Bug

Tags: browser bug, ie6