MS#10 - msavers going live...

455px min-width + margin: 0 2%; is a lot less than 778px (page min-width) and it's still dropping

I don't get why you simply don't remove that fixed width altogether and allow the box to find it's natural width given the constraints, it looks fine being fluid and 100% wide. You have to understand the nature of the style layouts you are working with if you have chosen a fluid layout then to some extent the content elements must also be fluid so the whole layout adjusts and in the case of floated elements that often means that different positions of elements will occur at different widths if this is undesirable then you must set fixed width layout or ensure that any fixed width within a layout add up to less than the page/body/viewport min width so that your layout stops shrinking before those combined fixed widths become an issue.

Actually your right in that I was probably trying to over-control it. And I do understand that things will jiggle around - I just want that to be predictable! I'm not objecting to the jiggling - I'm objecting to the float drop

Fixed width? I took out the min/max and the matching CCs stuck clearfix back on deb-box and it shrinks and stretches beautifully in Mac-FF3 and XP-IE6. Only problem is still that the float drop happens depending on the width of the browser.

Well I really don't know what to do in that it works now, sort of. I keep referring to "float drop" when in fact #content isn't floated - so it's probably better described as #content drop. It is dependent on resizing the browser window and it only happens on the Home page with the box on it.

The reason I think I originally put the min-max on the box was I thought because it was contained in something that had it, it would have to as well. Now I know it doesn't, one tiny step

Hmmm...I'm beginning to wonder whether the content drop/jiggling is being caused by the Virtual Box installation of IE/XP. I would appreciate it if there's anyone with an IE installation on a PC (rather than under VMware or VBox) who can have a look and tell me if this page has any content drop when you have the browser at full size and then progressively bring in the side.

I just did some Browsershots for IE6, 7 & 8 and the IE8 appears to have a problem but is running under VMware. Please see attached - would be happy if someone can confirm this for me.

Look at the nature of the drop it isn't strictly what we would refer to as 'drop' in the normal sense, as it jigs back and fourth; drops then on next pixel decrease springs back up, look at your widths margins etc look for rounding problems where a value is not precise and the browser has to round up or down, look for possible elements that need hasLayout and it is noot your VM causing the issue a VM is a stable instance of an OS it won't cause issues itself or shouldn't.

.

Sir Hugo! (<---animated)

My flabber is gasted!!!

Thank you, thank you, thank you for spending so much time chasing this down for me!

Yes, while you have mentioned removing code to identify the problem, I still would never have twigged to this. After all, it is valid code and in the right place seemingly with no conflicts.

Good to know the VM doesn't affect things, ummm...what about that large margin gap in the pic I attached for IE8?

Ah, typo, ta muchly. It was commented out and now I know I don't need it I'll remove it alltogether.

I have a couple of change requests, including the addition of a "newsbox" :rolleyes: so now I can move on with them.

{{mwah}} *Trots off happily to to change things and see what else she can wreck*

*whimper* It's still there. Not as often but it can be triggered and there's no more italics in #content. It also does it if you increase the text size just once.

Hi Chris...sorry I completely missed seeing your post before logging off a little while ago - just got the notification.

Yes, I've wondered about the fact that I had just left the #content to find it's own place. I madly (well progressively) stuck the clearfix on all the divs a bit further back. Which if any should I remove?

I'll go and make your changes now - thanks for popping in

Yesssss!!!! *clapping hands wildly for Chris*

I took the display:inline-block out of #content and also the following clearfix reset to block. I left the clearfix proper on #content in the markup.

Thank you soooo much!

ETA: Have just realised that the .clearfix will reset to block anyway because of the original specification. It's now on wrapouter, navholder, wrapinner and sidebar as well as content. I can't remember which one it was originally put in for but I will go back and read the thread to see if that helps.

Oh - allright Gary Best Reply moved to Chris

But this is an instance where I needed two! Certainly Hugo's detective work did eradicate the majority of the ticklishness.

Huh? What'd I say?

Of course, if you'd been willing to use the CLI, none of this would have happened.

cheers,

gary

:D

Just between you and me, except you can deal with Hugo's hurt feelings

Aaaaugh!!! I've just been putting the content-wrap in other pages and I go to look and the footer's moved to half-mast on all the pages except the Home page.
What's happened to my footer in XP-IE please?

Silly browser. Try making sidebar margin-right: -246px and #content width: 99%;

*sigh of relief* Changed and it seems to work. Thanks Chris - you have no idea how many hours I've spent since 8pm last night trying to figure what I'd somehow changed! But why -246px ? Why not -247px which is what the actual margin is. are you allowing somehow for the borders?

My next problem is why the link in the blue box on the Home page doesn't work, while the one on the Fees page does! I've copied the code from the fees page so that it's identical but I do realize that there's an extra bit below it on the Home page

ETA: Oops! Forgot to say this time it's in Mac-FF3 - works in XP-IE

IE6 seems to need to have 1px of effective width for the clearing to work.

Put position:relative on #sidebar to bring it higher than #content.

Clearing - oh. As you said "silly browser"

Speci...specif...spe...that thing. I actually think I'm right now for a while! Trying to tidy up all files and make sure they match.

Mind you...you'll soon hear if I'm not

Thanks again Chris.

Well, it's taken me this long to make/match changes to every file. Have just loaded them to the live site but the MHFA Courses tab has a problem.

You can't get to the drop downs now (because of the sidebar specificity?)

And can someone please tell me if that extra > is above the navbar? I've corrected and reloaded it and cleared cache but XP-IE6 doesn't seem to recognise the fact.

Note: this is now the live site

Thank you

This isn't specificity. Specificity is about which CSS rule applies to an element when two rules attempt to affect the same property on the same element. This is to do with which element ends up on top of which other element in the vertical (z) axis.

Later elements are higher than earlier elements. That's why content was higher than sidebar. Elements with position are higher than elements without position, which is why giving sidebar position fixed the problem with content overlaying the sidebar. Now the sidebar and the menu drop downs both have position and the sidebar comes later so it is overlaying the menu. You've two choices:

• put the sidebar after content in the source, then you should be able to remove position:relative from the sidebar and still have the links appear. The menu will now be the only thing with position, so it's links will be above the sidebar.
• organize z-index so that the menu flyout is higher in z-order than the sidebar. This is easy for compliant browsers, but not so straightforward for IE. IE is really only capable of z-ordering siblings. For your layout this means giving position:relative to both #navholder and #innerwrap and setting a z-index higher than 0 on #navholder. #innerwrap doesn't need z-index. There may (or may not) be other side-effects from these changes.

Sorry Chris - I didn't get back to this yeaterday and only have afternoons free the rest of this week.

I've taken the pos:rel out of #sidebar, the rest is the same except I've also removed the clearfix from everything except #navholder which is how it was originally.

Source order appear to work!

Now back to the test site. I'll check again this afternoon - thanks.

Well everything seems to be steady and stable, not to mention in the right place which always helps.

Thank you, loaded to the live site.