The plan was to design a simple header - horizontal menu, background image, small graphic and title in <h1>.
It worked fine, but looked a little flat so Stage 2 began: add some depth by offsetting the text using absolute and relative positoining, z-indices and a bit of colour.
The result can be seen here.
Does it look good?
Anyway - it's an improvement.
Now mouse over the menu.
Works on a Mac using Opera v9.23.
I've tested it using Safari 2.0.4, Firefox 2.0.0.6 and Sunrise 0.895 on a G4 iBook running OSX 10.4.10. In all cases (excepting Opera) the menu seizes up.
Both html and css codes validate.
I'm new to this game.
Is it normal?

HTML Code:
<div id="header">
 <div id="head">
  <h1 class="float1">cornwall (uk)</h1>
  <h1 class="float2">cornwall (uk)</h1>
 </div><!--head-->
 <div id="headertext">
  <ul>
   <li class="active">home</li>
   <li><a href="history.html">history</a></li>
   <li><a href="legend.html">legend</a></li>
   <li><a href="industry.html">industry</a></li>
   <li><a href="gallery.html">gallery</a></li>
  </ul>
 </div><!--headertext"-->
  <img src="flag.gif" alt="st.piran's flag" width="42" height="25"
      id="flag" />
 </div><!--header-->
css code:
Code:
.float1 {
 color: #333;
 position: relative;
 top: -1px;
 left: 2px;
 z-index: 2;
 }
.float2 {
 color: #abc;
 position: absolute;
 top: -1px;
 left: -1px;
 z-index: 1;
 }
Hoping I've not offered too much or too little code.
Any ideas how I can achieve the effect I'm after without sacrificing the navigation?
Thanks for taking a look.
Best wishes
David