einsteinwallah Posted August 21, 2009 Share Posted August 21, 2009 The semantics of various CSS option values needs to be more clearly spelled out. I am not sure if origin of this problem is W3C where specifications of CSS are very vague. I am yet to try to find out what is available at W3C website in terms of semantic descriptions.For example, the second example in chapter on "CSS Dimension" in W3Schools is described with following text: "This example demonstrates how to set the height of an element using a percent value."The example itself has code like following: <html><head><style type="text/css">img.normal {height:auto}img.big {height:50%}img.small {height:10%}</style></head><body><img class="normal" src="logocss.gif" width="95" height="84" /><br /><img class="big" src="logocss.gif" width="95" height="84" /><br /><img class="small" src="logocss.gif" width="95" height="84" /></body></html> The code shows second image larger than first! The first one is with "auto" for height. So how can a 50% height be bigger than the one with "auto"? Shouldn't the 100% height mean same size as "auto"?I know this could be browser mis-implementation problem. But a reader of this chapter will be mystified. Some explanation of what the % actually means would help.Hope my criticism is seen as constructive. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 21, 2009 Share Posted August 21, 2009 A value of auto isn't the same as 100%, with auto the browser sizes the element to fit to avoid scrollbars. It's probably using 84px for the image height there. The 50% height is 50% of the height of the box that the image is in, not 50% of the original image height. The same thing for 10%, it's 10% of the height of the box that contains the image. Link to comment Share on other sites More sharing options...
einsteinwallah Posted August 22, 2009 Author Share Posted August 22, 2009 A value of auto isn't the same as 100%, with auto the browser sizes the element to fit to avoid scrollbars. It's probably using 84px for the image height there. The 50% height is 50% of the height of the box that the image is in, not 50% of the original image height. The same thing for 10%, it's 10% of the height of the box that contains the image.All the three html "img" commands have "height=84px" specified. I thought that made 84px as "the height of the box that the image is in". In the case of 50% of "the height of the box that the image is in" I thought browser is supposed to calculate height of img as it would appear for "auto" and then halve the linear dimensions of image to show and then stretch or shrink original image as required. And I expected image to be linearly half in size as compared to auto.Okay, just as I was typing "stretch or shrink original image" it occurred to me that may be 50% refers to 50% of linear dimensions of original image ... let me go and test that. Let me code an img command without any dimension attributes and class attribute. Okay I did that and image showed was similar-sized as img command with class="normal". Other things I did left me even more mystified and confused. I will write about it when I do those experiments systematically with cool mind.Thanks anyways justsomeguy for reply and forcing me to brain storm while writing this reply. My appeal for more details on CSS tutorial page remains. A student using material here need not have to go out of W3Schools website to clarify or experiment even when granting that all students must experiment as part of their learning. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 24, 2009 Share Posted August 24, 2009 All the three html "img" commands have "height=84px" specified. I thought that made 84px as "the height of the box that the image is in".No, that's the (default) height of the image itself, not the container that it's in. The CSS over-rides that, it uses 84px if the browser does not support CSS (auto might also be based on that). In this case the container that the images are in is the body element. You can add a div element with a certain height, and watch as the images take a proportion of that height. If you change the height of the div, the images with a percent height will change also:<html> <head> <style type="text/css"> img.normal {height:auto} img.big {height:50%} img.small {height:10%} </style> </head> <body> <div style="height: 600px; border: 1px solid black;"> <img class="normal" src="logocss.gif" width="95" height="84" /><br /> <img class="big" src="logocss.gif" width="95" height="84" /><br /> <img class="small" src="logocss.gif" width="95" height="84" /> </div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.