Mon, 2009-09-21 16:41
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 
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 
Mon, 2009-09-21 21:39
#1
Smee wrote:When you reduce
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.
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 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;}
Mon, 2009-09-21 20:44
#2
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.
Mon, 2009-09-21 21:43
#3
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
Mon, 2009-09-21 21:55
#4
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
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
Mon, 2009-09-21 22:13
#5
Hi Gary - I was hoping you
Hi Gary - I was hoping you would pop by
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
Mon, 2009-09-21 22:26
#6
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/>
gary
Mon, 2009-09-21 22:36
#7
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}
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
Mon, 2009-09-21 22:54
#8
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
Tue, 2009-09-22 00:02
#9
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
Gary - I need the bookblurb attached to it's correct cover
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
Tue, 2009-09-22 03:14
#10
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
Tue, 2009-09-22 03:59
#11
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
//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
Tue, 2009-09-22 05:21
#12
Lots of things work that
Lots of things work that aren't necessarilly good practice.
cheers,
gary
Tue, 2009-09-22 07:51
#13
Thanks for fixing the
Thanks for fixing the link...and the advice 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
Tue, 2009-09-22 23:01
#14
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
Wed, 2009-09-23 07:31
#15
.
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
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
Wed, 2009-09-23 14:16
#16
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
Thu, 2009-09-24 06:53
#17
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! I finally decided this must be it...
* html #content { width: 800px; /* Star hack to set fixed width for IE6 */ }
...but it doesn't work 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
Thu, 2009-09-24 11:56
#18
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>
#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
Thu, 2009-09-24 13:11
#19
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
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
Thu, 2009-09-24 20:46
#20
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
Thu, 2009-09-24 22:35
#21
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
Fri, 2009-09-25 07:09
#22
I have now put in
I have now put in "sleight.js" for the logo...and it works!!! Sort of 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
Sat, 2009-09-26 09:45
#23
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.
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
Sat, 2009-09-26 10:21
#24
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Sat, 2009-09-26 10:39
#25
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
Sat, 2009-09-26 10:52
#26
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 
) 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.
Sat, 2009-09-26 10:58
#27
Believe me Hugo, I've been
Believe me Hugo, I've been measuring till I'm blue in the face! 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
Sat, 2009-09-26 10:59
#28
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
Sat, 2009-09-26 11:05
#29
I don't mind if that column
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.
Sat, 2009-09-26 11:11
#30
:D Mr Tony appears to be
: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?
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
Sat, 2009-09-26 11:20
#31
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
Sat, 2009-09-26 11:22
#32
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.
Sat, 2009-09-26 11:27
#33
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
Sat, 2009-09-26 11:34
#34
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
Sat, 2009-09-26 12:04
#35
On the image! attributes are
On the image! attributes are described on tags so I meant no '<img width="539"'
Sat, 2009-09-26 12:21
#36
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
Sat, 2009-09-26 12:31
#37
Okay...no images in the way,
Okay...no images in the way, #right is fixed width and still dropping
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
Sat, 2009-09-26 12:41
#38
I still see images. The
:shrug: I still see images.
The test site won't load again in IE??
Sat, 2009-09-26 12:49
#39
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
Sat, 2009-09-26 12:54
#40
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.
Sat, 2009-09-26 13:07
#41
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
Sat, 2009-09-26 15:08
#42
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"/>
cheers,
gary
Sun, 2009-09-27 01:43
#43
Gary wrote:V,
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. 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
Sun, 2009-09-27 04:50
#44
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
Sun, 2009-09-27 05:04
#45
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.
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.
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!
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
Sun, 2009-09-27 05:11
#46
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
Sun, 2009-09-27 05:46
#47
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
Sun, 2009-09-27 08:59
#48
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
Mon, 2009-09-28 00:30
#49
Quote:small duck in the
small duck in the fourth at Belmont
I've just seen this - unfortunately it didn't win...I spoke too soon, it's still not containing!
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