[css-d] Question about how to handle div height with floating children
The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. This is illustrated on page: http://www.xxaxxsoft.com/cssdiscuss/test.html I can hack my way around this by setting the height of the div explicitly. Or, I can also put something like div style=clear: left/div inside the parent div after the image. This seems to trigger the image's height being used to calculate the height of the div. But I would like to understand why this is happening and have some idea of the best practice for handling this issue. Any hints would be much appreciated. Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about how to handle div height with floating children
--- On Fri, 3/19/10, Claude Needham gxx...@gmail.com wrote: The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. But I would like to understand why this is happening Here's my explanation: http://www.fiveminuteargument.com/float-container and have some idea of the best practice for handling this issue. I'm not sure if it's considered *best* practice, but a very common technique is to apply 'overflow: hidden' (or another non-default overflow value) to the container. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about how to handle div height with floating children
The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. This is illustrated on page: http://www.xxaxxsoft.com/cssdiscuss/test.html I can hack my way around this by setting the height of the div explicitly. Or, I can also put something like div style=clear: left/div inside the parent div after the image. This seems to trigger the image's height being used to calculate the height of the div. But I would like to understand why this is happening and have some idea of the best practice for handling this issue. Any hints would be much appreciated. This may help: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context. asp -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 more problems (div width issues)
On Mar 19, 2010, at 2:37 AM, Peter Abramowicz wrote:
On 18/03/2010 2:40 PM, Rory Bernstein wrote:
Hi All, me again.
http://rorybernstein.com/francesca_proto/book1.html
So, I now have a new page. On the URL above, I have 2 problems:
1. I want the div called #book_images to have the images it containts to sit
on the bottom of that div (bottom aligned). I tried changing the position to
absolute and using bottom: 0; but it does not work; it puts the whole div in
a totally different place (moves it up and almost totally out of the
window). Here's the rules for that div now (the blue border is just so you
can see it better):
#book_images {
position: relative;
border: 1px solid blue;
width: auto;
overflow: hidden;
}
2. I want that same div to always be just as wide as it needs to be to
contain whatever images might be there, as they go out horizontally to the
right. If the images are fewer, I don't want the page to scroll out farther
than it needs to go. Currently, its parent-parent container
(#nav_item_container) has a fixed width; if I don't use this fixed width,
the whole div moves down under #nav. And, I don't want to break the layout
if the images that get put in there exceed that width. How do I code this
for a variable width in the best way? Part of the trouble seems to be that
my #nav div has to have a fixed width (200px), because it has text in in
that I want to wrap if that text gets longer (don't want the text in there
to push that div wider). So, since that has a fixed width, the layout gets
messed up if I don't set a fixed width for the parent-parent div. Am I being
unreasonable to expect that I can have a changing width for this div, and
that they will always keep going ou
t
to the right, and keep the scrollbars to always fit to the existing width
of the images, even as that changes? This will go into a CMS and the client
will have the freedom to put a lot of images in there, and I want it to work
at whatever width those images turn out to be.
Thanks in advance,
Rory
Try this:
#nav_item_container {
}
#item {
padding: 0 0 20px 0;
}
#book_images {
white-space: nowrap;
}
#book_images img {
padding-right: 10px;
}
--
Peter Abramowicz
Arachne Web Designs
403.990.6016
www.arachne-design.com
Peter, thank you for this solution. It works perfectly. Now I just have to ask:
How are the photos in #book_images being aligned to the bottom of the div? I
don't understand what makes that happen. There doesn't seem to be any rule for
that. I am mystified!
A new question for everyone!
On this page:
http://rorybernstein.com/francesca_proto/book1.html
The text in the left nav that is contained in span class=small is not
getting as small as I want it (this the black text starting with The Portraits
of Francisco Clemente...). This is the CSS for .small:
.small {font-size: 0.8em;}
But I can't seem to get it go go any smaller. The rule works when I make the
text bigger. Is there some sort of floor to font-size that won't let me make
it smaller?
Thanks for your help with the horizontal div problem; much, much appreciated!
Rory
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE problem
I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
I was able to get it to display with IE dev tools by adding zoom: 1 to the contentWrapper id to trigger haslayout. On Fri, Mar 19, 2010 at 11:28 AM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
CSS validation is pointing to a style sheet that cannot be found. Also, there are some HTML validation errors. About half refer to how the phrase b b is being treated, but there are some div related errors. Bill B Atkinson, Sarah wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
On Fri, 19 Mar 2010 11:28:11 -0400, Atkinson, Sarah wrote: | I have been working on this yesterday and today And I simply can't figure it out. | It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. | | http://test.grantstinn.com/ You have errors: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Ftest.grantstinn.com%2F http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Ftest.grantstinn.com%2F -- David Postill Dance your Life - Biodanza in Holland - http://www.danceyourlife.eu __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
Atkinson, Sarah wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ __ I'll tread very lightly here, Sarah. There seems to be a lot of styles that are either redundant or conflicting. I did not examine them with any rigor, it is a first impression. Also, it looks like you are linked to five different external style sheets. Are they all necessary? There may be conflicts between/among them that would be hard to track down. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about how to handle div height with floating children
Bobby: http://www.fiveminuteargument.com/float-container Thierry: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp Thank you both for the explanations. I think I have a much better idea why this behavior is necessary as the default. And I have a better idea on how to handle it. I must say though, that Thierry's article reintroduced me to the hell in a can of worms known as cross-browser compatibility. Periodically I make resolutions (of the New Year's variety) to be more cross-browser compatible. Then I fall into blissful sleep forgetting about everything other than Firefox and IE7+. Now at least I have another resource when making fresh attempts to handle those other browsers properly. Thanks for the help. Much appreciated. Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
I'll tread very lightly here, Sarah. There seems to be a lot of styles that are either redundant or conflicting. I did not examine them with any rigor, it is a first impression. Also, it looks like you are linked to five different external style sheets. Are they all necessary? There may be conflicts between/among them that would be hard to track down. Bill B Those have to do with Wordpress Plugins... Some of the plugins auto load their own stylesheets. Wordpress is a decent CMS but it does have issues with massive amounts of loaded files and it makes a mess of CSS files and JS files. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
Atkinson, Sarah wrote: I'll tread very lightly here, Sarah. There seems to be a lot of styles that are either redundant or conflicting. I did not examine them with any rigor, it is a first impression. Also, it looks like you are linked to five different external style sheets. Are they all necessary? There may be conflicts between/among them that would be hard to track down. Bill B Those have to do with Wordpress Plugins... Some of the plugins auto load their own stylesheets. Wordpress is a decent CMS but it does have issues with massive amounts of loaded files and it makes a mess of CSS files and JS files. Can you remove the link rel=stylesheet... references from your HTML documents? Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
On Fri, Mar 19, 2010 at 8:28 AM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ Hello Sarah, In IE6, I am not seeing what I would call a giant white box in the above sample page. I do see two issues. 1) The png images are not displayed properly. This is a common problem with IE6. There are known methods for handling png in IE6. Me, I'm a coward. I just use gif and jpg. 2) There is a 10 px margin between the light brown background content box and the darker brown border like line. For me, given my attitude about folks still using IE 6 in the light of current hyper-security risks, I would just pretend that I wanted the 10px margin at the bottom of the page. And let the IE6 users have a slightly different viewer experience. If this is a job for a client try browbeating them into upgrading to IE8 grin. Given the ultra weirdness of Wordpress/Addon css handling. I would try saving the document onto your hard-drive using something like the Firefox save complete document. Then you can edit the page removing stuff bit by bit until you isolate the problem without the extra complexity of potential cross interactions between different style sheets. If your giant white box is a different effect than I am seeing in my particular IE6, perhaps you could point to an image displaying the behavior. Regards, Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
They arn't there they are put in there on the server before it serves the file. They are called and the header html is compiled with the get_header() function. This looks at all the loaded plugins and installs the necessary files. As well as the header info I put into the header.php file. I could uninstall the plug ins but then nothing would work. Right now I have 5 plugins installed. One for SEO (it's whats throwing the BB errors.) It allows our content person to manage meta data, and she used the ''. One for Magic-fields - in the back end it lets me create panels for items.. For instance they get a new friend for the friends page. I created a panal in tools for them to select new friend and then they fill out some data and whala the content of the page just changed without me even having to no about it. It is also probably the most important plugin I have. Then there is the Contact Forms- again they can change any of it If a month from now they find they need a new bit of info then it can be added by them. There is also one for shadowbox. It has all the needed JS and integrates it into the back end of wordpress. It is very file intensive but looks realy nice and we use it a lot. The last is Google Analytics. And then there is wordpress itself... It is a monster but it does separate content from presentation. On 3/19/10 1:03 PM, Bill Braun bbr...@hlthsys.com wrote: Atkinson, Sarah wrote: I'll tread very lightly here, Sarah. There seems to be a lot of styles that are either redundant or conflicting. I did not examine them with any rigor, it is a first impression. Also, it looks like you are linked to five different external style sheets. Are they all necessary? There may be conflicts between/among them that would be hard to track down. Bill B Those have to do with Wordpress Plugins... Some of the plugins auto load their own stylesheets. Wordpress is a decent CMS but it does have issues with massive amounts of loaded files and it makes a mess of CSS files and JS files. Can you remove the link rel=stylesheet... references from your HTML documents? Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
I think I got the giant white box fixed... I added display: block and position: relative; to a few divs then I had to change the z-index on a couple of other items to compensate. This caused a couple of other problems to develop in safari but I think I have got it. On 3/19/10 1:22 PM, Claude Needham gxx...@gmail.com wrote: On Fri, Mar 19, 2010 at 8:28 AM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ Hello Sarah, In IE6, I am not seeing what I would call a giant white box in the above sample page. I do see two issues. 1) The png images are not displayed properly. This is a common problem with IE6. There are known methods for handling png in IE6. Me, I'm a coward. I just use gif and jpg. 2) There is a 10 px margin between the light brown background content box and the darker brown border like line. For me, given my attitude about folks still using IE 6 in the light of current hyper-security risks, I would just pretend that I wanted the 10px margin at the bottom of the page. And let the IE6 users have a slightly different viewer experience. If this is a job for a client try browbeating them into upgrading to IE8 grin. Given the ultra weirdness of Wordpress/Addon css handling. I would try saving the document onto your hard-drive using something like the Firefox save complete document. Then you can edit the page removing stuff bit by bit until you isolate the problem without the extra complexity of potential cross interactions between different style sheets. If your giant white box is a different effect than I am seeing in my particular IE6, perhaps you could point to an image displaying the behavior. Regards, Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 more problems (div width issues)
On 19/03/2010 9:14 AM, Rory Bernstein wrote:
Peter, thank you for this solution. It works perfectly. Now I just
have to ask: How are the photos in #book_images being aligned to the
bottom of the div? I don't understand what makes that happen. There
doesn't seem to be any rule for that. I am mystified!
A new question for everyone!
On this page:
http://rorybernstein.com/francesca_proto/book1.html
The text in the left nav that is contained in span class=small is
not getting as small as I want it (this the black text starting with
The Portraits of Francisco Clemente...). This is the CSS for .small:
.small {font-size: 0.8em;}
But I can't seem to get it go go any smaller. The rule works when I
make the text bigger. Is there some sort of floor to font-size that
won't let me make it smaller?
Hi Rory,
The answer to your first question is that the default settings in
browsers for images is vertical-align: baseline.
As to the font size, this could be an issue with your browser settings,
I was able to quickly made text completely unreadable in both ff and ie.
Here is an article I would recommend
-http://www.gunlaug.no/contents/wd_1_03_04.html.
--
Peter Abramowicz
Arachne Web Designs
403.990.6016
www.arachne-design.com http://www.arachne-design.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 more problems (div width issues)
On Mar 19, 2010, at 3:23 PM, Peter Abramowicz wrote:
On 19/03/2010 9:14 AM, Rory Bernstein wrote:
Peter, thank you for this solution. It works perfectly. Now I just have to
ask: How are the photos in #book_images being aligned to the bottom of the
div? I don't understand what makes that happen. There doesn't seem to be any
rule for that. I am mystified!
A new question for everyone!
On this page:
http://rorybernstein.com/francesca_proto/book1.html
The text in the left nav that is contained in span class=small is not
getting as small as I want it (this the black text starting with The
Portraits of Francisco Clemente...). This is the CSS for .small:
.small {font-size: 0.8em;}
But I can't seem to get it go go any smaller. The rule works when I make the
text bigger. Is there some sort of floor to font-size that won't let me
make it smaller?
Hi Rory,
The answer to your first question is that the default settings in browsers
for images is vertical-align: baseline.
As to the font size, this could be an issue with your browser settings, I was
able to quickly made text completely unreadable in both ff and ie. Here is an
article I would recommend -http://www.gunlaug.no/contents/wd_1_03_04.html.
--
Peter Abramowicz
Arachne Web Designs
403.990.6016
www.arachne-design.com
Re: font size: Ah, I see. I looked at the page on another computer and sure
enough the font is smaller.
Thanks for the info on vertical-align: baseline. I did not know that.
I so appreciate your help. Now I have to get the layout working in ie7! The
book images are pushed down way too low on the page. Any suggestions?
Rory
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 more problems (div width issues)
Rory Bernstein wrote:
On this page:
http://rorybernstein.com/francesca_proto/book1.html
Now I have to get the layout working in ie7! The book images are pushed down
way too low on the page. Any suggestions?
Rory
The correction for IE 7.0 is:
*:first-child+html #book_images {min-height: 1px;}
Reference: http://www.satzansatz.de/cssd/onhavinglayout.html
Best,
Helen Keller
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
