SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link Width Not Working in Firefox & Netscape

    The width for my link works fine in IE6, but doesn't in Firefox and Netscape. I need the width set because my rollovers change the background color of the link.

    I did notice that setting the right padding of the link solved the issue, but I would have to have a seperate setting for each individual page, because each button is a different width. So that's not going to work.

    Are there any solutions?

    Here's my CSS:
    Code:
    #subRight ul { list-style-type: none; margin: 15px 0 0 11px; padding: 0;}
    #subRight li { margin: 0; padding: 0; }
    			
    #subTitle 	{
    	font: bold 15px arial, verdana, sans-serif;
    	color: #cc6600; text-decoration: none; }
    	
    #subTitle:link {
    	text-decoration: none;
    	padding: 4px 0 4px 5px; width: 189px; }
    	
    #subTitle:hover {
    	text-decoration: none;
    	padding: 4px 0 4px 5px; background-color: #fff; }
    					
    #subNavDivider { background: url(graphix/subNavDivider.gif) no-repeat; }
    					
    #subNav { font: bold 11px verdana, arial, sans-serif; color: #996600; }
    	
    #subNav:link {
    	text-decoration: none;
    	padding: 4px 0 4px 5px; width: 189px; }
    	
    #subNav:hover {
    	text-decoration: none;
    	padding: 4px 0 4px 5px; background-color: #fff; }
    Here's a sampel page. Check out the right navigation: http://www.expresiv.com/new/solutions/index.asp

    Thanks!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This may help with your problem above:
    Code:
    	#subNav   { font: bold 11px verdana, arial, sans-serif; color: #996600;display:block }
    However you have bigger problems if you want the page to be consistent in browsers other than IE.

    You have used the xml prologue which throws ie into quirks mode, which isn't a problem unless you set widths and padding at the same time. Which you have done.

    IE5/5.5. and ie6 in quirks mode use the broken box model where padding and borders are contained within the specified width of an element. All other browsers use the correct box model where padding and borders are added to the width therefore making a wider element.

    If you check your page in mozilla you will see that you have a horizontal scroll bar where you have set elements at 100% but also set padding at the same time. This makes the element too big for the page and a horizontal scrollbar appears. Other elements on the page will also be bigger thatn in ie for the same reasons.

    The answer is not to set padding and borders on the same element that you set the width but use an inner nested element (if there is one ) or insert one to use.

    Alternatively use one of the box model hacks to compensate for the difference. (just search for box model hack).

    This is an important concept if you want your design to work across different browsers. If you are just worried about IE then don't bother.

    Hope that helps

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •