Christy Collins wrote:
The header of a site I am working on has buttons that are supposed to
rest on top of a brown line. The positioning of these buttons is a
little different on almost every browser I check on.
http://www.berkshireradio.org/WBCRwww/header_test/
Christy,
- Fx vs. Opera8
your browsercam shots don't show Opera images, it places the nav above
the 6px brown border. Opera8 has other defaults than Fx.
body {... padding:0;}
form {padding: 0; margin:0;}
- FX vs. IE6
The list looses it first padding left
see
http://www.quirksmode.org/bugreports/archives/2005/07/Wrapped_inlinenowrap_elements_lose_padding_left_in.html
Flaw workarounds are to
* omit the white-space: nowrap (this will result in a wrap like in
IE5.0/Win, you will find the reason why it wraps at all) ***
* or to give the li "layout" via zoom:1; but now it behaves more like
display: inline-block
Either way, you'll have to rearrange the items.
*** your css
#header_wrap { margin: auto; width: 800px; position: relative; }
#navcontainer { text-align: left; position: absolute; top: 43px; left:
360px;}
allows #navcontainer to have a intrinsic width of 800px-360px=440px
before a wrapping will occur, as you didn't have specified a width on
that a.p. element, and it's children buttons are inline. But when I declare
#navcontainer { width: 440px}, the buttons wrap, due to the problem that
your buttons are wider. width: 450px seems to be more stable in IE6.
I don't know if using floats would be easier to fix in this horizontal
navigation, since you have listed IE5.0-6/Win. The inline model is
equally broken like the floats model.
- Fx vs. your design
When you text-zoom via cntr+ (win), the navigation moves over the border.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
