On Tue, Aug 17, 2010 at 5:07 PM, Jakub <kuba.off...@gmail.com> wrote:
> Hello all! > > This is my first post here, be merciful please... > Anyway, I am trying to create a horizontal navbar, widely known from > "http://css.maxdesign.com.au/listamatic/horizontal03.htm"; all looks good, > except that when zooming in (Opera, Firefox, Safari, Chrome - those I've > checked) list items are dropping down. It doesn't happen in IE6, IE7 > though... Is there any way to prevent this happening? > <li> are display:inline, and <a> is floated as well as <ul> > Here is the link... http://www.jakub.zxq.net/ > I would greatly appreciate any help. > > Thank you all in advance > Jakub > The issue lies within the width:100%; This command says that the content will expand as far as the width of its container, then it will wrap. When a user zooms, since 100% in your case is the width of the viewport, The size of the viewport doesn't change, and all the content gets too big to fit in that 100%. This problem can be easily fixed. Since it's working fine in IE6/7, we can use the min-width property. #menu ul { list-style-type: none; float: left; min-width:700px; /* if the viewport gets smaller than 700px then the content won't wrap and it will create a bottom scrollbar. */ width: 100%; background-color: #036; } You may want to play with the actual number of pixels, this is just a rough draft. I've posted it at http://gumware.com/cssd/onyourfeet.html Hope this helps, Alex Mitchell In addition, you may want to change html, body { margin: 0; padding: 0; } to html, body, ul, li { margin: 0; padding: 0; } Because, right now you are getting a bottom scrollbar, caused by the padding/margin browsers set on an unordered list by default. If you reset them like this, it will get rid of the bottom scrollbar and you will be able to more effectively style your lists. ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
