CSS issue with position of menu buttons

HTML & CSS
1

Hello,

On my website http://kathy.syso.ca/, I am having issues with the buttons on my navigation bar.

In IE they display fine, however if you look in FireFox, the buttons are right up against the margin. I tried changing the float position in my stylesheets, but nothing works.

I have attached my stylesheets and I have marked the area that is giving me the issue with “navigation…”.

I have spent the last few hours pulling my hair out and just can’t figure out what I’ve done wrong.

Any help would most definetly be appreciated.

2

What version of IE do you use? I tried it in 7, and I got the same problem: the navigation just goes straight over to the edge. I tried 6, and the navigation didn’t show up at all.

Also, I haven’t looked at it too much, but this is a problem:


<ul id="nav">
    <li id="nav"><a href="">Home</a></li>
    <li id="nav"><a href="">Button 2</a></li>
    <li id="nav"><a href="">Button 3</a></li>
    <li id="nav"><a href="">Button 4</a></li>
</ul>

An id can should only be used on one element in the page. Here, you’re using the id “nav” five different times. It might not be the problem, but it’s certainly not helping.

3

…And I may have the solution to the problem. Your page structure looks like this:


<div class="header-container">
    <div class="header"></div>
    <div class="menu-header"></div>
</div>

You applied a width of 960px and a margin of “0 auto” to the “header” div, but not to the “header-container” div. That means that header will be 960px wide and centered, which is good.

But the navigation isn’t inside the “header” div – it’s inside “header-container.” And because you didn’t give “header-container” an explicit width, it stretches to fit the entire window. Just add this to the CSS and you should be okay:


.header-container {
    width:960px;
    margin:0 auto;
}
4

No comment on the layout problems, but whilst in development and having published a link, consider changing

<meta content=“INDEX,FOLLOW” name=“robots”>

to

<meta content=“NOINDEX,NOFOLLOW” name=“robots”>

You don’t want Google et al thinking “we’ve seen this content before” when the site goes live.

5

There’s a lot of strange things going on in your markup (class myCart span with a 0 and so on and so on). This in adjustment to what sdleihssirhc already mentioned. I think you should pull the entire header apart and start from the beginning