March 15, 201016 yr Hi, Creating a web site for my course and I've designed a simple horizontal menu but it's behaving strangely. The items on the menu get smaller as they go along. I didn't know it was even possible to do this Any help would be most appreciated. CSS /* Menu */ #menu { width: 70%; height: 3%; background: url(images/img03.jpg) no-repeat left top; margin: 0 auto; padding: 0; } #menu ul { margin: 0; padding: 0% 0 0 0%; list-style: none; } #menu li { float: left; } #menu a { display: block; margin-right: 0.5%; padding: 1% 1.75% 1% 1%; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 130%; font-weight:bold; color: #FFFFFF; border: none; } #menu a:hover, #menu .current_page_item a { } #menu a:hover { background: #660000; text-decoration: none; } #menu .first { margin-right: 1%; background: #660000; } HTML <div id="menu"> <ul> <li class="first"><a href="pb7373hp.html">Home</a></li> <li><a href="pb7373cp.html">Our Products</a></li> <li><a href="underconstruction.html">Our Promise</a></li> <li><a href="underconstruction2.html">All About Us</a></li> <li><a href="pb7373co.html">Contact Us</a></li> <li><a href="pb7373sp.html">Feedback</a></li> </ul> </div> <!-- end #menu -->
March 15, 201016 yr I've tested your code and I don't see the menu items getting smaller in either IE7 or Firefox. but you have the #menu {width: 70%;} which means the menu items don't fit in a small window and some go to the line below because the font-size doesn't reduce so the width of each menu item stays much the same apart from a slight change in the % padding. I added this doctype at the top before the <html> tag:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Font-size: 130%; doesn't relate to the window width, it is a % of the viewer's default font size which is usually 16px.
March 15, 201016 yr Author Thanks Wickham, I thought menu width would make it 70% of the screen. Here's a pic of the menu problem. I'm using IE7 (resolution 1280 by 1024)
March 15, 201016 yr The 70% does make the whole menu div 70% of the screen/window width, but in a small screen resolution the font-size stays the same so the width of each menu button stays much the same and several of them haven't got enough room in a smaller 70% and go to a lower row which looks bad.
March 16, 201016 yr Here's a pic of the menu problem. I assume the problem you refer to is that each menu item appears a few pixels higher than the previous item? Looking at your CSS, I would try replacing the padding on the #menu a with pixel units instead of percentages. If that doesn't work, take a look at the page in Firefox and use the Firebug addon to explore the markup. That might give you some clues about where you've gone wrong. Otherwise, if you post the page online we could take a look. It's kind of hard to tell from a screenshot. Like Wickham I created a new HTML document with just the CSS/HTMl your provided, and couldn't see the problem you describe.
March 19, 201016 yr Author Hi everyone, Thanks for your help... I'm sorry it's taken me a while to get back to this. I decided to change the page design to 800x600 rather than fluid. Losing all the percentages worked and the site looks more professional.
Create an account or sign in to comment