[solved] How to remove line breaks in Vertical menu items

[cnymike]

I've searched for an answer to this in the forum and haven't been able to find an answer.

I've got an issue that I can't seem to solve with my vertical menu.

When a menu item has multiple words, each word breaks to a new line even though the width of the column is plenty wide enough to accommodate a multi-word menu item. If I replace the space between words with an underscore, then it all fits on a single line without breaking as you would expect but I do not want underscores between my menu item words.

I can not figure out why this is occurring. I'm sure of one thing though, this is probably so simple to remedy that I'm going to feel quite stupid when someone tells me now to fix the problem. So I'm ready... make me feel stupid, please.

Thanks.

Michael

[calguy1000]

Got a link?

[cnymike]

--deleted--

[calguy1000]

Uhm... adding this to the bottom of the stylesheet corrected it for me:

Code: Select all

div#menu_vert ul li ul li {
  width: 25em;
}

[Dr.CSS]

Actually the side bar, you could take it's call out altogether since the .left is around it and set at 300px...

div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 26%;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
}

[cnymike]

Calguy, I appreciate that. Can you explain what is causing this behavior though? I do not understand the mechanics of why the code you used fixes the problem.

Mark, are you suggesting that the cause of the word wrapping is because of a css conflict or some sort? I'm trying to learn how to build my own template using open-source templates and so I'm sure this is part of the problem.

[Dr.CSS]

Using Firefox with the Web Dev. toolbar I outlined the block elements and it showed the menu area being narrow so I edit the CSS and took out any call for sidebar and it went the full 300px...

[cnymike]

Oh, I see. I was using Firebug on Firefox to do essentially the same thing to view the CSS.

So this really boils down to a CSS conflict between the div#sidebar and  div#menu_vert, right?

[Dr.CSS]

Actually it starts with div class left, that is where you have the width established but the side bar is set to 26% which in most cases will take the size of the containing unit as 100% then be, in this case, 26% of it, the sidebar was originally sized as it was the outermost container since you wrapped it with another it no longer needs a size...

This is more of something that would go in the HTML & CSS part of the forum...