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.

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.