In IE and Opera, the navigation buttons display correctly. In Firebird, they do not...they shrink to the width of the text. Any suggestions how to fix it?
The CSS (from the file) and HTML are included:
Here's the CSS:
#mainMenu {
position: absolute;
text-align: left;
width: 600px;
border: 0px none;
color: #000000;
margin: 0px;
padding: 2px;
top: 86px;
left: 145px;
z-index: 10;
}
#menuList {
margin: 0px;
padding: 0px;
border: 0px none;
display: inline;
color: #000000;
}
#menuList ul {
margin: 0px;
padding: 0px;
color: #000000;
}
#menuList li {
display:inline;
list-style: none;
text-decoration: none;
color: #000000;
}
a.starter {
color: #000000;
font-weight: normal;
font-size: 12px;
margin: 0px;
padding: 0px;
text-decoration: none;
background-image: url(../images/Button_clr.png);
text-align: center;
width: 70px;
height: 20px;
vertical-align: middle;
line-height: 18px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
a.starter:visited {
color: #000000;
font-weight: normal;
font-size: 12px;
margin: 0px;
padding: 0px;
text-decoration: none;
background-image: url(../images/Button_clr.png);
text-align: center;
width: 70px;
height: 20px;
vertical-align: middle;
line-height: 18px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
a.starter:hover, a.starter:active {
color: #000000;
background-image: url(../images/Button_Pushed.png);
text-align: center;
text-align: center;
width: 70px;
height: 20px;
vertical-align: middle;
line-height: 18px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
.menu {
text-align: left;
color: #000000;
position: absolute;
width: 140px;
visibility: hidden;
font-size: 12px;
border: none;
height: 20px;
padding: 0px 0px 0px 5px;
vertical-align: middle;
}
.menu li a {
color: #000000;
display: block;
font-size: 12px;
line-height: 18px;
margin: 0px;
padding: 0px 0px 0px 5px;
text-decoration: none;
background-image: url(../images/Button_Menu.png);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 18px;
width: 140px;
vertical-align: middle;
}
.menu li a:hover, .menu li a:active, .menu li a:visited {
color: #000000;
background-image: url(../images/Button_Menu_Hover.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 5px;
height: 18px;
width: 140px;
vertical-align: middle;
}
#menu1, #menu2, #menu3, #menu4, #menu5 {
width: 140px;
z-index:100;
height: 18px;
vertical-align: middle;
padding-left: 4px;
}
HTML:
<div id="mainMenu">
<ul id="menuList">
<li>
<a href="default.htm" class="starter" accesskey="1">Home</a>
</li>
<li>
<a href="products.htm" class="starter"
accesskey="2">Products</a>
</li>
<li >
<a href="aboutus.htm" class="starter" accesskey="3">About
Us</a>
</li>
<li class="menubar">
<a href="company.htm" class="starter" accesskey="4">Company</a>
<ul id="menu4" class="menu">
<li><a href="mission.htm" title="Mission">Mission</a></li>
<li><a href="management.htm" title="Management Team">Management
Team</a></li>
<li><a href="careers.htm" title="Career Opportunities">Career
Opportunities</a></li>
</ul>
</li>
<li class="menubar">
<a href="news.htm" class="starter" accesskey="5">News</a>
<ul id="menu5" class="menu">
<li><a href="pressreleases.htm" title="Press Releases">Press
Releases</a></li>
<li><a href="events.htm" title="Events">Events</a></li>
</ul>
</li>
<li class="menubar">
<a href="contactus.htm" class="starter" accesskey="6">Contact
Us</a>
</li>
<li class="menubar">
<a href="clients.htm" class="starter" accesskey="7">Clients</a>
</li>
</ul>
</div>
The incredible shrinking graphics...
Try adding the declaration:
display: block;
... to your a.starter CSS rule. This'll turn the a element into a block-level element (rather than a default inline element).
The incredible shrinking graphics...
The display: block; works...sort-of-but-not-really.
It makes the graphics the correct size, but draws them vertically. The menu line is horizontal...
The incredible shrinking graphics...
Then, if the links are formed from an unordered list, you'll need to float the list elements. In other words, add float: left, to the CSS for the <li> tags.
The incredible shrinking graphics...
You are welcome to the code and styles from my buttons examples page.
DE