Alex!
Thank you very much for your time and help.
Much appreciated.
Jakub
----- Original Message -----
From: Alex Mitchell
To: Jakub
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, August 18, 2010 6:27 PM
Subject: Re: [css-d] Horizontal navbar problem
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/
