Forum Moderators: not2easy
Any suggestions?
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script language="javascript" src='js.cgi?pca&r=10466'></script>
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: #7B103A;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
font: 13px center;
letter-spacing: -1.5px;
}
dl, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
dt {
margin: 0;
padding: 2;
list-style-type: none;
line-height: normal;
line-width: 65px;
position: relative;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 2px;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
margin:0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 0px;
margin: 0px;
width:65px;
height:48px;
background: url(mainnavbutton_off.jpg) no-repeat;
}
#menu dt a:hover {
background: url(mainnavbutton_on.jpg) no-repeat;
}
#menu dt a:active {
background: url(mainnavbutton_on.jpg) no-repeat;
}
#menu dd {
border: 1px solid gray;
position: absolute;
font-weight: bold;
}
#menu li {
text-align: left;
background: #d6d9bd;
width: 170px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:focus {
background: #eee;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onclick="javascript :show();"><a href="home.html">Home</a></dt>
</dl>
<dl>
<dt onclick="javascript :show('smenu2');"><a href="#">About FH&H</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Range of Services</a></li>
<li><a href="#">Transactional Expertise</a></li>
<li><a href="#">Sensitivity to Client Concerns</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onclick="javascript :show('smenu3');"><a href="#">Practice Areas</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Broadcasting</a></li>
<li><a href="#">Telephony</a></li>
<li><a href="#">New Comm Technology</a></li>
<li><a href="#">Public Safety Communications</a></li>
<li><a href="#">Int'l Telecommunications</a></li>
<li><a href="#">Cable Television</a></li>
<li><a href="#">Science & New Technology</a></li>
<li><a href="#">Internet Law</a></li>
<li><a href="#">Business and Personal Legal Services</a></li>
<li><a href="#">Trade Associations</a></li>
<li><a href="#">Satellite Services</a></li>
<li><a href="#">Mobile Communications</a></li>
<li><a href="#">Fixed Wireless Communications</a></li>
<li><a href="#">Indian Communications Initiative</a></li>
<li><a href="#">Additional Services</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onclick="javascript :show('smenu4');"><a href="#">Articles& Resources</a>
</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Memoranda to Clients</a></li>
<li><a href="#">FHH Telecom Law</a></li>
<li><a href="#">Communication Links</a></li>
<li><a href="#">EAS Resources</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onclick="javascript :show('smenu5');"><a href="#">Attorney Bios</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#">A Person</a></li>
<li><a href="#">B Person</a></li>
<li><a href="#">C Person</a></li>
<li><a href="#">D Person</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onclick="javascript :show('smenu6');"><a href="#">FH&H<br>Careers</a></dt>
<dd id="smenu6">
<ul>
<li><a href="#">Administration</a></li>
<li><a href="#">Law</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onclick="javascript :show();"><a href="#">Contact<br>Us</a></dt>
</dl>
</div>
</body>
</html>
<script language="javascript">postamble();</script>
[edited by: SuzyUK at 11:24 am (utc) on April 19, 2006]
[edit reason] examplified [/edit]
If you set your line height and height to be the same, then the text will automatically vertically center itself. For example:
#menu li a {
line-height:2em;
height:2em;
font-size:0.9em;
}
BAM! Your text is vertically centered.
An alternate route is to adjust your padding to center each one as you see fit.
I applied it to the #menu dt as it's the main menu text and not the sub menu text (li) that I need to vertically center. It's not giving me the effect I want in IE though which is to have the two lines of text together and centered vertically. Also with the two menu items that are single lines the background image is cut off right under the text. I'm sure there must be an easy fix for this but as a CSS newbie it's not obvious to me. And in Netscape & Firefox the font displays as serif and the button background image is completely cut off. How do I correct this?
See:
<snip>
Browser Compatibility is going to be the death of me.
Any suggestions on a reference guide to the differences?
Adjusting the padding could work but I'd have to do it separately for the single line text versus the two line text menu buttons.
Another solution is to replace the text with precentered images (same size as the background). This works but I loose the advantage of being able to simply update the main menu by editing the text.
See:
<snip>
[edited by: trillianjedi at 3:23 pm (utc) on April 20, 2006]
[edit reason] Please see TOS #13... .thanks [/edit]
