Topic: First "Public" Site

[Dragonfighter]

Is here.  I have designed a few subpages before for exisiting sites but this is the first one I've designed for public consumption.  The layout is completely executed in CSS and it is cross browser compatible and validates.  I am pretty proud of it, just starting out.

There is one little quirk I would like any input on.  Because of an image map on the Meister Print illustration, to get the tool tip positioned where I wanted it in IE I had to insert a line break.  Unfortunately it added a space on the picture's caption when viewed in FF.  Not horrifying but annoying...any ideas?

Kyle

[Dynaweb]

Very nice CSS stuff there.  I have no idea about the space prob though.  Maybe include some of the specific code samples here and we can take a look.

[Dragonfighter]

Here is the CSS specific to the tooltip:

a.tooltip
{
cursor: help;
position:relative;
z-index:24;
}

a.tooltip:hover
{
z-index:25;
text-decoration: none;
position: relative;
display: block;
}

a.tooltip span
{
display: none;
}

a.tooltip:hover span
{ /*the span will display just on :hover state*/
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
text-align: justify;
text-indent: 2em;
display: block;
position: absolute;
margin-top: 20px;
margin-left: 20px;
width: 200px;
height: auto;
background-color: #F0CBA2;
color: #5A2100;
padding: 10px;
border: 2px solid #5A2100;
white-space: normal !important;
}

And here's the pertinent HTML:

<div class="image">
      <a class="tooltip" href="#">    
      <img src="images/Meister.jpg" usemap="#Meister" style="border-style:none" alt="Meister Print"/>
      <map id="Meister" name="Meister">
      <area shape="rect" alt="" coords="173,121,214,179" href="images/Meister_Detail.jpg" title="" />
      <area shape="default" nohref="nohref" alt="Click Here for Detail" />
      </map>
      

      <span>A fossil footprint was discovered
      in June 1968 by William J. Meister on an expedition to Antelope Spring, 43 miles west of
      Delta, Utah. The sandal that seems to have crushed a living trilobite was 10 1/4 inches long
      and 3 1/2 inches wide; the heel is indented slightly more than the sole, as a human shoe print
      would be.</span>[/url]
      <area shape="rect" alt="" coords="173,121,214,179" href="images/Meister_Detail.jpg" title="" />
      <area shape="default" nohref="nohref" alt="Click Here for Detail" />
      </map>               
      <div class="caption">
      <p class="captions">Courtesy of Creation Evidences Museum</p>
      </div>
   </div>



If I place the tooltip entry prior to the image map it covers up the image map.
If I place it below without the line break it displays to the right and off the page depending on the display in IE.  Without the break it displays fime in FF.