Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design by Richard York; ISBN: 9780764576423
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old June 28th, 2006, 04:12 PM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Default ie vs. firefox menu/hover/width problems

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>
  #2 (permalink)  
Old June 29th, 2006, 07:03 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
  #3 (permalink)  
Old June 29th, 2006, 08:02 AM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Thank you! Right you are...

 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Label width in firefox swifty_programmer ASP.NET 2.0 Basics 2 August 27th, 2007 09:28 AM
Firefox - iframe and asp:menu rturner003 ASP.NET 2.0 Professional 0 January 20th, 2007 04:59 AM
problems with getting Front Page 98’s hover button melon Access 0 July 6th, 2006 02:38 AM
a:hover problems Stevie CSS Cascading Style Sheets 4 May 8th, 2005 04:30 PM



All times are GMT -4. The time now is 03:20 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.