Changing Max-Width Based on Containing Tags

[DurtyMat]

I should be able to set the max-width property to change depending on what the containing tag is, correct?

i thought I could do something like this:

Code: Select all

#p.picture #img
{
max-width: 650px;
}
#p.picture1 #img
{
max-width: 550px;
}

Am I missing something, or am I using this incorrectly?

Thanks.
Matt

[ChoccieMuffin]

Not sure i quite understand the question, but this might help.

I have created different <img> classes to use depending on what sort of image I'm using and the context in which they're being used, and have defined the max height in the style (same idea as you're after, just a different attribute). For example, I have some little icons that I include in the body so I don't want them to be too tall, so I've set the max-height for icons to be not much bigger than the text, and when I insert an icon I apply the class img.icon. I have other classes, for example img.FullScreen for when I want the picture to fill the page, and img.instructions when I'm including a graphic in a table where there are instructions in the other column of the table.

I hope that makes sense.

[Andrew]

I'm a little confused as to why you are using the hash symbols (#). They are usually used to select an ID attribute, but that doesn't seem to be what you're doing.

The rest of the syntax looks like it *should* work.

[LTinker68]

To add to what Andrew said, your code is close but you need to remove all of the # symbols, so it would appear as:

Code: Select all

p.picture img
{
max-width: 650px;
}
p.picture1 img
{
max-width: 550px;
}

Note that older versions of IE (IE6 and lower) don't support the max-width attribute.

[DurtyMat]

perfect, thanks everybody!