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/
