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

455px min-width + margin: 0

455px min-width + margin: 0 2%; is a lot less than 778px (page min-width) and it's still dropping 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: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I don't get why you simply

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.

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Actually your right in that

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! Smile I'm not objecting to the jiggling - I'm objecting to the float drop Sad

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.

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well I really don't know

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 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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hmmm...I'm beginning to

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.

AttachmentSize
MSIE 8.0 _ Windows XP.jpg 113.46 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: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Look at the nature of the

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.

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

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

.

.

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sir Hugo!

Sir Hugo! (<---animated)

My flabber is gasted!!!

Quote:

right just spent the better part of a precious hour and a half sorting this for you and...

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

Quote:

It wasn't until I had removed a specific element group that I had the culprit and even then I missed the real cause, until i spotted it by chance; you have used the italic tag...

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?

Quote:

you also have an error in your embedded CC styles fix please.

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*

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

*whimper* It's still there.

*whimper* Sad 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.

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE6 doesn't give you the

IE6 doesn't give you the tools to work out what is happening, at least not simply. I don't use unfloated content next to floated content in layout blocks, I think its too flakey.

This will fix your problem.

#sidebar { margin-right: -250px; }
#content { width: 100%; margin: 0; padding: 0; float: right; }
#content .content_wrap { 
	margin-left: 247px;
	padding: 30px;
}

The styles are set to cancel out some of your current styles. If you merge them into your existing stylesheet you should be able to simplify things. It also requires adding a wrapper inside #content, e.g.

<div id="content" class="clearfix">
<div class="content_wrap">
....
</div>
</div><!-- ends content -->

Your styles are kind of messed up. You are using clearfix but you also overflow:hidden AND you also have a clearing element and you also have a footer which could be doubling up as the clearing element. You're using display:inline-block followed by display:block in clearfix and other elements in such away that everything will get display:block.

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

Hi Chris...sorry I

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 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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yesssss!!!! *clapping hands

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

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! Smile

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.

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Oh - allright Gary Best

Oh - allright Gary Laughing out loud Best Reply moved to Chris Tongue

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

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Smee wrote:Oh - allright

Smee wrote:

Oh - allright Gary Laughing out loud Best Reply moved to Chris Tongue

Huh? What'd I say?

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

:D Just between you and

Laughing out loud :D Tongue

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

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Aaaaugh!!! I've just been

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. Shock
What's happened to my footer in XP-IE 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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Silly browser. Try making

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

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

*sigh of relief* Changed and

*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

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE6 seems to need to have

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.

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

Clearing - oh. As you said

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 Smile

Thanks again Chris.

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well, it's taken me this

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

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

This isn't specificity.

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.
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry Chris - I didn't get

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! Smile

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

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 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well everything seems to be

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. 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