4 replies [Last post]
hirsp1
Offline
newbie
Last seen: 15 years 30 weeks ago
Timezone: GMT-5
Joined: 2004-03-26
Posts: 2
Points: 0

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>

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 27 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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 next sentence is true. The previous sentence is false. Discuss...

hirsp1
Offline
newbie
Last seen: 15 years 30 weeks ago
Timezone: GMT-5
Joined: 2004-03-26
Posts: 2
Points: 0

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...

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 27 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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 next sentence is true. The previous sentence is false. Discuss...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

The incredible shrinking graphics...

You are welcome to the code and styles from my buttons examples page.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS