Menu not looking good

HTML & CSS
1

I am having some problems with the navigation menu here http://tinyurl.com/34p8gzn, basically I just upgraded wordpress to version 3 and it ruined the menu somehow, any help on what is wrong?

2

I would like them to have some padding on each side and text be centered width and height in each button.

3

thanks!

4

[Highlight=‘CSS’]
.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 15px;
float: left;
text-transform: uppercase;
font-family: “Helvetica Neue”,helvetica,“microsoft sans serif”,arial,sans-serif;
font-size: 90%;
color: #FFFFFF;
text-decoration: none;
}


Try taking out the padding here
5

Hi,

When you are hovering you are adding 1px bottom border which increases the height of the element and causes Content to move because its floated.

Remove the border, set the line-height and clear the float.


.bubplastic.horizontal ul li a {
    line-height:27px;
}
.bubplastic.horizontal ul li a:hover {border:none}

#content{
clear:both;
}
6

Sorry, but asking people to help with a page that has five stylesheets attached to it isn’t helpful. There’s rarely any need for more than one stylesheet, two at the most. Five means we could end up changing something in one that knocks out something elsewhere, or missing something elsewhere…

One suggestion from a code point of view is to get rid of about 95% of your classes.
Most of those could be either combined or replaced by descendent selectors (in other words, if every <li> in <div class=“menu”> has the same class, you don’t need that class - just address it by div.menu li {...}).

I’m also highly intrigued by the construction
<li><span class="sliding-doors"><a ...><span class="sliding-doors">Text</span></a></span></li>
It isn’t technically speaking wrong, but it is so messy and confused that I wouldn’t be surprised if that is part of the problem. (And again, all instances of class="sliding-doors" are redundant).

And a final tip, nothing to do with the design but just a bit of general good practice - don’t have title text on a link if all it does is repeat the visible link text. That means that people with screen readers often hear it twice. If it doesn’t add anything extra, there’s no need for it.

7

also when you hover on one of the menu items the content in the page moves which shouldnt be so

8

oh sorry! need to disable maintenance mode, check again in a minute

9

ok you should see it

10

I totally agree. It took nearly 5 minutes to find the CSS rule…

11

Did you try clicking on the link? It shows a ‘Site is currently undergoing updates’ page.
Maybe cleaning your cache, or login out of the site?

12

Um … there isn’t a navigation menu …

13

the menu just beneath the header image