[css-d] dropdown and spacing problems

2006-02-13 Thread Matt Tibbits 
Hello,

 

I am just starting out with CSS dropdowns using the Sons of Suckerfish
method. The problem I am having is with spacing of the first level elements.
This only seems to happen in Firefox. IE6 keeps the elements spaced
properly. 

 

If I place a right and left border, and then add some padding the right
border of the first element gets pushed the width of the padding past the
left border of the second element.

 

You can see what's happening here: http://www.tibbits.ca/test.htm

 

The left border is blue, and the right border is green. 

 

If anyone could point me in the right direction is would be much
appreciated. 

 

Thanks,

 

Matt

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] dropdown and spacing problems

2006-02-13 Thread Roger Roelofs 
Matt,

On Feb 13, 2006, at 12:19 PM, Matt Tibbits wrote:

 This only seems to happen in Firefox. IE6 keeps the elements spaced
 properly.

 If I place a right and left border, and then add some padding the  
 right
 border of the first element gets pushed the width of the padding  
 past the
 left border of the second element.

 You can see what's happening here: http://www.tibbits.ca/test.htm
In the w3 box model, the width is the _content_ width.  To calculate  
the width from outer edge to outer edge you have to add the border  
width + padding width + content width.  IE/win 6 in quirks mode and  
all previous ies get this wrong.  In your case you can remove the  
width from #nav a and it will fill all the available width.  You will  
also want to remove widths (set to width: auto) the sub-menu li.


Roger,
-- 
Roger Roelofs
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/