49 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

When you reduce the browser window the logo gets chopped off here. I know it's because of the #sitetitle width:38% - but I don't know how to make it shrink, or at least can't think of how to make it shrink at this time of the morning. I also need the text underneath to stay together on one line and putting an   in didn't work.

I also can't contain my floats here. Yes, I've been to Gary's site...I've tried copying other code I've done - but it's just not working Sad I want the descriptions alongside the books please. The nerve of that bottom book cover :mad:

Help 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

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 29 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Smee wrote:When you reduce

Smee wrote:

When you reduce the browser window the logo gets chopped off here. I know it's because of the #sitetitle width:38% - but I don't know how to make it shrink, or at least can't think of how to make it shrink at this time of the morning. I also need the text underneath to stay together on one line and putting an   in didn't work.

I dont see any issues like you explain above.

Smee wrote:

I also can't contain my floats [url="http://eft-adv.freehostia.com/eftadvantage-resources.php"]here.[/url] Yes, I've been to Gary's site...I've tried copying other code I've done - but it's just not working Sad I want the descriptions alongside the books please. The nerve of that bottom book cover :mad:

This works for me. Would this be better as a list?

.entry p {overflow: hidden;}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Smee, Nice looking

Hi Smee,
Nice looking site.
You have the logo as a background image, so you wont be able to do much with CSS to manipulate the size.
It might be possible to resize it via jQuery, it's not something I have ever looked into.

If the logo was not a background image you should be able to resize it via CSS or jQuery. It would also be better for printing, as most browsers don't print background images by default, and would have more SEO weight.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

I'd structure more like I've

I'd structure more like I've done below, or similarly, using <li> in place of <div class="book">. The <ul> would wrap the whole thing. To enclose the floats, there must be a container around them and their static siblings.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <title></title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
 
h2 a {
    color: black;
    text-decoration: none;
    }
 
hr {
    border: none;
    background-color: lavender;
    color: lavender;
    height: 2px;
    }
 
div.book {
    overflow: hidden;
    }
 
.book img {
    border: 1px dotted black;
    float: left;
    margin-right: 1.25em;
    }
 
.bktitle {
    display: block;
    }
 
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div class="entry">
    <h2><a href="eftadvantage-resources.php">Recommended
    Reading</a></h2>
 
    <hr />
 
 
    <div class="book">
      <p><img src=
      "http://eft-adv.freehostia.com/adv-images/tn-why-zebras-dont-get-ulcers.gif"
           alt="cover of Why Zebras Don't Get Ulcers"
           width="122"
           height="187" /><b class="bktitle">Why Zebras Don't Get
           Ulcers: An Updated Guide To Stress, Stress Related Diseases,
           and Coping</b> <cite>Robert M. Sapolsky (Holt Paperbacks,
           2004, 2nd ed.)</cite></p>
 
      <p>Sapolsky, a Stanford University neuroscientist, combines
      cutting edge research with a healthy dose of humor and practical
      advice to explain how prolonged stress causes or intensifies
      mental afflictions. He highlights the studies that suggest we do
      have some control over stress-related ailments, based on how we
      perceive the stress and the kinds of social support we have.</p>
    </div>
 
    <div class="book">
      <p><img src=
      "http://eft-adv.freehostia.com/adv-images/tn-reinventing-medicine.jpeg"
           alt="cover of Reinventing Medicine"
           width="119"
           height="193" /><b class="bktitle">Reinventing Medicine:
           Beyond Mind-Body to a New Era of Healing</b> <cite>Larry
           Dossey, M.D. (HarperOne, 2000)</cite></p>
 
      <p>Dossey contends that we are entering an era of the "non-local
      mind" and that consciousness can accomplish healing outside the
      confines of one's brain and body, influencing distant events,
      people and circumstances. An interesting read if you can suspend
      skepticism for a while.</p>
    </div>
  </div>
</body>
</html>

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

Hi Cupid... ummm I'm using

Hi Cupid...
ummm I'm using FF3 and OS X and once you reduce the browser window past the min-width where the bottom scrollbar kicks in, you should see the logo start to disappear from the right - a bit like the Cheshire Cat's grin Smile

Cupid wrote:

This works for me. Would this better as a list?

I knew it should be overflow:hidden but I stuck it on #content last night - no wonder it didn't work :rolleyes: Unfortunately, it doesn't contain that bottom book for me with .entry p either.

I wondered about a list but I've never done one with the image changing like that, this should work, I know I'm missing something simple.

Hi Tony
Thanks for the compliment, that cheers me no end because I was starting to think it was a bit dull. Oh dear, as you will see below I'm up against it timewise today and I do not know anything about jquery and haven't time to learn!

It's also completely screwed in IE6 I just discovered - going to have to change the logo to a gif. It must work in IE6 because most of the people the info will go to are in govt depts who use it.I'll put my thinking cap on as to how to take the logo off the background - any pointers guys?

Problem is I have to throw at least the Home and Contact pages up in about 6 hours because the advert for the workshop is going in the Mental Health brochure and newsletter later today and it sends them to the site to register!!

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

Hi Gary - I was hoping you

Hi Gary - I was hoping you would pop by Smile

I've just put it up (leaving the h2 as it was because it's used all over the site) but the books aren't clearing - I put in a clear:left but it isn't making any difference. I've only done the top two books for the moment till I get it working.

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Where's the {overflow:

Where's the {overflow: hidden;} on .book?

//edit: Also, close the

instead of the

<cite>Robert M. Sapolsky (Holt Paperbacks, 2004, 2nd ed.)</cite>
<br/>
The next paragraph, about the author, is a, um, paragraph all in its ownself. --gt

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

The overflow was there but I

The overflow was there but I left the clear:left in. They're all down the bottom of the css. All changes made and it works!!! {mwah} 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

Ack! Spoke too soon...it

Ack! Spoke too soon...it worked bayoodiflee till I put the margin-bottom on book img to separate them a little more...

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

Cupid you were almost right

Cupid you were almost right - it had to go on #entry itself. At least that's how it appears at the moment Smile

Gary - I need the bookblurb attached to it's correct cover Sad

ETA: It's now a list
****BEST REPLIES TO BOTH OF YOU****
Cupid for the idea
Gary for the "how to"

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

The blurb is associated with

The blurb is associated with the book cover/title/author by being a member of the list item. The list item provides the context.

The bottom margin goes on the [li] if you want separation.

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

Ah! Well since you left me

Ah! Well since you left me to my own devices for a while I ended up putting it here-

.book img {clear:left; float:left; border: 1px solid black; margin-right: 1.25em; margin-bottom: 3em;}

and it works! Have a look

Am now struggling through node 18715 on png hacks since changing the logo to a gif didn't work.
Then I'll have to come to grips with Tony's suggestion of moving it to the markup so that the css can shrink it. I have to go and give a class now for a couple of hours and I'll only have tonight to get this sorted.

By the way if Chris passes by...thanks for leaving the vikingprincess pic in your temp folder - the website's gone so that pic is the only reference to go by for the thread - do wish you'd waited for the middle bit though Smile

//edit: Link fixed. Don't quote the url, i.e [ url="example.com"] --gt

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Lots of things work that

Lots of things work that aren't necessarilly good practice.

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

Thanks for fixing the

Thanks for fixing the link...and the advice Smile I'll get to it when this panic is over.

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've had multiple

Well, I've had multiple problems so the site is just going to have to go live with the ugly banner image in IE6 for the moment.

Would some kind soul check IE7/8 for me please and also tell me why I've got float drop on the Contact page in IE6?

Thanks as always.

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

.

The site is live here

Logo - I've made it smaller so at least it doesn't get chopped off in FF3 which behaves itself as far as the min-width goes on OS X. It's still got this darling blue background in Win IE6 :rolleyes:

Right column - this is still dropping in IE and I'm guessing it might be because there's no min-width conditional comments for IE so there is nothing to stop the columns shrinking forever.

I'd still like to know that it looks okay in IE7 and 8 if someone has a moment please.

ETA:
I put in the CCs from the msavers and it appears to have no effect whatsoever on virtual box Win IE6 - nothing stops at the min-width! The columns have also moved down a bit and the top of the green box is chopped off - I think this is overflow:hidden that's doing this - help 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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

IE7 supports min/max width,

IE7 supports min/max width, so using the * html hack in your style sheet will take care of IE6 without throwing CCs into the mix.

The column drop is due to the image at the top. As the column tries to shrink, the image stops it cold. To #right, add {zoom:1;}.

IE8 behaves.

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

Sorry, got waylaid by having

Sorry, got waylaid by having to do a flyer for something.

Now...next time, could you please tell me what it is I'm supposed to put in that hack? You give me too much credit - I've just spent the better part of an hour and a half hunting down html hacks! Smile I finally decided this must be it...

* html #content {
  width: 800px;			/* Star hack to set fixed width for IE6 */
  }

...but it doesn't work Sad I've taken my CCs out and the thing's still fully liquid with float drop in VB Win IE6

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

What is this, then?<style

What is this, then?

<style type="text/css">
/* liquid layout for IE */
<!--[if lte IE7]>
    #wrapouter { width: expression(document.documentElement.clientWidth < 700 ? "700px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); }
    #wrapinner { width: expression(document.documentElement.clientWidth < 700 ? "700px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); }
<![endif]-->	
</style>
Do this:
#container {
  width:92%; 
  min-width:700px; 
  max-width: 900px; 
  ...
  }
 
* html #container {
  width: expression(document.documentElement.clientWidth < 700 ? "700px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); 
  }

Did you apply the fixes I gave you for the float drop?

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

Sorry Gary...didn't hear the

Sorry Gary...didn't hear the email come in.

Ah...you see? I had the * html on the wrong div asnyway and since I wrote that post I have been trying everything I could think of - even to going to the 1024 fixed! (But it's back to the one you were working with now)

I have also commented out the greenbox and taken off the italics. Yes I put zoom:1; on #right. I have also taken out the CCs.

We are now back on the my test site (I haven't touched the live site.)

It's better in IE6 - but there's still something screwy going on. Thank you sooooo much, the coordinator for the "week" is sending out a newsletter with a blurb about my workshop tomorrow so I'd like it to be stable and we are definitely almost there Smile

ETA: forgot to say I also moved the .subcontainer up from above .testimonials to just under #right.

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

That * html hack should be

That * html hack should be directly after the selector it is meant to override.

The "man as" image appears to be the culprit on the test page, holding the column width, and not letting it shrink properly.

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

There you go...I always

There you go...I always thought it was like reset and had to go at the top.

BUT it's HEAPS better! And no - "man as" doesn't appear to be the problem, it shrinks fine on mine - so does Brucey Baby!!!!

It's #right or #content that won't stop wrapping and so eventually drops.

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

I have now put in

I have now put in "sleight.js" for the logo...and it works!!! Sort of Sad Why has it stretched the logo AND the background 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

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've taken sleight out for

I've taken sleight out for the moment till #right gets sorted.

I bit the bullet and updated the live site and the right column drops in IE6 at about 860px as far as I can tell. It appears to be when the gap between the #left and #right containers disappears - which makes sense I guess. It's quite stable in FF3.

I've also made the green box smaller.

live site

test site

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 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Vicky Gary alluded to the

Vicky Gary alluded to the issue.

Images have a fixed pixel width, you are trying to shrink your layout to a width less than tat of the images.

700px :? why? ~760px used to be the accepted width to accommodate 800px screens, as no device is ever made with that resolution anylonger it's pointless (yes we're ignoring mobile devices for the moment before any bright spark chimes in :mad: )

Increase the width!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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 but I've just

Thanks Hugo but I've just changed it to this...

 * html #container {
  width: expression(document.documentElement.clientWidth < 760 ? "760px" : document.documentElement.clientWidth > 1024 ? "1024px" : "95%"); 

}

...and as far as I can tell, it's still ignoring it - didn't I do it right?

Oops! Test site only

EDIT: ...and I'm past caring WHERE it stops - I just want the @#$$%^& thing to STOP!!!

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 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I didn't say 760px was the

I didn't say 760px was the answer but pointed out the problem, If I measure the layout (your job really Wink ) I can see that in reality you need a min-width of around 900px to maintain the layout.

It's not just the physical width of the images it's the fact that you are attempting to sit them in fluid containers, these containers still shrink to less than the image widths.

Remove the body-as-garden graphic to check how IE6 behaves.

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

Believe me Hugo, I've been

Believe me Hugo, I've been measuring till I'm blue in the face! Smile I came to the conclusion about 3 hours ago that I'd be happy to fix the width of #right to about 275px - I don't mind if that column doesn't shrink, the left one will and that's okay. Shall I just put width: 275px on #right?

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

Ooops! didn't see the

Ooops! didn't see the body/garden line. Which will it be?

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 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I don't mind if that column

Quote:

I don't mind if that column doesn't shrink, the left one will and that's okay. Shall I just put width: 275px on #right?

try it and see, but think about it as it will still break , you have to ensure that there is enough room for body-garden graphic within it's parent.

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

:D Mr Tony appears to be

Laughing out loud :D Mr Tony appears to be playing! I just did and you're right - however I did think earlier that I got the picture on the 'ducks' home page to shrink, why can't I do the same to body-garden?

ducks home pic

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

In fact that's exactly what

In fact that's exactly what I want to happen....now that I've fixed #right to 275px, pretend that the ducks is #left - now how do I make that happen?

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 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ensure no width attributes

Ensure no width attributes and in CSS on img.whatever state that it's whatever percentage of the parent width, this might all fall apart as you have percentages all over the place though.

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

Sorry...ensure no width

Sorry...ensure no width attributes where...on left?

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

okay...did that...didn't

okay...did that...didn't work ( no right col at all) so I put the width:68% back on #left - bodygarden is shrinking but #right is still falling.

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 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

On the image! attributes are

On the image! attributes are described on tags so I meant no '<img width="539"'

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

Ah yes well I tried several

Ah yes well I tried several versions while you were gone and just loaded the last...I'm too frightened to look anymore, you tell me. I'm also to anxious to tap (plus my fingers are busy) so I'm eating icecream like there's no tomorrow! :rolleyes:

ETA: Have another look - I put the width:68% back on left

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

Okay...no images in the way,

Okay...no images in the way, #right is fixed width and 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: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I still see images. The

:shrug: I still see images.

The test site won't load again in IE??

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

Yes but they were totally

Yes but they were totally liquid and behaving themselves - howsumever...since you insist I took them out. Yes it does, I was prolly FTPing

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 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

fluid image: (the

fluid image: (the body-garden image)

on the parent div :

width:90%;margin:0 auto;text-align:center;

on the img tag no dimensions declared

that is a fluid image that will shrink and expand.

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 have the fluid bodygarden

I have the fluid bodygarden image but I took it out for you to see that #right still drops. I can't put 90% on it's parent div because that's #left - which will leave no room for #right - I know because I tried that too.

ETA:
I think #right drops when the 70% margin meets #left - it just won't stop beforehand and that's got to do with #content which holds #right & #left and has width:100%

ETA#2:
So can we put min-max on #content?

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

V, darlin', you're throwing

V, darlin', you're throwing too much stuff at the wall, hoping for stickage. Take Hugo's suggestions, one at a time, and apply them exactly. If you change more than one thing at a time, without determining what the change did, you have a cluster you-know-what, where no one knows who's doing what to whom.

For example, I looked again at the "image of man" thingie. It is, without doubt, a cause of IE's dropping the right column. If you drag the window smaller in Firefox, you can watch as the left column becomes narrower than the width of the image. Bingo! The first step is to delete the height attribute (you want the aspect ratio to be auto-maintained), then edit the width attribute like so:

<p>
<img <span style="color:red">width="90%"</span> alt="Comparison of the body as machinery and as a garden" src="adv-images/body-as-garden-3.jpeg"/>
Or, you may compute the narrowest width for the left column, and make the image's width attribute some smaller value.

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

Gary wrote:V,

Gary wrote:

V, darlin'...

Gary m'love, you were looking at the live site which I was not updating while trying to sort out the column drop. Wink Hugo and I had moved back to the test site.

However...I have now updated the live site with the dynamic bodygarden image and the test site has no bodygarden image and the #right column still drops. Pleeeease let's stick to the test site till this is sorted.

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

I went to the live case

I went to the live case precisely because you had removed the image, without, to my knowledge, having fixed that issue. You were, in effect, moving the strike zone while the pitch was on the way. Naughty girl.

Now, to the right column. Why have you not applied the fix I gave you? It works.

What you have now is a mess. The column's content width is 275px, and its left margin is 70% of the total width, which ranges from 550px to 1200px. At 550px, the 70% margin is 385px. Add that to the 275px that IE<8 holds the right column to with hasLayout (modern browsers let it simply overflow without screwing with the column's width), and you have 660px; more than can be supported.

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

Eeek! No email

Eeek! No email notification!

Oh Gary! You managed to look at it while I was trying other things! I've put it back the way it was.

Quote:

I went to the live case precisely because you had removed the image [in the test site], without, to my knowledge, having fixed that issue.

Hugo suggested I remove the bodygarden image to see if #right stopped dropping without it. And the answer is no it doesn't.

Quote:

The column's content width is 275px, and its left margin is 70% of the total width, which ranges from 550px to 1200px. At 550px, the 70% margin is 385px. Add that to the 275px that IE<8 holds the right column to with hasLayout (modern browsers let it simply overflow without screwing with the column's width), and you have 660px; more than can be supported.

THANK YOU!! for explaining what I could see but couldn't understand!

Quote:

Now, to the right column. Why have you not applied the fix I gave you? It works.

I honestly thought I had at one stage and that it didn't work for me. I'll go and reread and do it again.

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

Okay - your CC in and the

Okay - your CC in and the image back in the test site.

Image shrinks, #right drops.

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: 12 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

The fix is in: small duck in the fourth at Belmont

To #left add {margin-right: 2%;}

To #right add {overflow: hidden;}, change margin-left to 0, and delete the width property.

In #right .subcontainer, delete the width property.

For IE6, add * html #right {zoom: 1;}.

Set the #container min-width to some sane value, say 760px.

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

YES! but "ticklish" I knew

YES! but "ticklish" I knew it was that ruddy 70%!

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:small duck in the

Quote:

small duck in the fourth at Belmont

Big smile I've just seen this - unfortunately it didn't win...I spoke too soon, it's still not containing! 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