Page 1 of 1
[solved] How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 4:19 pm
by 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
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 4:20 pm
by calguy1000
Got a link?
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 4:23 pm
by cnymike
--deleted--
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 4:32 pm
by 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;
}
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 4:34 pm
by 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;
}
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 4:38 pm
by 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.
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 5:06 pm
by 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...
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 5:13 pm
by 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?
Re: How to remove line breaks in Vertical menu items
Posted: Thu Jan 10, 2008 5:19 pm
by 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...