D#5 - IE6 - HasLayout needed on "content"???

Well I think I would like to get it right and I'm pretty sure I've read something about it somewhere - I'll have a look tomorrow. If I can't find it, I'll have a look at what you're suggesting. Right now though, it's that time again. Thanks Hugo, I do believe we're a couple of steps forward.

Hope the documentation finished well or that you are at least winning

I will most definitely attend to your "other more pertinent comments" but what passes for my tiny brain simply won't function anymore tonight.

zzzz....

Well I think I would like to get it right and I'm pretty sure I've read something about it somewhere - I'll have a look tomorrow. If I can't find it, I'll have a look at what you're suggesting. Right now though, it's that time again. Thanks Hugo, I do believe we're a couple of steps forward.

I'm afraid it's to do with IE appalling handling of floats and seems to be a manifestation of the 3px jog yet normal fixes/workarounds are not working there is likely another reason for this and the clue to that is that this effect occurs on one page and not the other this is always a good thing! as it means all that has to be done is identify and isolate the aspects of code that differ between pages and work on those. However one way around this that does work is to float the elements as this neutralizes the problem and to that end another grouping is is required which isn't such a pain as it sounds then both are floated.

I wish! just started another set.

Just a quick reply. I'm running late again (seems to be the story of my life lately :rolleyes: )

The 1px gap appears on every page as you've probably seen, and this is not a problem when the background color is painted it doesn't show - it's the bump that's got me foxed. I was about to say the "bump" only appears on the newsletter page because that's the only page with multiple #content divs, but realised that the third page has two divs as well and it doesn't happen there. The only reason I started using them was I liked the border making the box effect, it seems to divvy up the info neatly. So - now that the layout is more stable - I will think about how else this might be achieved, but I'll pop in the extra div on the elements later. It's a minor annoyance, not large in the scheme of things.

Later.....

Wakey, wakey
rise and shine
to face another day
Mentor o' mine

Aaaargh!! FreeHostia won't let me connect! I actually deleted all files before reloading the lot, got 2 up and then it carked it :rolleyes:

However...I have now:
- put in the div for the right elements, 1px jog gone and so has the bump.
- changed the box text back to 0.6em
- renamed things. Now I have a #container, #maincontent, #info1, #info2 (these are the old #contentx) - #maincontent is the new one.

...but you can't see it yet....

I can but only imagine at the wonders then

All sounds good, did the div around the right elements have the effect of breaking the jog? this can be the case that simply placing that element, which is only concerned with the grouping and margining from the left, will not suffer the effect and the nested elements can then do their stuff with borders etc,

Naming sounds better, you could also think about the #info1 etc elements and whether they are absolutely required, remember that things such as ul, dl provide their own container which can be styled just as fully as any 'div' as long as the divs definitely have a purpose in adding a common set of properties to it's children and/or where it requires specific placement where otherwise one would be having to apply same properties to many elements should they be used, this isn't to suggest they shouldn't be though so don't start worrying unduly.

*preens* Yes, I thought ahead a bit, and I know I'm going to need that new #maincontent - so I thought it was just as well to stop mucking around and put it in now.

I'm 99% sure that was it. I was quite careful to make only one change at a time then paint in IE.

I'm pleased you approve of the renaming. When I started thinking of a name for the new div, #maincontent is what it is - but then there were too many "contents" running around. Information is what's in the (old) content boxes, so I went with that.

Too many #infos? Hmmm...I've been sitting here looking at them for 10mins trying to see them as UL or DL but I don't think they are. While all sites provide information one way or another, there's no getting around the fact this one is going to be text intensive.

Those #info divs are variously going to hold information such as the front page, bits and pieces (2nd page), quite a few articles (as per the 3rd page), and of the ones to come....the Library page, which the articles will eventually be in, feels as though it might have 2 or even 3 lists which will each need to sit somewhere. If ULs and DLs do this for themselves, then I won't use the #infos where they're not needed, it just seemed that was the obvious way to do the newsletter page.

I find it difficult though to see how I could do the newsletter page as a list or something and achieve anything superior. :? But I can be persuaded.

While we're waiting for FreeHostia - if you've got a few minutes, would you mind having another look up the thread at the #GetTheElementThatNeedsMinWidth and see why it still doesn't work now that the layout is stable? The bottom scrollbar is there from the get-go rather than at 600px and the text wrapping never stops.

Hmmm...well it's loaded and I've mucked it up again

Forgot to check it in FF didn't I?

You will need some rules for this new #mainontent.

If it's floated you can either give it a width or back to the left margin on #maincontent and a negative margin on the sidebar the same value as its width, if maincontent is widthed then it needs to be a percentage to preserve the fluidity you would also then need to change the sidebar to a percentage width. The problem with fluid widths and margins is going to be that browsers will demonstrate rounding errors if not careful and the background cutoff will show.

To some extent you are working yourself into a corner in terms of options due to the way you have arranged the backgrounds, the fixed width left side doesn't help where sorting out the best approach to the main elements, as working in pure percentage widths will show a gap at certain widths.

I would try just margin-left on #maincontainer first (as it was before) and try and tackle the jog by (if necessary) moving the inner elements of #maincontainer in a tad from #maincontainers bounderies.

As for the IE expression statement I don't see where you have placed it?

P.S site appears to be down?

Yes, the site's up and down like a yo-yo at the moment. I did manage to get the files loaded but if you haven't seen it, what happened was the #maincontent has dropped below the teaserboxes (EDIT: in FF only)as you must have sussed by looking at the code (?)

I originally had margin: 140px - which is the width of the pattern but it just gave me the equivalent white space between the pattern and the #maincontent. So I took it out again and have been trying a few other bits and bobs.

This is the CSS location of the *html to go on with while I digest the rest of your post...

/*-- NASM style sheet --*/

body
{
background: #FFFFFF;
margin: 0;
padding: 1em 0;
font-family: "trebuchet ms", arial, sans-serif;
color: #000000;
font-size: 1em;
}

/* elastic layout for IE */
* html #container { width: expression(document.documentElement.clientWidth < 600 ? "600px" : document.documentElement.clientWidth > 800 ? "800px" : "80%"); }

a:link { color: #663399; font-weight: bold; text-decoration: none; }
a:visited { color: #A67AD1; font-weight: bold; text-decoration: none; }
a:hover, a:focus { color: #A67AD1; font-weight: bold; text-decoration: underline; }
a:active { color: #A67AD1; font-weight: bold; text-decoration: underline; }

(Just lost a long dissertation and have to start again)

Be aware that the current float drop of #maincontent to below the teaserboxes is a FF problem only - IE is as happy as Larry.

Ummm...the #maincontent didn't have a margin-left because it didn't exist. I just created it and all it had was float:right. THEN I tried margin-left the width of the pattern but put it between the pattern and the #maincontent.

Your first paragraph on using percentages on everything makes me think I'm going to run into problems down the track, so I'm thinking what if I rejig it so that I have....

1. banner
2. menu
3. top pattern
4. #maincontent
5. #sidebar floated left with pattern background and floated teaser boxes
6. #info floated right and sometimes containing other floats
7. footer

In other words - put #sidebar and #info both inside #maincontent.

Would it be a more traditional layout then? Would that work better?

Scrap that idea (mine) - I just remembered why I'm using this layout...because with it, the left pattern is always as long as the #maincontent because the #maincontent will always be longest. No problems with height/footer.

No if you put the sidebar in #maicontent you just arrive back at the earlier style layout.
Try margin-left on #maincontent with perhaps a hasLayout trigger to keep IE happy (zoom:1; for the moment) first and lets establish whether the IE jog still manifests itself and if it does attempt to deal with it as I suggested above.

IE jog is no longer a problem - hasn't been since I made #maincontent.

With just float: right in #maincontent, the problem now is that #maincontent drops below the left teaserboxes in FF only. IE is happy.

So I changed it to this -

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

#maincontent
{
float: right;
#margin-left: 140px;
zoom: 1;
}

...and it gives me pattern, white space 140px, #info (in IE) but only float drop in FF

If I put margin-left: -140px the #info spreads to the edges of the #container, that is, it covers the pattern in IE (can't remember FF).

EDIT: It's Pumpkin time again...you're working blind here Hugo though I do appreciate it, let's wait till tomorrow (later for you) when hopefully the host will be up and you can see what's going on. Cheers.

We know the problem doesn't manifest when floats or opposing floats are used that was the point in bringing up floats and a new container for the right elements originally, but I'm trying to get you to try the margin-left, no width, no float, and to see if we can break the problem or whether it indeed does occur regardless then whether we can work on the nested elements in the new #maincontent to nullify or hide the problem.

Anyway without host access this is a bit pointless at the moment

YEESSSS!!!

Well done you

Sorry Hugo, I didn't realise you meant without float: right :rolleyes:

IE has the 1px jog - it's neither here nor there, as I said, it doesn't show when the purple background is in.

Host is up and files reloaded.

this is quickly as I have to get some sleep.

remove the background repeat-y on #container, let it repeat across the page.

remove the #topjewel element (comment out)

Actually add the content for your topnav i.e a ul for your links? give this a margin-left same as #maincontent and a white background.

On the topnav div place your bottom pink border and a bottom margin ~2em to create the spacing that was created by the removed #topjewel div.

Hope you slept well Hugo

Okaaay...background painted and #topjewel commented out.
Result = 1px jog gone AND[b] the *html thingy now operates!!!! Yippeeeee!

Site reloaded.

Ooeerk though...menu is Duck #7...I didn't expect to have to just fling it in there, was hoping to discuss it first.

I've had my eye on Brainjar's menu for ever so long and had a practise run (weeks ago now)...will go and see what I can do.

Well the ul (or whatever arrangement you wanted ) was simply due to the fact that you needed the extra element there to work styles on with #topjewel gone. The ul margins itself away from the left allowing the background to show through in the parent #topnav, the ul is given the white background to replicate the way things were before.

If need be just fake the ul giving it height you dont need to actually fill in the fine detail of the anchors just the ul and it's child li elements (li floated?)

Ooof! I've broken it - it hasn't gone as well as the last time. I don't know where to put the margin-bottom: 2em; in Brainjar's code since I had to remove my div.

The only thing I've change is the 80% to 100% in the html

Why do you need a margin bottom that excessive on a ul list ? i'm not familiar with this brainjar thingy but would have tought that you need to customise it now and that perhaps the margin bottom isn't required.

What I'm initially trying to help you with is the basic layout without knowing what you may have intended to go in a given element it's hard to predict whether I am leading you astray but I think you just need to look at the reasons for things like a margin-bottom of that amount as it suggests it was intended for a specific reason that is no longer present.

I forgot to say that Brainjar's DTD is -

That's what I was using the last time I tried it. Will it even work with 4.0 Strict?

I figured you would be familiar with it, but in case not it's on his own site at http://www.brainjar.com/ - called "The Revenge of the Menu Bar" with an 11 page tutorial.

That's interesting - I was about to say the dropdowns don't work - but I just went to the NASM site and clicked while it was loading - the dropdowns worked WHILE it was loading, but not afterwards. :?

I cant look at this right now but what are you doing?! you seem to now be changing the layout? why has topjewel appeared again? and where has the topnav element gone? at the moment you have chucked the menu in as a completely new element, it's no wonder it's not working.

I'll have a look when I get back, but I thought that your menu was going to sit in topnav?

I was also trying to follow your instruction to put in the margin-bottom: so the "topjewel" pattern would come back under the menu. But I don't know where to put it now that I've put the Brainjar menu in. I still want the pattern to appear under the menu.

No, you're not leading me astray Hugo You've been absolutely fantastic sorting out this lot and I hope you're not totally fed up with it (and me). I can see improvements as we go and I know the whole thing is a lot more stable now and I never could have got this far by myself.

A couple of posts back you said -

On the topnav div place your bottom pink border and a bottom margin ~2em to create the spacing that was created by the removed #topjewel div.

This is because you had me comment out the #topjewel (the pattern that sits between the menu and the #maincontent).

I think we're out of sync with the posts because I'm a bit slow.

It hasn't appeared again Hugo. I forgot to comment it out in the html I haven't changed the layout. I really have tried to follow your instructions, which were-

1. "remove the background repeat-y on #container, let it repeat across the page." - okay I did that, no problems.

2. "remove the #topjewel element (comment out)" - okay did that.

3. "Actually add the content for your topnav i.e a ul for your links? give this a margin-left same as #maincontent and a white background." - this is where we came unstuck. I think you assumed I had a ul list waiting to be inserted. I haven't. I always intended to use a ready-written menu (Brainjar or Suckerfish). #topnav was always just a "holding space" for my menu. So I inserted the Brainjar menu in its place.

4. "On the topnav div place your bottom pink border and a bottom margin ~2em to create the spacing that was created by the removed #topjewel div." – Well I didn't know where to put the margin-bottom: 2em once I had put in the Brainjar menu.

But what I have now done to bring back the top pattern is, instead of putting a margin-bottom on the menu (#topnav), I have put a 35px margin on the top of both #tbox2 and #maincontent. Now the jewel pattern background appears again between the menu and the #maincontent, which is what I think you were trying to achieve with the margin-bottom on the #topnav (which has been replaced by the new menu). The dropdowns do work but obviously need some tweaking.

Please have a look and if you don't think this will work, or you think I would be better off with Suckerfish or another menu you're familiar with, I'll change it. Sorry, I didn't mean to frustrate you so after all your help Still friends??

It's not a problem , but you have diverged from your original design for that top area which consisted of topjewel and topnav and a left space where the background shone through.

Taking the view that I had when top jewel was in place I tried to work a better method that didn't rely on topjewel but did rely on being able to recreate the white nav that ran up to the same left edge as the maincontent beneath it, originally that topnav had text to the effect that it was awaiting menu links so the assumption was that the links would sit in there. My bottom margin was to create that space that topjewel was filling.

However you have removed topnav and placed the menu links as their own element which is fine if you wanted the menu to run full page width in that fashion.

If you require the spacing then just place the margin-bottom on the .menuBar

One thing I noticed you have cut 'n' pasted the CSS (menu) over from a html embedded example, by the looks of things, complete with html comments, they need to be removed and replaced by CSS /**/ ones

I would also cut the javascript into it's own file and link to it as it's a wee bit too much code to have embedded.

Otherwise if the layout looks right in the main browsers then you are on the right track, personally, and it is only a personal feeling, but the brainjar menu (I remember it from years ago) is getting on a bit and rather old and unwieldy, and I'm not convinced it's really the right look for your page/site style it's more suited to a technical type site in that it attempts to replicate/mimic OS window bar menus.

One other thing, and don't bite my head off if I'm insensitive but the header graphic? is there a better version around the corner?

Oh Hugo :blushing: "the left space where the background shone through" was not a design feature. It was simply where the background was showing through the #topnav slot because it was painted top to bottom in the #container and I didn't put a background in the #topnav!

Well you were right...the menu, however it was constructed, was going to sit in there.

And yes, I think I do want the menu to run the full page width, or is it only because I've got used to looking at it that way?

I understand your comments about the Brainjar menu looking a bit technical (and I was sure you would have run across it before), originally the bevelled edges and "embossed" text appealed to me because it looked more finished somehow. As a total newbie to all this, I thought putting a nice rounded look on the bar/links would be beyond me.

I'm putty in your hands Hugo...what shall we do with it?

LOL! One would definately hope so! I had to wait to see how wide the content was actually going to be for a start. It started at 700 and now has gone to 800. I would also rather have it out of the #container because while I like the border around the rest of it - the banner looks better without it. I don't have the required software or knowledge to do it myself, so will happily pay to have it done, since I don't have enough hours in the day to start that learning curve too! It won't be tomorrow - but it should be "soonish".

You could have a look through some of these:

http://mondaybynoon.com/2007/02/19/suckerfish-hoverlightbox-redux/

http://be.twixt.us/jquery/suckerFish.php

or have a look through the many examples at listamatic, most of which would probably be adaptable to a dropdown style

Goodness! Time flies when you're having fun :rolleyes: I will look at these in more depth tomorrow. I'll go on the hunt again then and see what I can see. I have actually been through all the ones on CSSplay, Listamatic, DynamicDrive etc. at one time or another - I think I thought "Perciformes" over at HtmlDog was quite good.

However along the way I've also changed my mind about how many sub-menus I need and hopefully I'll be able to get away with just the 1 or maybe 2 at most.

My feeling is that it has to be a simple style because there is so much else going on up the top of the page, I think I'd just rather it wasn't totally flat.

Hi there!

Well I haven't had any time to go menu hunting seriously...I have taken out the Brainjar menu and I think I have (well I tried) to follow your instructions about putting the #topnav "holder" in with the 2em margin-bottom in order to show the pattern under where the menu will sit.

I'm coming around to the idea that a menu all the way across may not be the way to go. I think just the words would look a bit lost under the header...so how do you feel about tabs? It would help a bit if I knew what I was shopping for

In addition, I removed the border around #container so you could see the banner without the border around it - do we like this better? The sides look a bit nekid to me but it may be just that I'm so used to seeing them bordered.

Do you have an LCD screen and if so is the background colour a bit "in your face"? - need some quieting down?

You could go for tabs, and there are a few examples at listamatic, tbh you'll never know without seeing various options in place in the layout what works, but tabs running across the #maincontent may well work.

If your going to remove the border then you'll probably have to place it the #maincontent right side as it looks a little chopped of and perhaps think about a little right margin to bring the pane in slightly from the edge.

The backgrounds deep purple , not especially my cup of tea but that's a matter of personal preference, but yes I'd prefer it toned down slightly.

Alright then...the hunt is on for tabs. I found these by clicking on an ad at the bottom of this page last night - it was just sitting there when I got to the bottom of your post! http://www.opencube.com/sampleit_im.asp?samples/qm2/sample7/sample.html

I think you have to buy the software though. On the other hand I found this a few minutes ago -

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Does the banner look better without the border is the first question. If it does, then I think you're right, I'll have to find a way to put the borders back on the sides.

What do you mean by -

What "pane" and what edge is it against?

Purple background - unfortunately, this isn't my choice, I will try and calm it down a little but I am stuck with the colour I'm afraid. Thanks for that.

EDIT:

The #maincontent div; right edge.

The list-a-matic thingy is just a code generator, use it if it's easier for you than writing the styles, it may be quicker, but it ain't tabs :shrug:

I thought you must have meant the #maincontent, but what edge is it against? Do you mean there isn't purple on that side?

Then maybe I misunderstand "tabs"? I do want a dropdown menu. Are you saying tabs are "click and go to page"? Like the top of the forum?

Then maybe I misunderstand "tabs"? I do want a dropdown menu. Are you saying tabs are "click and go to page"? Like the top of the forum?

Yes tabs is a term commonly used to refer to links that have the appearance of page tabs used to locate pages by the sticky out bit at the top and yes in CSS terms like the forum links.

They are best used where the tab clicked looks as though it is then selected and has the same background to the tab as the area beneath it and the inactive tabs are a different colour, they aran't really used with the dropdown effect though.

Only use the dropdowns if you really have enough links to warrent it, personally I've gone right off them and think that they have been misused just because they look clever.

(Sorry...keep going away and doing other things...)

Ah-ha! Okay I wasn't so far off then. I like the rounded tabs. However I do need a dropdown list otherwise I think things are going to get horribly messy...sorry

Yes, as soon as I answered your last post I realised you were talking about the generator which doesn't really have tabs. However I do like the green tabs in the other link, so that's what I'm aiming for and no, they're not going to be green. :rolleyes: So I just downloaded that - it says no time limits but I didn't buy it either and I don't think they're giving it away :shrug: So I'll have a play with it tomorrow night 'cos the green tabs appear to be in the stuff I've downloaded...whether or not I'll be allowed to make my own remains to be seen. It's worth a try, don't you think?

I'm going to have an early night. However, if I'm going to keep the banner out of the border I'd also like to tackle that tomorrow. So we have to take the #banner out of the #container, yet still keep it centred and available to the elastic javascript so that I can put the border back on the #container. Yes?

Ummm...nooooo...scrap that idea, just found this hidden away...

If you decide to purchase the menu, an unlock code will be provided which must be added to the menus script file, the code will remove the purchase reminder. The unlock mechanism is 100% client side with no outside connections, it's a simple script based unlock with zero added overhead.

**NOTE: You will not have to re-do your menu after purchasing, this download will be activated by the unlock code.

So now you know what I want, how do I do it? I'll Google some tomorrow to see what else I can find. I want nice looking tabs please.

You want a combination of tabs and dropdown so you need the principle of suckerfish along with something like 'sliding doors' and marry the two together

*sigh* Well, I've spent the night looking at menus and have ended up thinking that I'll be best off with something from cssplay...

I found a nice little drop down tab (#3 out of 5) at DynamicDrive but it has a heap of js. So I guess that's not the best option. http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

Of the ones at cssplay http://www.cssplay.co.uk/menus/ I think the following might work because they're all text based, which means I can change the colours and hopefully I can't get into toooo much trouble with them. If you look at the list of menus in the green column on the right hand side...

#40 is a very simple dd tabbed menu and what I like is that the dd sits neatly under the tab. If I can change the colours and borders on this, I think it would work.

#41 could be have the colours changed to just the site's colours and might work, it might also look a bit busy.

#43 is okay but I don't really like the way the dd goes high on the baseline.

So what do you think? Are any of these accessible to boot? I doubt it. Haven't done anything else tonight - this is tough!!

And what about you...pressure let up or deadlines looming?

Menu 40 would probably suit.

I wouldn't worry about it not being accessible, Stu Nichols knows his stuff better than most, however I don't like these menus for the hackery used to get IE6 to work namely the table and anchor wraps, but that's my opinion and many would counter argue that does it really matter for a browser that is so flawed anyway :shrug:

Have a try with #40 and see how things go, it should in theory drop in to your layout with some adjustments to the top level containing elements, but take care to copy the code carefully as his work is complicated, it may help to keep the styles separate in their own external file.

Hello Hugo

Ooeerk! I must have missed that opinion somewhere along the way. While I saw the IE only feeds,I didn't realise that this might be "a very bad thing" since IE usually has to have something special.

Maybe I'm fussing about nothing really, it's just hard to keep letting go of things I had planned on However let's face it, in the long run it will probably hardly matter as long as people can get where they want to go easily and without complications (for me or them!)

I'll have a think during the day and it may be that I just come back and try the simple dd list you gave me a few posts back. Thanks for looking Hugo!

I can only re-iterate that it's a personal opinion, I could support it with reasoned argument as to what I dislike, but also can except that it solves a problem, I would still prefer a snippet of javascript used to cater for IE6, either way If you like the styling of #40 as a base to work from, use it, you could always loose the CC wrapping elements and revert it to using the hover.htc file or similar approach, it wouldn't be difficult.

Okay then! I'll stop prevaricating and give it a go tonight - gotta run!

Humph!!
Well...I figured I'd just plonk it in there first and see what we could see before I start trying to move things to external files, but yes, it will be better in the longrun.

I took the CSS between the style tags and put it in my nasm.css and I took the html from inside the "showcase" div starting with:

and finishing with

not sure if I need the

...without the slash for html I presume, so I put it in without it.

It all has to be much smaller, he's got huge spacing around everything, but I figured on getting the general placement right first. There shouldn't be pattern above the tabs and there should be 35px of pattern below the tabs. I'm not staring at it to see if I can start to understand it

But what is the that he keeps referring to?

Just for the fun of it you could try these mods:

Replace (comment out) the first three lines of the menu and place these below.

#menu {display:table;list-style-type:none; margin:40px auto 0 ; padding:0; margin-left:140px;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:120px; height:1em; z-index:100;} #menu li:hover {z-index:110;}

I wouldn't worry too much about #nogo it's part of the trickery to get IE to work.

Heh-heh...I think you left me alone too long... I've been gently changing things and give me 2 mins to load it - I think we've done the same thing!!!!

EDIT: Forgot to say that I'll swap them in to see what you've done just the same - because I'm not you, I can't see it my head yet.

:blushing: Double post

We did!!! It's just that you didn't realise I have 6 tabs and so the last one is wrapping because you spread them out

Good Grief...the Duck Herder is in grave danger of learning something - aren't you proud of me?

Check my code more closely it's not quite the same and takes into account problems with the way the original is put together,that is if as I would one sits the tabs on the top of maincontent.

Add mine while preserving what you've done, you'll see what I did with the tabs.

Sorry...had to squish in the extra tabs. What I really mean twas that we both saw that it should line up with #maincontent -I see the surprise now you've sat the pattern above it, where I was going to try and put a purple background behind and have them stick up on top of the pattern.

Hmmm...food for thought...