@OM2authorJul 21.2007 — #<img src="style="width:100px; height:100px; [B]border:3px solid gray; padding:10px[/B];" />[/QUOTE] does this assume i know the exact diemnsion of the image?
i need to be able to apply the style to any image.
@FangJul 21.2007 — #Order of properties is no relevant in this case<img style="width:100px; height:100px; border:3px solid gray; padding:10px;">with or without height/width.
@WebJoelJul 21.2007 — #re:<img src="style="width:100px; height:100px; border:3px solid gray; padding:10px;" /[/QUOTE]> I actually wrote this incorrectly: should be:<img src[B]="#"[/B] style="width:100px; height:100px; border:3px solid gray; padding:10px;" />[/QUOTE] and no, this does not parclude that this is the only width. I use Firefox and assuming you do also, using this snippette without a width & height and the absence ("#") of an image source, the image size would be a miniscule dot with a 10-px padding and a 3-px border all-around. -A 26-ish px square block of solid gray with a white dot in the middle maybe..
"border" is outside of the image, "padding" is inside the image's dimensions and part of the width/height. Therefore, the stated image being 100-px square is somewhat deceiving, as the padding adds 20-px to the total width and the total height of the image, with an additional 6-px added to each of width/height for borders...
Now, -you wanna get fancy? ? -Let make this a [I]class[/I]
<img [B]class=".imgFRAMED"[/B] src="#" style="width:190px; height:50px;">[/QUOTE] Here, we have applied the 'styling' as a 'class', applied to multiple instances of images of varying widths/heights. They will ALL now have a 10-px padding all-around and a 3-px gray border 'framing' them! ?
This is the beauty of CSS, -you can re-write things and make them re-useable, more condensed. -If these images all occur only inside of a specific DIV with an ID, we can shorten the code even more:
</div>[/QUOTE] Now, [I]any[/I] img occurring inside of the DIV with the id="view", will have this 10-px padding & 3-px gray border all-around. -We reduced the code a bit further.
@OM2authorJul 21.2007 — #guys: thanks for the replies.
i think i had something eroneous in my code to begin with that was stopping it working.
the replies have been very educational.
some questions on the replies: what happens if i leave out width and height?
is this bad practice?
i find it very useful to leave these out: i can change images just by chaging the name - and need not worry about the width and height, which otherwise i would have to.
@FangJul 22.2007 — #what happens if i leave out width and height?[/QUOTE] The images are loaded after the document. The browser uses the height/width values to calculate the size of a placeholder for the images and position of other elements in relation to the image.
If no height/width information is available no space is allotted to images, so when the images finally load, text and images will visually move to accommodate the images.
@WebJoelJul 22.2007 — #Yes, -personal preference. For demonstration purposes, I tend to write my CSS as 'inline styles' such as <img src="#" [B]style="foo:bar;[/B]" /> whereby the [B]bold[/B] is called "inline style".
When actually writing a page for self or client, I start this way, move the 'inline style' to an 'internal STYLE' section "<STYLE>Selector {}.... </STYLE>", and lastly when everything is working correctly, I would make the STYLE be an external CSS document that is linked into the page.