Hello everyone,

I can't figure out why the sub-sub-menus under my Page Menu Bar have this ugly extra line coming off the top right corner:

http://001e7b6.netsolhost.com/wordpress/

Problem appears in Page Menu Bar under
Programs-->ArtGate and
Programs-->Community Performance

I've checked it with Firebug, but can't tell what's up. Nothing in Atahualpa seems to apply only to sub-sub-menus rather than simply sub-menus, which look fine.

Thanks so much for any help. We're a small non-profit teaching at-risk kids, so we can't afford to hire someone who knows more. (I volunteer).

--jeff

Try going to ATO>Page Menu Bar>Width of Sub Menus and make your sub menus wider and see what happens. I'm thinking it has something to do with word wrapping.

Thanks for your response, Larry.

I've already tried changing that to a number of different values, and the problem persists. That field, Page Menu Bar-->Width of Sub Menus is the only variable I can affect.

Any other ideas? It seems to be some kind of glitch.

So when you make the sub menu wider is the little bar that sticks out the same size or smaller?

Good idea! The little thing is the same size, regardless of the width of the sub-menus.

So what does that tell us?

I'm not sure what it tells us. I'm just trying to get a feel for what is going on. It's always more difficult when you can't see the backend directly. Have you added any CSS inserts or changed the CSS anywhere?

Yes. Here's everything I've done, below.

Thanks again for your efforts to help!

/* ================================================ */
/* below = CSS for artist and staff bios */
/* ================================================ */


.name {
font-size: 20px;
}

/* ================================================ */
/* below = CSS to fix events page */
/* ================================================ */



.event_list {
line-height: 14pt; font-size: 12px;
}

.event p {
}

.event_list ul {
margin: 0px 0px 0px 0px;
}


.event_date {
line-height: 14pt; font-size: 12px;
}

.event_title {
margin-left: 25px;
line-height: 14pt; font-size: 12px;
font-weight: bold;
}

.event_description {
margin-left: 25px;
line-height: 14pt; font-size: 12px;
}

.event_location {
margin-left: 25px;
line-height: 14pt; font-size: 12px;
}



/* ================================================ */
/* above = CSS to fix events page */
/* ================================================ */

#webOuter {
background:url("http://001e7b6.netsolhost.com/wordpress/wp-content/uploads/2010/03/grayBGblackbar.gif") repeat-x scroll center top #71726E;
float:left;
height:100%;
margin:0;
min-height:100%;
padding:0;
width:100%;
}


#webHeader {
background:url("../images/headerBg.gif") repeat-x scroll center top #EDF0D5;
float:left;
height:237px;
margin:0;
padding:0;
width:756px;
}


img.centeredpic
{
display: block;
margin-left: auto;
margin-right: auto;
padding:5px;
}

.center
{
margin:auto;
padding:10px;
text-align:center;
}

div.pics
{
margin:1px;
}


#imgfloat
{
float:left;
padding:0px;
}


ul.rMenu li {
margin-right: 30px;
}

.post img {
-moz-border-radius:3px 3px 3px 3px;
border:1px solid #000000;
padding:0px;
float:center;
}

div#menu1 ul#rmenu2 li a {
font-weight: bold !important;
}


/* ================================================ */
/* CSS to remove lines around menu background */
/* ================================================ */
div#menu1 {
border: none 0px;
padding-left: 0px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

This is truly bizarre. It looks like you know your way around CSS. Is it a border issue, or padding? I don't know. If you strip all the CSS out temporarily does it go away?

it's caused by the

ul.rMenu li {
margin-right:30px
}

Note: you have a bunch of CSS duplicated in the CSS Inserts, you should consoladate/eliminate some

Gaa! I just took a bunch of time to isolate which css bit was the problem before I saw that you'd already told me here. How could you tell that was causing it? (And why didn't I get an email that you'd replied to my post, juggledad?)

Anyway, now we know what's causing the problem. The thing is, without this:

ul.rMenu li {
margin-right: 30px;
}

The page menu at the top is kinda cramped. Is there a way I can get that more spread out look without the accompanying messed up extra line in the sub-sub-menus?

Thank you both so much for your help: This site is boss!

--jeff

PS: I had also just deleted all my duplicate css before I saw your post. Sigh.

Here is what you need

ul.rMenu li {
margin-right:30px
}
ul.rMenu li ul li {
margin-right:0px
}

this sets the margin at the top lever, then resets it for the lower levels.

As for how I figured it out. I viewed your page, then viewed the source, copied it to a text file and saved it as xxxx.html - I then opened this in a browser and ripped out code till I issolated the issue. I just rip some out, save it, do a refresh in the browser.

Hey JD... what about using the following? That doesn't seem to show the weirdness.

ul.rMenu li {
padding-right:30px !important
}

Larry,
that won't work because it will still apply to the sub menu's. When you use a selector like

ul.rMenu li {
padding-right:30px
}

or

ul.rMenu li {
padding-right:30px !important
}

it will effect all 'li's that are under the <ul class="rMenu"> so if you have this

<ul class="rMenu">
  <li>one</li>
  <li>two</li> 
  <li>three</li>
    <ul>
      <li>red</li>
      <li>blue</li> 
    </ul>
  <li>four</li>
</ul>

red and blue will also be effected. by adding the second CSS selector/rule

ul.rMenu li ul li {
margin-right:0px
}

we can override the styling for these child elements.

Wow. That did it, juggledad. You are the master.

Trial and error with each piece of code was how I isolated the problem, too, but I assumed you had a faster method, since that was a bit tedious! Thank so much for all the work, and the little css lesson about child elements in the ul and li tags.

And thanks to you, too, lmilesw, for getting me started on the right track.

I've got a new problem with uploaded images that aren't visible, but I'll repost so the site can archive it.

--jeff