Horizontal CSS menu - Stretch?

[knorrhane]

Hi,

I am new to this forum and first off I want to thank you for a awesome cms-system! I just love it 
Unfortunantely i have run into some problems and I need your expertise.

The webpage i am creating is located here: http://www.nnpl.net/nnpl/

The CSS i located here: http://www.nnpl.net/nnpl/stylesheet.php?templateid=23

What I am trying to do i to make the horizontal menu stretch all the way to the end, on both left and right side, like the attached picture. I have tried a lot of things with the css but sadly I have not been able to crack this nut. I might add that I am a beginner when i comes to CSS.



All help is very appriciated!

[Dr.CSS]

The #wrap is holding it in, find these and replace...

#wrap{
width:779px

#content{
margin:10px 230px 0px 15px

#extras{
margin:0px 15px 0px 0px

[knorrhane]

That certainly did the trick, Thank you very much!
The only problem is in firefox where one pixel of the menu sticks out and if i change the width, ie shows a 1-pixel white space instead.

However another problem has appeared. I'd like the meny alternatives to be centered within the menu. Is this possible to accomplish? I suppose a center-tag i required somewhere but i do not know where. Any suggestions?

Thank you.

[Dr.CSS]

Not sure how this will work in IE but try this in your menu CSS... btw it said menu_vert and you are using menu_horiz

#menu_horiz{
  background-color: #ECECEC;
  border-bottom: 1px solid #C0C0C0;
  border-top: 1px solid #C0C0C0;
}


/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {margin:0px auto;
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */   
  width: 60%;
}

[knorrhane]

Yeah, I noticed that now 
It worked but not in ie so I added width to the following value to get the menu centered:

#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width:405px;
}

However this was not exactly what i had in mind but almost. My thought is to make each of the menualternatives centered and to fill out the entire grayish menurow. As it is now the menualternatives is just centered in the middle. Im sorry if i made this unclear in my previous post babbling on about center tags and such.

Once again thanks for your support, its great!

[Dr.CSS]

Take the width out of the #menuwrapper { and #primary-nav, #primary-nav ul {  and add this...

#primary-nav li {
  margin-left: 61px;  This is -1px now
  float: left;
}

[knorrhane]

Thank you!
Exactly like the privious change this works like a charm in ff but not i ie.

In ie the menu is way of to the right and i cant get it to align in the center like in ff. Any clue of what to add to make the menu move to the left in ie but not i ff?

[Dr.CSS]

If you need to feed IE something diff. than Ff you use the IE hack... use this under the same call eg,. if it is the #primary-nav have the IE hack for primary-nav under the other  (Ff) one...

* html body #primary-nav li { or whatever needs it
whatever style you need for IE
}

[knorrhane]

Thank you, it worked well  . I adjusted the menyboxes to have equal size and deleted the border. I know encountered a small almost non-existing problem, but still an anoying problem.

When I have both ff and ie maximized this problem is non-existing on my computer but when I restore the maximized window and change the width on it, I get a one-pixel border outside the menu on the right side. I dont know if theres anything to do about this but it annoys me. All help is appriciated 

[Dr.CSS]

Your #wrap, whole page surround, and #menuwrapper, menu surround, are 1px diff. in size, #wrap 779px #menuwrapper 780px

[knorrhane]

Yes, but when I have the same value on both ie 779px the menu breaks down on two separate lines. When this happened I tried to change the width value for the #primary-nav li a  to 135px and if you look at the page you see the result. A little glitch at the right when you mouseover LINKS or press it to get it active and the same problem occurs.

[Dr.CSS]

You will need to find all the calls that are messing up in IE and provide alternate styling for them if it works better to have 2 diff. sizes in IE but not Firefox have one for each using the  * html body hack for the IE styles...

[knorrhane]

Yeah, i tried that but the problem is firefox. I spend all day today trying to locate the tag that makes it click, have been trying to decrease the width to make sure nothing is pushing it out.

As i said it's only when you use the browser in some resolutions and sizes or if you click on the button named "ORGANIZATION" and the scrollbar appears to the right. I have no idead what to do and it nagging my brains out!