Hello everyone,
I'm working on a blog and have made a HORIZONTAL MENU in which I've put some categories.
The width of all the content is 900px.
The items I put in the menu are EXACTLY 900 pixels, one more letter or digit and it would create an extra row. And there is the problem. Even though it looks great in all browers, it DOES create an extra row when checking the site on my mobile phone (BlackBerry 9900).
How do I fix this so it will ALWAYS fit on one LINE and if needed shrink within the row instead of creating a new row?
All help and suggestions are very much appreciated!
<br />
.nav-main{<br />
z-index: 10;<br />
min-width: 100%; */ THIS DOESN'T SEEM TO WORK */<br />
}<br />
.nav-main ul{<br />
background: #c9c9c9;<br />
border: 6px solid #888888;<br />
margin: 0 0 -10px;<br />
}<br />
.nav-main li{<br />
background: #c9c9c9;<br />
border-left: 2px solid #888888;<br />
}</p>
<p>.nav-main a{<br />
color:#888888;<br />
letter-spacing: 0.05em;<br />
font-size: 115%;<br />
webkit-text-size-adjust:none; */ THIS DOESN'T SEEM TO WORK EITHER */<br />
padding:5px 15px 7px;<br />
text-transform: uppercase;<br />
font-weight: normal;<br />
}<br />