When using images with no size set, it should use the calculated available space set bij css attributes. parent width is 60px. child has with position:absolute set and values set for top, left , right and bottom the width and height is not used for rezising the image. The image use his own or even a different value. Ai not good. See code and images supplied.
The code used <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>website-straith</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"><!-- body { background-color: white; margin: 0; padding: 0; } #page { width: 799px; position:relative; margin:0 auto; } #pagesNavBar { height: 460px; width: auto; left: 100px; top: 151px; position: absolute; visibility: visible; border: dotted 1px red; } .navImg { display: block; position: absolute; /* width: xpx; Has to set the image size here height: xpx;*/ top:0; bottom: 20px; left: 5px; right: 5px; border: dotted 1px orange; } .navElementTitle { font-size: 8pt; position:absolute; font-family: verdana; font-variant: normal; text-align: center; vertical-align: top; margin:0; bottom: 0; width: inherit; height: 20px; border: dotted 1px green; } .navElement { top:0; position: absolute; width: 60px; /* set this with JS */ height:70px; /* set this with JS */ margin:0; visibility: visible; border: dotted 1px black; } #topBG { background-image: url(images/topBG.jpg); width: 799px; height: 269px; position:absolute; left:0px; top:0px; } #bodyBG { background-image: url(images/bodyBG.jpg); width: 799px; height: 730px; position:absolute; left:0px; top:269px; } --></style> </head> <body> <!-- ImageReady Slices (website-straith.psd) --> <div id="page"> <div id="topBG" ></div> <div id="bodyBG"><div id="pagesNavBar"> <div id="nav1" class="navElement"> <img class="navImg" src="images/home.gif" livesrc="../../docDock_graphic/home.tiff" /> <p class="navElementTitle" >Home</p> </div> <div id="nav2" class="navElement"> <img class="navImg" src="images/home.gif" livesrc="../../docDock_graphic/home.tiff" /> <p class="navElementTitle" >Download</p> </div> <div id="nav3" class="navElement"> <img class="navImg" src="images/home.gif" livesrc="../../docDock_graphic/home.tiff" /> <a class="navElementTitle" >Contact</a> </div> <div id="nav4" class="navElement"> <img class="navImg" src="images/home.gif" livesrc="../../docDock_graphic/home.tiff" /> <div class="navElementTitle" >Contact</div> </div> </div></div> </div> </body> </html>
Created attachment 13212 [details] How safari show the code - wrong image size.
Created attachment 13213 [details] Image how firefox show it - the way it is meant to be in code
This is a bug in Firefox. Note that I don't really like what is specified in CSS2.1 at the moment, but nevertheless Firefox is incorrect. If left/right are non-auto and width is auto, the intrinsic size of the image is used. It does not stretch (as say a block flow would) to fill the space. This is outlined very clearly in CSS2.1. I think the spec needs to be changed, since we've gotten this report both internally in Radar and externally in Bugzilla, so I will keep this bug open for now.
This is outlined > very clearly in CSS2.1. > > I think the spec needs to be changed, since we've gotten this report both > internally in Radar and externally in Bugzilla, so I will keep this bug open > for now. > My mistake, you are right about that. But if I understands it ( http://www.w3.org/TR/CSS21/cascade.html#inheritance ) well then when I ( using the code above ) have a container arround the img ( between navElement and NavImg ) with something like .navElmCont { margin: 0px 5px 20px 5px; width:auto; height:auto; } then safari doesn't honor the calculated parental width values even when I cahnge the width and height values to inherit into the image. Like .navImg { ... width: inherit; height:inherit; } 6.2 Inheritance reads ( When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child. )
In this case what is inherited is the value "auto", so Safari's rendering remains correct in terms of the spec.
We believe this is correct behavior.