[css-d] Navigation bar

[Alan K Baker]

Hi all.

I'm in the process of converting an old frames/tables/JavaScript site to all 
CSS. It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html

I am looking for a slightly more 'elegant' way of vertically centering text 
depending on whether there are one or two lines.

I've included the appropriate part of the stylesheet and the HTML below, to 
save you wading through the dreaded frames maze. At present my text is centered 
by [ .oneline a ] and [ .twolines a ] (below).

I've also just noticed a problem in all browsers except IE7. What I want to 
happen is for the currently selected item to show a different background and to 
change text color, as in [ #navbar a:active ] (below) and for this state to 
remain until another selection is made. IE7 does what I want, but other 
browsers are inconsistent. Some will show the correct state whilst the mouse 
button is down and it's possible in at least one other to select an item and 
drag the pointer away from the item whilst holding the button down and the 
active state will remain. It's late at night and I've probably missed something 
obvious!!

Help would be much appreciated.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
www.webbwize.co.uk
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Flatulus Antiquitus

------------------------------------------------------------

/* Main navigation menu */

/* Define vertical outer box with borders/bevels */
#navbar {
background-image:url(../images/logos/logo.gif);
background-repeat:no-repeat;
background-position:top;
position:absolute;
top:0;
left:0;
width:125px;
height:auto;
margin:0;
padding:0;
border-top:5px solid #dcf6ff;
border-right:5px solid #999;
border-bottom:5px solid #999;
border-left:5px solid #dcf6ff;
}

/* Limit list size and set margin to clear navbar logo */
#navbar ul {
font:9px Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
list-style-type:none;
margin:68px 0 0 0;
padding:0;
}

/* Single line of text */
.oneline a {
height:14px;
padding:8px 0 8px 3px;
}

/* Two lines of text */
.twolines a {
height:26px;
padding:2px 0 2px 3px;
}

/* Style & set background for active list items */
#navbar a {
background-image:url(../images/buttons/navstd1x30.gif);
background-repeat:repeat;
text-decoration:none;
text-transform:uppercase; /*All capitals for consistency */
color:black;
display:block;
border-bottom:5px solid #cce6ff;
}

/* Set new background position for rollover */
#navbar a:hover {
background-image:url(../images/buttons/navhover1x30.gif);
background-repeat:repeat;
}

/* Set background for current item */
#navbar a:active {
background-image:url(../images/buttons/navactive1x30.gif);
background-repeat:repeat;
color:white;
}

------------------------------------------------------------

<body>
 <div id="navbar">
  <ul>
      <li class="oneline"><a href="Home.htm" target=tepmain>HOME PAGE</a></li>
      <li class="oneline"><a href="VarietyDays.htm" target=tepmain>THOSE 
VARIETY DAYS</a></li>
      <li class="twolines"><a href="Liberace.htm" target=tepmain>LIBERACE<br 
/>LIVE FROM LAS VEGAS</a></li>
      <li class="twolines"><a href="MandMs.htm" target=tepmain>MAGIC AND THE<BR 
/>MUSICALS</a></li>
      <li class="twolines"><a href="SwingCrazy.htm" target=tepmain>ERIC 
DELANEY<br />SWING CRAZY</a></li>
      <li class="oneline"><a href="Palladium.htm" target=tepmain>PALLADIUM 
MEMORIES</a></li>
      <li class="twolines"><a href="Cricket.htm" target=tepmain>JIMMY 
CRICKET'S<br />MATINEE MADNESS</a></li>
      <li class="oneline"><a href="ThreeEms.htm" target=tepmain>MUSIC MUSIC 
MUSIC</a></li>
      <li class="oneline"><a href="Pantomime.htm" 
target=tepmain>PANTOMIME</a></li>
      <li class="oneline"><a href="Abracadabra.htm" 
target=tepmain>ABRACADABRA!</a></li>
      <li class="oneline"><a href="Profnutty.htm" target=tepmain>PROFESSOR 
NUTTY</a></li>
      <li class="oneline"><a href="Summershows.htm" target=tepmain>SUMMER 
SHOWS</a></li>
      <li class="twolines"><a href="Christmas.htm" target=tepmain>THE MAGIC<br 
/>OF CHRISTMAS</a></li>
      <li class="oneline"><a href="Dates.htm" target=tepmain>SHOW DATES</a></li>
      <li class="oneline"><a href="About.htm" target=tepmain>ABOUT US</a></li>
      <li class="oneline"><a href="Contact.htm" target=tepmain>CONTACT 
DETAILS</a></li>
  </ul>
 </div>

</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/