Hi,

I have made some menus that looks like they work fine in IE, but they don't have the correct width in firefox. In firefox they vary to the length of the words. What did I do wrong, please?

Page is here:
http://www.griffin-realtors.com/admin/agent_listing.php


CSS is as follows:
--------

p {
    font-size:12px;
    margin:5px;
}
.adminmenu a {
    color:white;
    text-decoration:none;
    padding:3px;
    background-color:black;
    border:1px solid red;
    width:140px;

}


.adminmenu a:hover {
    background-color:red;
}
-------

HTML is like this:


      <p class="adminmenu"><a href="property_listing.php">Property Listing</a></p>
      <p class="adminmenu"><a href="../www/admin/property_add.php">Add Property</a></p>
      <p class="adminmenu"><a href="property_edit.php">Edit Property</a></p>

You applied width to the links with the .adminmenu a rule, which doesn't work because <a> elements are inline elements by default. Inline elements treat box model properties quite a bit differently from block elements, and one of the biggest differences is width and height properties don't apply to inline elements.

IE, of course, is going against the grain here where the standard is conserned, whereas Firefox and other browsers are following the standard to the letter. Luckily, it's pretty easy to fix, just add display: block; to your .adminmenu a rule for <a> elements, and that will change the <a> element from an inline to a block element, at which point Firefox, Safari, Opera, etc, will allow you to apply width or height.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Thank you! Right you are...