please use a tool such as Firefox’ add-on Firebug for this kind of formatting problem.
http://getfirebug.com/
uh thanks. i know how to use firebug and use chrome’s inspector with better luck. i promise you i have tried. perhaps i should have stated that in my first post. there’s nothing that gives me any indication where the width of these navi items are set and how to control it with a fixed width.
Emily,
Can you provide us with a link to the live site so we can help?
Emily,
1. zero out the margins on #access div #access ul
2. You can then set the fixed width on #access li
i added #access div #access ul {margin: 0 0 0 0;} but i don’t think that changed anything.
if i make #access li anything wider than 299 the nav wraps? the image cells are 333 each and i’d like them to line up as best as possible.
*sigh* i wish it had been those things. something else is affecting it. can one somehow make the div not wrap?
While the image cells might start out at 333px each, they exapnd and/or contract based on the size of the browser. To get your menu items to do the same, I would suggest changing the width of #access li to 33% instead of a fixed width.
i had tried that too. i get basically the same results and it mucks with my second level dropdowns. (it’s 33% now where it was 299px) in #access li.
🙁
What browser are you using, and what screen width does it wrap at? I can get it down to about 835px before it wraps. Even then, only the arrows are wrapping for me, not an entire menu item. To keep those style from mucking with your second level drop-downs, use child selectors so this:
#access li
becomes this:
#access div > ul > li
hi … i use primarily chrome (v17.0.963.46). it wraps the arrows for me around 833, which isn’t a show-stopper. i’m happy to report firefox and safari all look/act the same. i’m on a mac 10.6.8.
i need to learn more about how to define/decipher child selectors. i once read a tip somewhere that said you could copy this info out of firefox or the chrome inspector. i never figured out how though.
i still can’t seem to figure out how to eliminate the left margin on the toolbar, forcing it to 100% and making the edges of the boxes line up at 333 intervals. (this IS the show stopper)
thanks for the ideas, folks. keep them coming and i’ll keep trying!
I haven’t tried to copy child selecter info out of the browser, but here’s how the work. Take this menu as an example:
<ul id="parent-menu">
<li><a>Menu Item #1</a>
<ul id="child-menu">
<li><a>Submenu Item #1</a></li>
<li><a>Submenu Item #2</a></li>
</ul>
<li><a>Menu Item #2</a></li>
</ul>
Your standard CSS without any selectors would look like this:
#parent-menu li{ width: 33%; }
The problem is, that applies equally to the list items in the parent menu and the list items in the submenu. The “>” selector means “direct descendant.” It will apply to child elements, but not grandchild elements. For example:
#parent-menu > li{ width: 33%; }
This will not apply to submenu list elements, because they are’t direct descendants of the parent menu (there are other elements in between). I hope that helps a little.
Now, to keep the arrows from wrapping, add the following property just below the width: 33%; we discussed earlier:
white-space: nowrap;
