77 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Split topic: continued fromThis thread

Hee-hee...just confuddle her with a few instructions....

EDIT: Actually, I think this is as good a place as any to start...

D#7 - Taming The Tabs

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Forget any changes I made

Forget any changes I made and just work on the menu exactly as it was originally my amendments were based on a couple of points, one that there were only five tabs originally and two that the parent element wasn't containing it's floats, hence the display:table however it doesn't - despite the br tag removed - seem to want to sit flush to the top of the div below.

I wouldn't spend a huge amount of time with this menu it's not worth all the hassle and although it's possible to modify and hack it around it's not something I would bother to do it's simply too fussy in it's construction.

Love the new graphic what app are you using Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I'm sorry Hugo but I'm still

I'm sorry Hugo but I'm still working on this other thing, it's taken far longer than I expected and I have to have it for a 10:00 am meeting I'll get back to this tomorrow night...promise.

Hugo wrote:
Love the new graphic what app are you using Smile

Oh...a bit of this and a bit of that Tongue

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well. I don't know if my

Well. I don't know if my eyes decieve me or not. I just thought I'd swap the original 3rd line with the position:absolute back in there with your first 2, since IE seems to like it. What FF does with it is to drop the menu below #maincontent - so I added some padding and they both sat in the proper place! Momentarily that is. I repainted and it moved.

Can you check for me please? Does the position/layout change when you force refresh?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The display:table property

The display:table property will force the enclosing of the li floats, without it the floats drop down and will overlap the maincontainer top, trouble with using display:table is that it does not like floats where they may wrap to another line.

The problem that needs addressing is that #menu is a fixed width dictated by the sum of the li widths and the layout will need to take this into account and not reduce further than that width and it's margin which is keeping it to the right so that the li elements sit over the maincontent. It's possible another approach might be to allow #menu to span the full width and set the li elements to float right and then see how the li elements behave when the layout width is shrunk.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hello Hugo Sorry I'm so

Hello Hugo Smile Sorry I'm so late, things have definitely been going pear-shaped for me all day today!! Sad

I note your second to last post, you think perhaps it's not worth pursuing this menu and yet you've come up with "one more go" Smile

Hugo wrote:
It's possible another approach might be to allow #menu to span the full width and set the li elements to float right and then see how the li elements behave when the layout width is shrunk.

So shall we try it one more time then? I'll see if I can implement this...back in a little while.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hmmm...no luck I'm

Hmmm...no luck I'm afraid.

The original menu I inserted had only 4 tabs and I increased it to 6, so the tabs will take up 6x100 + 1px margin each 606?

1. #container was min-width: 600px and I've increased it to 650.
2. I've taken all padding and margins off #menu
3. Put float:right on #menu li - and they're all sitting on the left!!

Or have I not done this right as usual? Smile

(PS #maincontent 600 + pattern 140 = 800 )

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

By span the full width I

By span the full width I meant that width:100% would need to be declared on the #menu and the li set to float right, it also looks as though the height of the lists has to be 2.1em for things to settle down.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi Hugo

Hi Hugo

Well I don't know why FF won't take any notice of the float:right. I also changed the height but it doesn't seem to have made any difference, it's still all bunched up on the left for me...how was it for you? Smile

EDIT: Aaaaargh! Obviously it works better if I don't forget the ; after the width.

Yes! they're both flat and right. Now just need to contain IE

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I have a sneaking feeling

I have a sneaking feeling that for his menu approach to work in IE hasLayout mustn't be triggered i.e the zoom:1; property as it causes the inner elements to expand the #menu outer parent rather than the inner elements simply drop through and over the elements below, how that will effect things I'm not sure as I cant test at present , try removing the zoom property and see how things look in IE.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi Hugo...this is a bit

Hi Hugo...this is a bit crazy Shock I've taken off the zoom:1 but can't get to the site at the moment even though the file appeared to load okay through FireFTP the site won't load, just says it's waiting for it.

However when I pasted it into the browser locally, it looks to be on one line BUT the links read RIGHT to left - that is Home is the far right link! :? and of course IE is still breaking layout.

Shall I start looking for an ordinary drop down? Pity, it was a nice menu but I think you're right and it's just not worth asking you to spend any more time on it Sad

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry removing zoom alone

Sorry removing zoom alone wouldn't remove hasLayout as the width declared will be setting it as well, you can try removing the width as a test and see if IE behaves if it does then it remains to be seen how whether this menu can be worked without the widths on the #menu element, I would need to work on the menu with a local copy to get an idea of whether it will work but simply haven't time right at this minute to look at it in depth,it may well be that it has to be ditched if causing these problems.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 40 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Don't worry about it today

Don't worry about it today if you're busy Hugo...I've been having a bit more of a play with things and I'll also have a look at some other menus.

Of course we could throw it back on Mr Nicholls to sort out his code? Tongue

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is as far as I can take

This is as far as I can take this sort of menu at the moment, this is a bare bones structure but it requires precise styling depending on type of layout it would work in and there are all sorts of little attendant problems that would need dealing with. It may help you out but you'll need to loose the div#box and other extraneous stuff

/**/





  • Link

    • link

    • link

    • link


    • link









  • Link


    • link

    • link

    • link

    • link

    • link

    • link

    • link


    • link










  • Link





  • Long Link





  • Link


    • link

    • link

    • link

    • link


    • link










  • Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Wow Hugo!! You are a

    Wow Hugo!! You are a gem...I'll have my work cut out tonight then Smile

    As one last effort while I was playing around before bed, I realised I hadn't given the original menu another go as you had suggested so I put it back to have another look and found a green tick and 2 red exclamations on the right of the FF browser bar - one was saying that 'header was undefined'.

    Since the only place I have specified Header is in the resizing javascript in html, I had a look to find I had left it as

    var masthead = document.getElementById('header'); header.style.border=header.style.border;

    so I changed it to header to match. Since this is on the div before the menu, am I messing things up with incorrect js? The 2 lines above were the original code I copied from Michel Fortin's site and when I needed a couple of fancy dividers resized I just put more of them in for each.

    It's now telling me -

    Javascript error: 'bar' has no properties.

    and it objects to a whole heap of display: statements which I'm assuming is the display: inline-block;

    Does any of this have bearing on things before I move on to your new code?

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hmmmm....late home tonight

    Hmmmm....late home tonight and have had a quick install but not getting very far at the moment working out what bits I need/am missing. I take it I had to download the csshover.htc from Peterned's site. I will have more time to look tomorrow.

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Sorry, yes you would need

    Sorry, yes you would need the csshover file, bear in mind that the example I posted is not anything like as nicely styled as the other example and does not take to the borders which is a tricky and clever part of the cssplay example.

    As for the javascript if you think it may be causing problems then develop without it, disable it for a while and see how things perform.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    'Morning Hugo!...Hmmm well

    'Morning Hugo!...Hmmm well that was the week that was and I certainly hope you had a better one than I did Smile

    Aaaw..you've given me those nice little curved corners top and bottom and how/where did you get my purples in there? I can't see where they're specified!

    I am thoroughly mystified though...we have the same problem! When I paint locally, the menu bar renders in a straight line - when I load it to the site it wraps!!!

    I've just put it all in the html for the moment and I haven't touched your code yet - still have to work out how a list works with all those tags Smile However I thought I'd just load it up in its pristine condition so you could see it before I start mucking about with it. Smile

    http://nasmsite.com

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    I didn't add any colors

    I didn't add any colors other than some basic grays to see where things were, so it sounds as though you have a specificity conflict overwritting my rules or simply that where I didn't specify something it is being taken from existing rules

    You must remove any rules I have marked as demo they were for display only while I was working.

    you'll probably need a margin-top on the ul as well as position relative and a z-index to bring the dropdowns into view, and to float the li elements right instead of left.

    also you'll need this as you have graphic backgrounds (if you want the same effect for the bottom curve then you'll need to replicate this line for the bottom curve ruleset and substitute the correct background graphic.

    .rtop {background:#fff url("images/viojewel.gif");}

    There is for whatever reason a problem with the spacing of the list elements but havn't time to look at that .

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Confuddle her is right!

    Shock Confuddle her is right! Here I log on and find I've been moved! Laughing out loud

    Thank you! Got to catch up on more work, back later.

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Aaarrrgh!!!

    Grgl...splutter, splutter, splutter!! Jeeeepers but this code is touchy! Heeelp please.

    1. Since you were so enamoured of my banner Smile I made a new one in the current background colour and the right size - see that blue line under it? It's the old banner color, where oh where is it coming from please?

    2. I finally got the tabs to sit level with #maincontent with a margin: 140px on ul but it throws the drop down out by that much too.

    3. Put a plain background on things for the moment to see where we are.

    4. The tabs show in a straight line in IE6 and FF when rendered locally and wrap when loaded to the site. Piccy in FF to prove it.

    AttachmentSize
    Hmenu_1.png 329.53 KB

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    #banner img

    #banner img {display:block;}

    Look back at my last set of remarks re rules to add, the 140px left margin was designed for an earlier take on the layout.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hugo wrote:Look back at my

    Hugo wrote:
    Look back at my last set of remarks re rules to add, the 140px left margin was designed for an earlier take on the layout.

    Actually I've read the instruction several times Smile Ever since you first suggested lining up the tabs with #maincontent I've worked on trying to achieve that. I put the 140px in because the #sidebar pattern is 140px wide, and I want the tabs to line up with the edge of #maincontent.

    Hugo wrote:
    Youu must remove any rules I have marked as demo they were for display only while I was working.

    Well I deleted the comment line and the .box - it seemed that everything else is needed...or am I overlooking something obvious?

    Hugo wrote:
    you'll probably need a margin-top on the ul as well as position relative and a z-index to bring the dropdowns into view, and to float the li elements right instead of left.

    I didn't put the margin-top because I don't want one (this is the bit that's changed, it was too busy so I've dropped the top pattern for the moment - it also helps to see what's going on).

    I have put in the pos-rel and the z-index and if I float the li right, half the menu goes one way and half goes the other way - bigga da gap inna middle!

    Quote:
    #banner img {display:block;}

    I just watched it paint the new banner over this lighter colour, I don't know where it's getting it from, I've done a search and I'm now only using that colour for text. :? (EDIT)But it did fix it Smile

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Quote:and if I float the li

    Quote:
    and if I float the li right, half the menu goes one way and half goes the other way - bigga da gap inna middle!

    Actually that was something else. When I put float: right on li it strings the tab tops across the page and the rest of the tab disappears like the attached pic...

    AttachmentSize
    Hmenu_2.png 162.92 KB

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    #wrapper was part of my

    #wrapper was part of my display rules not part of the menu.

    If using the 140px margin then you will need to lose the width 100% you cant have margins with 100% widths so it will need to have whatever was being used earlier on the other version.

    The img needs display block to remove the reserved space for the letter descenders, inline images are inline elements and follow the requirement for a baseline raised up from the container floor, the color was likely coming from the #wrapper div which shouldn't be there

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hugo wrote:#wrapper was part

    Hugo wrote:
    #wrapper was part of my display rules not part of the menu.

    Oh I tried taking that out too, it seemed happier with it Smile or maybe I'd changed something else that screwed it up.

    Quote:
    ...you cant have margins with 100% widths

    Okay - just changed that to 80% and yes of course, it makes sense, 100 is 100 is 100.

    Now the hover doesn't work Smile no dropdowns - I'll load it http://nasmsite.com

    EDIT: *sigh*I've got to stop trusting the local render - the drop downs do work - tabs are bunched up Sad

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Things don't seem to have

    Things don't seem to have moved on

    So to prompt things if you are going with a margin 140px then you must ensure that the margin is applied to the parent element only! putting it on the generic ul means that it's applied to the sub nested uls as well (hence the offset dropdowns)so margin on #nav and no width; li floated left.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Thought I'd give an update

    Thought I'd give an update because I thought I'd made a little progress, now I'm not so sure.

    When I paint locally, the menu sits in a straight line on top of #maincontent and (almost in IE) perfectly lined up where the pattern meets #maincontent. I've also managed to space all the tabs.

    When I load it to the site - the lineup's fine, the spaces are fine, but the tabs wrap in FF. When you force refresh, they'll wrap differently...every time you force refresh they will be in a different place.

    The dropdowns work in FF but not in IE6, locally or uploaded :?

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Edit: Tee-hee I don't know

    Edit: Tee-hee Laughing out loud I don't know how you snuck that post in there, in fact the "ding" in my email has just announced it!!

    Hugo wrote:
    So to prompt things if you are going with a margin 140px then you must ensure that the margin is applied to the parent element only! putting it on the generic ul means that it's applied to the sub nested uls as well (hence the offset dropdowns)

    Oh...is that how you do it...I put margin-left: -140px Laughing out loud
    #nav li:hover ul {
    left:-140px;
    display:block;
    }

    I'd better go and make it pretty then.

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hmmm...now the drop downs

    Hmmm...now the drop downs have disappeared in FF as well Smile

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Because you've removed the

    Because you've removed the left offset in the li:hover rules that brings the nested ul back in to view

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    And I thought I'd compared

    :bigoops: And I thought I'd compared it carefully to your original code to make sure I hadn't done anything silly like that :blushing:

    Just leaving work now...I'm afraid it's going to be a bit like this for the rest of the week...check you later.

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    hmmm...well the drop downs

    hmmm...well the drop downs are back in FF but still not in IE and the menu is still jumping over the place on refresh in FF Sad

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Weeeelll...I finally took

    Weeeelll...I finally took out the #wrapper again.

    The problem with that was that all my teaser boxes then ended up on the right under the menu - so I put clearfix in there under the menu and they've gone back to their proper place.

    Still no DDs in IE, not sure if the menu's jumping around in FF. I haven't done anything to the background on the menu but I do notice there is an extra pixel of space between the 3rd and 4th tabs - where's that coming from please?

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Smee wrote:Weeeelll...I

    Smee wrote:
    Weeeelll...I finally took out the #wrapper again.

    The problem with that was that all my teaser boxes then ended up on the right under the menu - so I put clearfix in there under the menu and they've gone back to their proper place.

    Not sure what you mean by this removing that #wrapper should have had no consequence to the rest of the layout, it wasn't part of it originally.

    Smee wrote:

    Still no DDs in IE, not sure if the menu's jumping around in FF. I haven't done anything to the background on the menu but I do notice there is an extra pixel of space between the 3rd and 4th tabs - where's that coming from please?

    The IE problem might rest with incorrect z-index levels or it might just not be finding the path to the htc file correctly.

    Not sure where the extra space is comming from have a play around with the curved corner rules to see if they are the culprit i.e isolate them as a test and see how the spacing rules on the actual li elements is behaving.

    Jumping around? you need to be more specific , FF may well have a problem with the table display properties used to enclose the floats when the floats have the ability to wrap to new lines, in which case the table display properties will have to be removed and the .clearfix clearing method tried on the #nav top level ul.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    .

    Hugo wrote:
    removing that #wrapper should have had no consequence to the rest of the layout, it wasn't part of it originally.

    That's true, but I assure you I've had some weird and not so wonderful things happening.

    I have put back the #wrapper and taken out the clearfix under the menu and the layout seems to be holding below the menu whereas it wasn't before. :shrug:

    Quote:
    Smee wrote:

    Still no DDs in IE, not sure if the menu's jumping around in FF. I haven't done anything to the background on the menu but I do notice there is an extra pixel of space between the 3rd and 4th tabs - where's that coming from please?

    and Hugo answered:
    The IE problem might rest with incorrect z-index levels or it might just not be finding the path to the htc file correctly.

    The path to the htc file may have been wrong and I've changed it, however it seems to have made no appreciable difference. I only have one z-index in the whole thing which is this -

    ul { position:relative; list-style:none; margin:0; padding:0; z-index: 1; }

    Hugo wrote:
    Jumping around? you need to be more specific,

    Two days ago...

    Smee wrote:
    When I load it to the site - the lineup's fine, the spaces are fine, but the tabs wrap in FF. When you force refresh, they'll wrap differently...every time you force refresh they will be in a different place.

    Please look at the site and force refresh in FF at least 3 times and tell me if the tabs stay in the same place for you. I haven't had time to try the table display stuff tonight. Still no DDs in IE.

    After nearly 3 weeks of ruddy menus I'm getting very disheartened to say the least. Sad

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    This is re-worked without

    This is re-worked without the table display properties, it requires clearfix class on #nav and shouldn't need the wrapper div but if you want to use it you can and it shouldn't disrupt things, having said that I haven't got your background image in place and can't remember how that fitted in with things.

    This is now stable you will need to work out what to do with the wrapping of the floats as that is simply a matter of fixed widths (you could try reducing li elements to 80px then the min-width will kick in before the floats try and wrap.

    The list spacing seems fine, so not sure what the problem was there.

    IE6 seems to work fine for me with the csshover.htc file so not sure why it isn't for you.

    ul { position:relative; list-style:none; margin:0; padding:0; } #nav { position:relative; margin-left: 140px; z-index:10; } #nav li { position:relative; width:100px; float:left; margin-right:.2em; text-align:center; background:#ccc; } #nav li.parent { margin-right:.2em; }

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hello Hugo So sorry I'm

    Hello Hugo Smile So sorry I'm neglecting you...the rest of my life is ganging up on me at the moment and I need to give it a bit more attention. I doubt I'll be able to do much before the weekend (but you never know!).

    I did quickly manage to throw in the changes only to find out that the background pattern has disappeared for me too!!

    Hugo wrote:
    ...having said that I haven't got your background image in place and can't remember how that fitted in with things.

    The background is a repeat in the #container and as far as I'm aware hasn't been touched. I think I'm coming to the conclusion it's just not worth persevering with the liquid layout, I seem to be compounding my problems with it, so I will probably look at "fixing" the page as well.

    If I can get everything to work in a fixed layout, then I can look at putting back the javascript for the images and the CC for the page at a much later stage.

    I'll try and simplify things at the weekend when I'll have some time to get my head around it and see how the menu shapes up then.

    Back soon Smile

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    I thought that the

    I thought that the background was just a local problem for me, a path error or sumit it shouldn't have gone awry for your layout.

    It's your choice of course but the layout is almost there, but if you want to try it fixed it should be straightforward enough, but play safe and work on a copy of the page then you have the two to compare and can easily swap back.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    .

    Hugo wrote:
    I thought that the background was just a local problem for me, a path error or sumit it shouldn't have gone awry for your layout.

    Ummm...no. It definitely isn't there and I know I had no reason to change the code in that bit of the css. I've just watched it load the site though and although FF doesn't tell you what it's doing, IE does at the bottom of the screen and the last thing it says it's doing is loading the viojewel.gif - which is the pattern. The only thing I can think of is...both #container and #maincontent have zoom:1; set - I don't suppose that somehow there's a conflict with z-index: 10 ?? I don't know how these two interact.

    Hugo wrote:
    This is re-worked without the table display properties, it requires clearfix class on #nav and shouldn't need the wrapper div but if you want to use it you can and it shouldn't disrupt things,

    So I put the clearfix in and put the #wrapper back just to be on the safe side.

    Hugo wrote:
    This is now stable you will need to work out what to do with the wrapping of the floats as that is simply a matter of fixed widths (you could try reducing li elements to 80px then the min-width will kick in before the floats try and wrap.

    So I changed the li elements to 80px...but the extra space between tabs 3 and 4 is still there for me and the DDs still aren't there in IE - in fact the menu seems not to be contained anymore despite the #wrapper and the clearfix because in IE the teaser boxes are on the right between the menu and the #maincontent Sad

    Hugo wrote:
    IE6 seems to work fine for me with the csshover.htc file so not sure why it isn't for you.

    I think they're out to get me.... Laughing out loud

    Hugo wrote:
    It's your choice of course but the layout is almost there,

    Oh alright then you sweet-talker you, I'll persevere with the liquid Tongue

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    The background is due to the

    The background is due to the #wrapper div and thinking about it I mentioned that once before, in testing locally I wasn't that bothered about backgrounds and hadn't remembered that #wrapper had that background color on. Please loose the #wrapper or cancel it's background.

    You also appear to have a empty div below the menu :? with a clearfix class on, I don't know what that's about but I didn't put it there Smile
    Also there appears to be a markup error of some description; an unclosed element perhaps ?

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    (No subject)

    :blushing:

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    It's the W-R-A-P-P-E-R!!!

    Shock Shock! Horror!

    No wonder you've had this fixation about the wrapper! I tell you Hugo that wrapper has been off and on more times than my coat this winter Smile

    Because I couldn't log on to the site to fiddle some more, I finally got around to installing Firebug and have just been having a little look, reading the instructions in one tab and trying it on the site in another...

    And guess what! The ruddy wrapper encloses the menu, sidebar and maincontent! YOu KNEW that!!!! Why didn't you tell ME!!! No WONDER we were at odds. Yes of course it's your fault, I'm the woman remember? Tongue

    I thought it was only enclosing the menu tabs, which is what I need it to do so that I can keep the plain background behind the tabs. I've got used to it now and I think it does look better.

    No wonder the rest of my layout was breaking when I tried to close the wrapper div under the ul

    So I need to nest the tabs in the wrapper please, sitting on top of #maincontent, with the plain purple background behind the tabs and the pattern down the side of #maincontent - why won't closing the wrapper div under the tabs code work?? It puts the pattern back behind the tabs. :?

    Whew!

    EDIT: Bingo! Height: 27px; on the wrapper Smile But no DDs in IE

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Women yeah I realise it's

    Women :shrug: yeah I realise it's all my fault but I dus know my place in this female run world Sad

    er where has the clearfix class gone?

    I've tested this and the last amendments should have sorted things , wrapper is not needed but can stay there if one wants, not a lot of point though, but without a clearfix class (that was on there before?) the #nav will not contain it's floats, you do not want height on the wrapper that isn't really a solution.

    As for the csshover test whether you are actually reading the file bu setting a hover on an element that would normally not take it in IE something like #content:hover{border change}

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hugo wrote:Women yeah I

    Hugo wrote:
    Women :shrug: yeah I realise it's all my fault but I dus know my place in this female run world Tongue

    Laughing out loud

    Okay then...wrapper out, clearfix in, .htc proving with #maincontent:hover.

    HTML validates except for behaviour
    css validates except for CC

    Firebug says the clearfix is on the #nav

    It still doesn't work for me in either browser Sad - site loaded http://www.nasmsite.com/

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    .

    Hugo? Aren't you talking to me anymore? Sad

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    No just waiting for the

    No just waiting for the points I mentioned before to be dealt with :shrug:, still no clearfix class, still an error in the markup - extraneous closing div; and still that odd empty div following after the #nav.

    The hover file is working so you can remove the test , also the dropdowns are working in IE6 :shrug:, btw the file is not a css stylesheet it's a propriatery microsoft format .htc so you can't try and import it using link tags - at least not as far as i'm aware of.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hugo wrote:No just waiting

    Hugo wrote:
    No just waiting for the points I mentioned before to be dealt with :shrug: , still no clearfix class, still an error in the markup - extraneous closing div; and still that odd empty div following after the #nav.

    I'm sorry Hugo I just don't know how to put the clearfix on the #nav - nothing I've tried validates, so at the moment there's nothing there.
    I have this specified in the nasm.css file from our previous float problems,

    #sidebar { float: left; width: 140px; }

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {display: inline-block;}

    .clearfix {display: block;}

    #maincontent
    {
    margin: 0 0 0 140px;
    border-color: #BE889F;
    border-style: solid;
    border-width: 0 3px 3px 0;
    zoom: 1;
    }

    but I just don't know how to call it for the #nav...sorry, nothing I've tried will contain the tabs. But I have taken out the extra divs.

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Hugo wrote:No just waiting

    Hugo wrote:
    No just waiting for the points I mentioned before to be dealt with :shrug: , still no clearfix class, still an error in the markup - extraneous closing div; and still that odd empty div following after the #nav.

    I'm sorry Hugo I just don't know how to put the clearfix on the #nav - nothing I've tried validates, so at the moment there's nothing there.
    I have this specified in the nasm.css file from our previous float problems,

    #sidebar { float: left; width: 140px; }

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {display: inline-block;}

    .clearfix {display: block;}

    #maincontent
    {
    margin: 0 0 0 140px;
    border-color: #BE889F;
    border-style: solid;
    border-width: 0 3px 3px 0;
    zoom: 1;
    }

    but I just don't know how to call it for the #nav...sorry, nothing I've tried will contain the tabs. But I have taken out the extra divs.

    Hugo wrote:
    btw the file is not a css stylesheet it's a propriatery microsoft format .htc so you can't try and import it using link tags - at least not as far as i'm aware of.

    So I took out the 'bare' behaviour call and put this in the head instead...is this right? It seems to be since I left the #maincontent border on so I could tell.





    body {behavior: url(csshover.htc);}


    /*

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 11 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    clearfix thus: <div

    clearfix thus:

    <div id="nav" class="clearfix">

    the CC ought to be :

    <![if lte IE 6]

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Smee
    Smee's picture
    Offline
    Elder
    Adelaide, Oz
    Last seen: 2 years 40 weeks ago
    Adelaide, Oz
    Timezone: GMT+9.5
    Joined: 2007-06-10
    Posts: 1596
    Points: 340

    Thanks Hugo. I did find the

    Thanks Hugo. I did find the clearfix class by searching the forum just before I left it and have changed the CC to suss IE6 or less. I took out the -- as well since you don't have them, doesn't it need them?

    However, I also tried to increase the #nav margin to 143px to get a better line-up and it seems to break again. Same thing happens when I try putting a purple background behind the nav. So of course I've taken them out again.

    There is still an extra px between tabs 3 and 4 in FF which you can see by mousing over the parent with Firebug. Still no dropdowns in IE.

    Mods and gurus – THANK YOU!
    For your time, knowledge and experience so willingly and generously given.
    Please come back tomorrow and sort us all out again Smile