Need some CSS help

Hey all,

My top nav menu on devbistro.com is a little bit of a mess right now (and the site does not validate because of that). I was wondering if any of you CSS gurus can help out fixing it. Please PM or post your ideas below ...and I'd love to compensate you for this help (tbd)

The revised menu will have 6 links at the top instead of 7 that are there now. Also, the last 3 links should have non-white background.

Currently the menu is best viewed in Firefox (the font in IE is a bit too big). Which brings another point: I'd like the menu to validate and look the same in both IE and Firefox

Best,
James

 

Your validation errors are easily fixed:

You have two <li>s with id="three". Change one to make them unique.

Secondly you need to remove the language="JavaScript" from your script tags and add type="text/javascript"

What exactly are you trying to do with the css? Or what do you think is wrong?

Mick

 

thanks Arnica,

I know about the id="three" problem and the fact that it's easy to fix. There are a few other problems besides that:

1) The link font looks bigger in IE than in FF
2) Sometimes the right border of the last link is not black (so it has an appearance as if no right border is defined). See devbistro.com/about.jsp for an example

Overall, I think the CSS for the menu can cleaner and needs a professional eye to take a look at it

 

Hi devbistro

Give the following a try - it should resolve the issues. I've changed all your sizes to ems which will allow the <li>s to expand gracefully if the visitor enlarges the font sizes.

The border trick leaves a gap at the right hand edge in IE6 but not that noticeable. You could use your original border-right:none and apply a right border through css to the last <li> if it bothers you greatly.

#menu {
 margin: 0 1px 0 0;  // 1px right margin negates the -1px trick below
 padding: 0;
 }
#menu ul {
 border: 0;
 margin: 0 ;
 padding: 0;
 float:right;
 list-style-type: none;
 text-align: center;
 clear: left;
 }
#menu ul li {
 display: block;
 float: left;
 border: 1px solid #ccc;
 padding: 0;
 line-height:1.8em;
 margin: 0 -1px 10px 0;  // -1px right margin collapses border
 }
#menu ul li a {
 background: transparent;
 width: 12.5em;
 margin: 0;
 padding: 0;
 color: #cc6600;
 text-decoration: none;
 display: block;
 font-weight: normal;
 letter-spacing: 0.1em;
 font-size: 0.8em;      
 }
#menu ul li a:hover {
 color: #000;
 background: #ccc;
 }

Code (css):

Where you want to give the menu items a different colour (either because they are selected or part of a different subset) create a separate class with the following css.

#menu ul li.alternatecolour {
 background:#c60;               // change your menu item background here
 }
#menu ul li.alternatecolour a {
 color:#fff;        // change your text colour here
 }
 

Code (css):

That will avoid having to use your <li> id attributes to mark your active page as it appeared you were trying to do from the css.

Have fun

Regards

Mick

 

Arnica,

Thanks a lot! It works perfectly

Best,
James