liquid design

[russ801]

I want to have a couple design elements extend the entire screen ; no matter the resolution. These design elements are .png.

use of width=100% seemed like the logical solution but I am having no success making that work.

<div align="left" class="HVOL"><img src=
"HorizontalViewerGraphic.png" alt="" border="0" name="HVG"
style="filter: alpha(opacity=40);"></div>

[realisis]

in html you can apply width=100% to the image and it should work.

however,

it will NOT work in many browsers if the image in nested in certain elements. For instance a TABLE... not sure about a DIV though, but try the IMG without the DIV just to see, and then compare, and you'll know.


PS: when doing this you should not specify the other axis (the height in this case) if you want the image to keep its original aspect ratio.

[russ801]

Did that

Did style:width=100% also

[russ801]

Actually, I want to stay away from tables, although I expect that I could do it that way.

[realisis]

"Actually, I want to stay away from tables, although I expect that I could do it that way."

no no no , as I said: % on an image will not work when nested in a table

[russ801]

Working within the same division (DIV) works.

Working with a file from another directory (archive) doesn't test well.

Walk away slowly, there is nothing to see here.:o

[russ801]

Originally posted by realisis
"Actually, I want to stay away from tables, although I expect that I could do it that way."

no no no , as I said: % on an image will not work when nested in a table

I meant I could scale a table cell. The image would be problematic

[russ801]

Can the height be scaled using percentage in CSS?

[realisis]

I meant I could scale a table cell. The image would be problematic

- and -

Can the height be scaled using percentage in CSS?


well, I'm no longer sure wether you mean % height in CSS on an image, or on a table cell...

Regardless, yes you can set % height in html or CSS, but whether it "grabs" in all current browsers is another issue: height can be especially problematical on certain elements. For instance some browsers won't implement your height spec on a TD if there is "insufficient" content within the TD to warrant the specified height (Netscape - old and new - come to mind).

On images % height should work - again as long as they are not nested (in tables, at any rate).

Anyway this is the kind of stuff that takes only a couple of minutes to try on your own. And if your browser crashes, then big deal - it was probably going to crash sooner or later anyway ;^]

[russ801]

Width = 100% works for the img tag in HTML. I can't seem to get it to work using CSS.

I agree that testing is the easist way to go; but sometimes I think something should work and it doesn't. Am I doing something wrong or am I attempting to do something that can't be done that way. I can only ask.

thanks for your help.

[ronaldb66]

Could you show us your style sheet? The proper syntax for setting the width property to 100% is:div {width: 100%;} I used a div element here, but that could easily be something else.
I may be kicking in open doors here, but the equal sign (=) should not be used in CSS...

[russ801]

I actually wanted the image contained in that div to be 100%.

I got that part to work