Google Chrome vs. Safari 4

I have been using Google Chrome at home and at work since it was released. Today I tried using Safari 4 for the first time. I really like the Google Chrome "most visited" page as I can see what the page looked like last time I visited it. Plus it remembers the most frequently visited pages. The challenge in Safari 4 was customizing their "top sites" to have the same site I had in Google Chrome. It was definitely hard but I finally accomplished it. Two of the web sites I added will not generate previews, one of them being Bank of America's site, which I find really odd. CSS 3 is the secret behind both of these web browsers. Webkit is used in both of these web browsers as well as used within Flex/AIR. The thing I have always liked about Safari is the built-in RSS reader available in the menu bar. Nice to see iTunes CoverFlow being used for Bookmarks. At least they have a new style carousel for the "top sites" page that just looks too cool. You can make a tab become a separate window but I could not find a way to re-attach it. I find Google Chrome annoying on how easy it is to make a tab become an extra window but at least they have an easy way to just drag the window back as a tab. Somehow several times a day accidentally detach a Google Chrome tab as a new window. I am glad I don't have this problem with Safari 4. I have had Safari installed on Windows for a long time but only used it to double check browser compatibility as I found the fonts looked really odd on Windows. I found the CSS checker interesting as it shows how lacking IE and Firefox are and how far they have yet to go to catch up. For now I am a Safari 4 convert.

left undone on A2D web site

I did not have enough time to add the following to my A2D web site:

1. menus using Suckerfish menus as starting point


2. AJAX using Prototype Javascript library :: when a need arises I will be ready within minutes


3. Multiple column CSS layouts

rounded corners #2

Just when I thought all was well as the nice rounded corners looked so good on Safari and Firefox, I found out that they look horrible on IE 7. The first problem I found was that the Rico library in IE 7 does not like color names, so I switched the "white" color to "#ffffff".


Next I have to find out why the Rico demos work on IE 7 but my special code does not. Why does web development have to be so hard? Who would have believed that setting vertical-align: top on the parent <div> would have caused all of the havoc? It is fixed now and looking the same on Safari, Firefox and IE.

Customizing HTML lists

I decided to change the ordered <ol> and unordered <ul> lists on the A2D web site to use a custom style based on one of the List-a-matic styles. The CSS I created looks like this:

.article-list {
padding: 1px 1px 1px 40px;
margin: 0px 0px 20px 100px;
background-color: #cccccc;
color: #ffffff;
border: 1px solid #cccccc;
}
.article-list li {
border-left: 2px solid #4c4c4c;
list-style: lower-alpha;
background-color: #ffffff;
color: #663300;
padding-left: 5px;
padding-bottom: 3px;
}


Wouldn't you know that IE 7 does not display these correctly, but Safari and Firefox show the list as the example image above. Back to debugging IE problems. The problem required a little investigation but isolating the <ul> and then removing and adding CSS style changes until the problem was located. In IE you must add the style padding-left: 40px to allow room for the custom list style lower case alpha characters!

JavaScript dialogs

I found an extremely useful JavaScript library called Prototype Window which is built on top of Prototype and Scriptaculous. I really like how easy it is to customize and add different skins to the dialogs. I am using this for the dialog that explains how I created the A2D logo. Creating a dialog is easy as this:

var dialog = new Window('modal_window', {className: 'dialog', top:logo_top, left:logo_left, width:logo_width, height:logo_height, zIndex:150, opacity:1, resizable: true});
dialog.setContent('logo_creation');
dialog.show(true);


CSS tricks

Today I have been using a couple of very nice CSS tricks in my recent contracts, so I re-created them from scratch on the Attentive 2 Design web site:

• Rounded corners using Javascript without images. What I really wanted to do was add a dark burnt orange border around my definition box on my home page, but when I tried to do so the
  
Rico.Corner.round('a2d_description', {corners:'all', color:'#4c4c4c', border:'#ffa500', bgColor:'#ffffff', blend:'#ffa500', compact:false});

  


• Setting transparency using CSS that works in Safari, Firefox and IE - I used this for dialogs - click on the A2D logo and a description comes up in a dialog.
  
opacity: 0.5; /* ------> Mac: Safari */
-moz-opacity: 0.5; /* -----> Firefox */
filter:alpha(opacity=50); /* ---> IE */

  


• Creating a box punch is a standard printer technique, but I like the effect so I added it to the same dialog that explains how I created the A2D logo. The CSS to enable this was very simple:
  
div#punch_logo {
background-color: white;
float: left;
text-align: center;
border: 1px solid black;
border-width: 0px 1px 1px 0px;
margin: -1px 1em 0.5em -1px;
padding-left: 3px;
}

  Where the HTML looks like this:
  
<div id="punch_logo"><img src="images/a2d.png"></div>

  


• Drop shadow for text, which I used for the © copright notice at the bottom on the A2D pages. The CSS is very complicate because of browser issues, but I like the code that works in Safari:
  
text-shadow: #4c4c4c 3px 3px 3px; /* color, horizontal offset, vertical offset, blur */

  


• Dynamic Drive ToolTip II is a nice example of how to create custom tool-tips, hover help, balloon help or whatever you would like to call it. It is used for the A2D logo and for the drawn arches within the toolbar.
  

button widths in IE

Then there is a problem with the button widths in IE. I thought it may be fixed in IE 7, but alas it is still there. Thankgoodness there is a work around. To fix the navigation buttons on the left hand side of the Attentive 2 Design web site I set the button style widths to the same as the width of the images. The navigation bar is created in Javascript so this is done in one place. I could have just as easily added a className and used CSS to control the width as well.