Hi John - thank you for taking the time to do that. Now I’ve summarized it all here - where you can clearly see the overlap:
http://www.greensmoothie.com/tmp/john.html
thanks! - Val
My logic says that since the 2 child divs are set in percent - 60% and 40% - the right 40% one should NOT float into the left 60%. Especially as the image widths add up to only 489px width (left img is 365px + right is 124px).
Going from your image the space available 562px.
60% of 562px = 337px
40% of 562px = 225px
Your left image is about 367px wide and is therefore 30px too big for the container it sites in - hence the 30px overlap 
You could just hide the overflow on the container (overflow:hidden) and have the image clipped.
Hi Paul - oh gosh, why didn’t I think of something so simple? Now I know that with my layout I have 558px available at 800x600 (what web-developer tools says is available there) - all I need do is calculate how many px wide each box is in the row (with its image, margin + padding) and see if that fits into the percent I gave it. And if it doesn’t, I clip the image (or margin). Thank you!
what does this mean? >You could just hide the overflow on the container (overflow:hidden)
I vaguely recall Ray had it in the original head he did (the area at the top where the subscribe form, tel #, google box etc is) - then somewhere along the line I must’ve removed it because I don’t have a single overflow rule in my css.
Should I put it in anywhere else? Does it go everywhere there’s width 100% because I see I have #head {width:100%}
thank you! - Val
If the container is width:40% and you add overflow:hidden to it then nothing will stick out as it gets smaller. The bits that would have stuck out will be invisible and have no effect on the layout.
Or you could just set a min-width equal to the size of your image to stop it getting too small if you wanted (min-width doesn’t work in ie6 though) .
You don’t want to apply it everywhere because then a scrollbar would never appear and content would be unreachable. However for certain elements it’s fine.
thank you! I’ll play with it.
Do you perhaps know why in the Comments section at the bottom left of the page, IE 6+7 (not 8) randomly displays some comments incorrectly (and their nested comments) - they’re right against the left margin of the parent, ignoring the parent’s padding. Then some comments display correctly with parent padding.
I’ve tried display:inline everywhere but it causes chaos wherever I place it. It’s so silly that it behaves so randomly.
If you click on “Older Comments” you’ll see on every page, IE displays a comment incorrectly seemingly at random.
Hi Val,
I changed the DIV ratios to 66% and 34% to coincide with the picture width ratios.
New Version: 001
http://johns-jokes.com/downloads/sp/greensmoothie/
.
It’s most likely a haslayout issue because you have complicated content contained in parent elements that don’t have a layout.
Try this:
.commentlist li{zoom:1.0}
If you don;t want to use zoom then use the height:1% hack for ie6 and min-height for ie7.
e.g.
.commentlist li{min-height:0}
* html .commentlist li{height:1%;overflow:visible}
Roy Ho replied at:
http://designintheraw.com/forums/topic/ie67-ignore-padding-in-comments?replies=3#post-19
>“Have you tried creating conditional CSS to target for IE6 and 7? Start there and use margin to push it away, not padding because the nested container is a separate block than the block you use to create the padding.”
Does anyone perhaps know how to do this?
thank you! - Val
I believe I already gave you the answer to this val - did you not try my fix from post #27?
Asking the same questions in multiple forums is bad etiquette. You should only do that when you fail to find an answer to your question.
I’ve just re-checked and the code I gave you and it fixes all the issues you mentioned in IE6 and IE7.
You should never just use alternate styles to fix code when you don’t know what the issue is. Only use alternate code when you know the problem is a known bug or behaviour. Adding conditional comments to add margin or padding to make things look right is a disaster waiting to happen.
99% of the time the issue in iE6 and 7 is haslayout or one of the other known bugs that are easily fixed once you find the trigger. Never just add code to fix something when you don’t know what the cause is.
Hi Paul - I’m so sorry, I didn’t see this thread had gone thro’ to p.2 (my browser kept on displaying my question as last post on Mar 31) so I thought no one knew the answer here (dumb me!) so then on Apr 3 I re-asked it in a wordpress forum.
>Adding conditional comments to add margin or padding to make things look right is a disaster
Thank you! That’s the problem with WP forums, my experience of them all is they’re hopeless, no one ever has a helpful reply in any of them! Makes sense that it’s almost certainly a known bug.
I’m so grateful you replied. I would’ve walked away from the other forum with my comments permanently looking bad in ie6/7.
>use the height:1% hack for ie6 and min-height for ie7
thank you! This works perfectly.
zoom:1.0 also works perfectly. Can zoom:1.0 always replace the 1% hack?
I stuck the 1% everywhere in my css because I thought its purpose was to allow expansion of a box - it’s on Content (text area), #txtnav (1st nav box between bottom leafy branches), #footernav (holds bottom nav boxes) and #footer (last box on page). zoom:1.0 would reduce load time.
Hi John - thank you! I also never saw your reply until today. I actually had switched it to 70/30 instead of clipping the left image. I hope to fit everything into my 10-increments (30,40,50 etc) so I don’t have too many classes.
A wordpress guy emailed me: “You have so many unnecessary classes and is bloated. In addition, your HTML has many unnecessary markup which is not semantic.” I don’t even know what he means by not semantic markup! It works for me and main thing is I know what’s going on (mostly)…
Anyway to try reduce classes, I switched all the bottom nav boxes from multiple ID’s to one class, but now the drop-ups are performing merrily… will start another thread.
thank you! - Val
P.S. I’ve added sitepoint link to my template footer so it’ll appear on every page as it’s converted into WP.
Can zoom:1.0 always replace the 1% hack?
zoom:1.0 can be safely used to apply haslayout to any element that requires it without the drawback that height:1% may have in cases where overflow has been hidden.
The reason authors avoid it in preference of the height:1% hack is that zoom is proprietary IE only code and will invalidate the stylesheet. However it is 100% safe and will do no harm.
You need to apply haslayout to containers that contain more than simple text. If a container holds child elements and floats or child elements with borders margin and padding then it should have haslayout applied. Usually you can do this by giving the element an appropriate width and avoid any hacks.
Don’t however apply it to all elements as that will have drawbacks and cause other bugs. Only apply it to the main block level containers that you are using. If a container just holds simple text and paragraphs then it is unlikely that it will need haslayout. But if it also contains a floated image then it is likely that it will need haslayout or the image will disappear.
Gosh thanks Paul - this is really helpful! Now I finally understand what all that 1% stuff is about Plus I can have .zoom rule in css so I can apply it individually in html if needed.
>then it should have haslayout applied. Usually you can do this by giving the element an appropriate width
Are you saying so long as the element has a width, then haslayout is not needed? e.g. inside Content, there’s Ralph’s .leafh2 (subheaders with leaf image on left) with width:100% + no haslayout. And John’s container div (this thread) with width 100% and no haslayout.
>Only apply it to the main block level containers that you are using
Are you saying if it’s on a parent block then can we leave it out of all child blocks? OR it always should be on a child block if that child has no defined width? Because I see we (which probably means you!) have it on the parent block #footernav and also on the child .navbox’s inside that parent.
I understand now why google has zoom in its code for a google search box on page. Tho’ I see I have this in my css from google:
.se-btm {margin:0; padding:0}
/zoom:1 in google but omit 'cause wrecks ie6/
/se-btm is the container for search form with floated google img + text “Search this Site”/
so google wants me to put a zoom:1 there (not 1.0 tho I guess they’re the same thing?) but when I did, the whole google container broke down in IE6. So I left it out but at least now I know what google is meaning to do! I’ll try zoom 1.0 + see if that works in IE6.
thank you! - Val
Yes if the element has a dimension (width or height) then it already has a layout. Some elements like floats also have a layout at all times. there is a full list here in the section I wrote on haslayout.
>Only apply it to the main block level containers that you are using
Are you saying if it’s on a parent block then can we leave it out of all child blocks? OR it always should be on a child block if that child has no defined width? Because I see we (which probably means you!) have it on the parent block #footernav and also on the child .navbox’s inside that parent.
[/quote]
It depends on what the function of the child element is but In IE you cannot position a child element properly from a parent that doesn’t have haslayout.
If you have two parents then there must be a reason why you have two and not one so you must be doing something with the second one and I would ensure that it is in haslayout mode if it contains more than simple text.
so google wants me to put a zoom:1 there (not 1.0 tho I guess they’re the same thing?) but when I did, the whole google container broke down in IE6. So I left it out but at least now I know what google is meaning to do! I’ll try zoom 1.0 + see if that works in IE6.
thank you! - Val
zoom:1.0 and zoom:1 both have the same effect and you can use either (but it is defined as a floating point number so I guess it should be 1.0 but I’m not a scientist).
Hi, what about it exactly was he supposed to cehck out? It’s not doing anything special :).
thank you Paul - very grateful - I thought you were a rocket scientist…
best, Val
Hi Pam,
Did you check out http://johns-jokes.com/downloads/sp/greensmoothie/john-001.php?max_width=12000 ?
cheers,
John_Betong
- Is there a way to center this containing div so the 2 images floating inside will be centered in the middle of page? Without using a table?
- If there’s a way to do it without table, then is there a way to keep the caption within the image width? Something along the lines of Paul’s:
The link is a solution to the original questions stated above.
The script is enclosed in a loop that centers both the images and text from a maximum screen width (input) down to 200px in 200px steps. The script does not use tables or any browser hacks.
.
- Yes :). The easiest way would be assigning the containing div of hte floats a width and then margin:0 auto, although if you want it flexible then it’s still possible, just slightly more complicated.
I’m not saying CSS is better then tables for everything, I’m just saying semantically wise, it’s better
2) Yes there is, check the CSs quizzes (faq at the top) and in a recent quiz (a few ago) we discussed how to keep captions at the images width.
Hi John - the new code is too complicated for me, but thank you for showing me the possibilities
I’m very happy with your original code which I can apply to meet multiple needs on multiple pages without having to create any new css for a specific need - see my post #12 on page 1 of this thread.
thanks! - Val