MS#8 - "ticklish" menu

Odd can't see an apparent reason for the loss of focus and it's unusual that the sublinks loose it in this manner when it's normally the top link activating the hover dropdown that causes the problem, and in this case appears to be fine. check for stray margins upsetting things, remove - for testing anything of that type that could cause a problem until you can get back to a working version, and perhaps for IE's sake add a top offset declaration in case it's being temperamental.

The only problem I can see with borders is on the left where there appears to be a double border caused by the 'secret-background.gif' but I'm not sure why that is there in the first place?

Hmmm...I haven't got back to the menu yet but will need to know what this translates as "top offset declaration" in order to do it anyway

see http://csscreator.com/node/32620 where Triumph gave me the "secret background" because I have the occasional page which will have the cream background on content at half-mast. See this page - although I'm coming to the conclusion it would be better without the quote at bottom left and then it probably wouldn't be such a problem.

Give me half a mo' and I'll load up a change I did to the css which now has no border at the top. Do I need to take the left border off the secret bg?

okay - reloaded.

With the secret-background you have a problem of the floated sidebar encroaching on the image hiding the border, add a left margin 2px to push the sidebar away from the edge or perhaps better remove the sidebar background to allow the parent to show through.

'Offsets' are simply the positioning co-ordinates one uses with position relative or absolute, i.e top:0; or left:20px, bottom:0; etc.

Ta-da! Background off the sidebar did it! However to illustrate it above for you, I adjusted the borders on #wrapinner to top, right and bottom (no left), is this correct?

Yes, ummm "offsets - one of those situations where the words strung together didn't make sense to me. I know, there are times when I'm a complete dufus. :blushing:

While we're here - I would like the "back to top" button to be in the bottom right corner of the cream content. Do I have to use pos:abs to do this or is there another way? If I use pos:abs do I always have to measure - 'scuse me - offset from the top and left? I tried it right and bottom and it didn't work.

erm probably, depends what the image carries? if just the left edge border then that should be fine

bottom/right should work :? you should offset in pairs, bottom:0;right:0; will place it to extreme bottom right hand corner of a relatively positioned parent, show us this NOT working in the layout.

Yes - secret bg is border, sidebar colour, content colour - so I'll leave it as is.

I want a little bit of "air" around the button so first I tried bottom:1em; and it didn't like it now I've got 30px and it still doesn't like it.

To save you looking up the css here's what I've got:

.to-top {
position: absolute;
bottom: 30px;
right: 30px;
width: 64px;
height: 14px;
display: block;
}

offsets are pos:abs offsets are relative to their parent, but that parent must be pos:relative pos:abs will look to all parents until it finds one which is positioned, if none then body defaults to top level parent.

You will need to add pos:rel to wrapinner? and then pull the absolute up by the footer height and a little bit, if that is no good try setting that link in the footer and use negative top value to pull the link out of the footer.

That worked a treat I put pos:rel on wrapinner and then increased the bottom: to 120px.

#wrapinner {
  clear: both;
  position: relative;
  background: #FDEEB3 url("msimages/secret-background.gif");
  background-repeat: repeat-y;
  margin: 0 auto;
  min-width: 780px;
  max-width: 1024px;
  border-top: #DA9017 solid 2px;
  border-right: #DA9017 solid 2px;
  border-bottom: #DA9017 solid 2px; 
  overflow: hidden;
}
 
.to-top {
position: absolute;
bottom: 120px;
right: 30px;
width: 64px;
height: 14px;
display: block;
}

Howsumever - nav drop downs have now gone behind wrapinner I put zoom:1; on navholder but it doesn't make any difference.

You can see it here

Problem is that as much as one has to put pos:rel on the #wrapinner that does create a new stacking context for that element, you would need to add pos:rel to #navholder to create a new stacking context for that element then assign it a high z-index to ensure it sat higher than #wrapinner, so: position:relative;z-index:100; should do the trick, but check this in IE as it can make a mess of stacking contexts especially where position absolute is concerned.

'morning!

eeer...no that didn't work. FF@ still can't see the DDs and IE6 has spread the space above and below the nav (and the nav) for yaaarrrds. It looks like there is only the banner till you scroll down - and keep scrolling.

:? it does work

if really a problem then follow the other advice to put that link in the footer (in terms of page flow perhaps a more correct position for it) and move it up by using a negative top value

Then I'm going barmy 'cos I've just reloaded the css to the server again and force refreshed FF2 and IE6 and mine is as I described :shrug:

Sorry Hugo but what am I giving a negative top - I don't understand what it should be bottom:-200px; or top:-200px; or what?

If going that route then the element is first in the footer flow? then it would need a negative top value i.e top:-10xp;right:0;

position:relative on the footer! position:absolute on the .to-top! top:-25px;right:5px - I'm watching

Go to work and stop laughing! You've done your good deed for the day - when you come home I'll probably have another menu problem for you to untangle - we need another level :rolleyes:

It was top:-35px; right:30px;

Gone to work, laughing all the way, got some odd looks

another level :ohdear: that's wiped the smile off my face I shall ponder on it

Ah well tit-for-tat, I felt sorely tested at that point but almost spat coffee all over my pooter when I read your sitepoint thread response

You get a small reprieve because I went on to create 2 more pages - the adult page and outline - but you can only get to the outlines for adult and aboriginal from the course pages at the moment.

I'm seriously wondering whether I should just give them the PDF outline brochures. Then again I know this is an almost impossible SEO task and we need content.

Example - remember this? - it shows up very well amongst the govt sites. There is almost NO original content. The SEO is all in the menu, the file names and the clever footer.

Okay - off to see if I can swipe some suckerfish code Can't bend the brain to figuring it out this early in the morning and I'm going to be short of time for the next couple of days.

This thread was about a ticklish menu...no doubt we're about to finally get to the point

continued....

Hmmm...well close but no cigar

The "Adult Course Outline" is supposed to flyout on hover over the last item "Course Outlines" under MHFA Courses msavers

Help appreciated as always

Well I've managed to get the second level in the right place but I can't find out where to hide it till you hover on "course outlines". Currently it shows along with everything else when hovering on "MHFA Courses"

Help please...I'm going cross-eyed.

I still can't get it to work

:mad: smee validate your code, there's me trying to test for rulesets wondering why I can't effect things, I can't apply rulesets to malformed code!

Principle here is as I've talked about in the past we are having to use descendent selectors here, the rules that show the first initial sub ul will in reality show any number of sub ul, so it's fine when there is only one but when there are more all will show from that initial hover rule in which case one must explicitly hide the new second level and that is done after the hover rule so you would do something like ul li ul li ul {left:-9999em;} and then to show the second level ul with a ul li li:hover ul {}

If this is doesn't make sense then take the class option to make things easier to follow, place classes on the sub ul such as 'firstLevel' secondLevel' etc and style off those class names for clarity,

Thank you.

Hmm first part of my last reply read as gibberish - sorry.

I note that things appear to be in the same state so is there still a problem with hidding/activating the new second levels?

I didn't get to spend much time on it yesterday but it would no doubt still help me, and others who might read this, if you corrected the "gibberish".

it's corrected but probably still a tad confusing

get the markup corrected, move that closing li to after the second level nested ul has closed , and I'll have a look in the morning.

I'm not sure what a "closing li" is - but I've been trying for a couple of hours and it still doesn't work.

First I had these two lines of Suckerfish's exactly the same (copy/pasted them) and it didn't work...

Then I tried your instructions and it doesn't work...I'm fed up The next time I'm going to find a cut 'n paste menu that doesn't take a week to install every time I look at it

You were almost there, I've attached your stylesheet with adjustments.

You do still need to correct the markup though closing LI means just that!

that must be moved after the nested ul has closed otherwise the ul is not nested within the li element where it needs to be.

Sorry for the delay...putting up a new page and the email on Mac doesn't ding!

Thank you for that! I really was beginning to get very frustrated. I had already tried 170px where you have 169px - didn't make a jot of difference. The list dots had only shown up in the last hour or so and I knew that was a list none somewhere but wasn't going to get side-tracked.

I didn't have a #nav, #nav ul because in the original discussion thread you told me to take it out because it was confusing things.

Are you seriously saying it was just the first level being specified twice?

I was so focused on the css I kept thinking you meant one of those li!!

I closed the last one in Ronda's list but the validator was still complaining on her page.

It took me a while to work out you meant the menu file :rolleyes:

Problem is...it still didn't work

The DDs were there but way out in space. So I put back the left: o; and where I had

#nav li ul li ul {
margin: 7.5em 0 0 170px;

I changed the 7.5em to 0 et voila!

And it validates except for the CCs I have to move at some stage because this site really does have to get it's ticks.

Thanks Hugo

You were trying the 170px on a margin for LI elements when it needed to be the offset positioning for the second level UL absolute positioning; I commented out the margin rules and put in place a new positioning for the second level ul.

Ooh...I'd better go and check then because I just copied the two commented lines,

The #nav, #nav ul

and the long one where you dropped the first level (because it was already specified above, I thought).

Must go and look for something commented out - 'cos I didn't do that

Ah...

I didn't see the commenting out, but when it didn't work I changed the 100px to 170px and it does work :?

ETA: So basically I undid your new positioning and reinstated my own? "D

Actually it's interesting, generally we would always state that margins aren't used where absolute positioning is concerned, however in it's context the second level ul does work with the left margin, seemingly quite effectively.

So what's changed then?

Why wsn't it working for me? The menu li out of place!!!

ETA: That's all it was - I didn't know you actually had to enclose the next evel inside the last li.

*groan*

:shrug: the misplaced LI element wasn't helping, other than that compare carefully my CSS to the original

That must be it because they were showing in the right place but from the top level hover as though they were the first level DDs.

Could you please check one more thing at some stage? Is it still "ticklish" in IE?

Ok the problem with IE6 was simply that the #nav a () on which you were setting the anchors to display:block to get full region hover needed to have hasLayout triggered for IE6 otherwise simply stating display:block isn't sufficient plus erratic behaviour can ensue.

With anchors and display:block you generally need to state height:100% as this is a pretty safe valid property that won't upset other browsers.

Thanks for that Hugo....I forgot to keep an eye on HasLayout