taking control on img size from html

[Odegard]

Hi, I have a site with lots of images, each with specified width/height.

Alle images can be in either 3 categories. Cat a and b have alle the same size (but a is bigger than b) and in cat c the size varies.

Trying to be a CSS purist, I want to control size of images in cat a and b through CSS. The problem is however that the images are spread in over a hundred pages and it would be a really huge task to go through each and everyone of them and remove width/size.

Is there a way I can "overcontrol" the size with CSS eventhough width/height is specified in the HTML?

I know I could use sed (in lunix) to edit all files simultaneously but I don't have access to the files directly so editing the files automatically or through a script is not an option.

I'm pretty sure the answer is "no" since it would invalidate specificality, but I gotta ask anyway.

[webaster]

In html

<img class="changeDim" src="path/to?images" width="" height="">

In css

img.changeDim {width: 150px; height: 200px;}

[Odegard]

wow, very nice. Will try it out shortly. Thanks.

[webaster]

this can be added to

img.changeDim
{width: 150px;
height: 200px;
display:block
border: 0 none;
}

[Odegard]

Sorry, should've been more specific. The HTML is generated likes this: <td>#script#</td> and the resulting code looks like this:

<td><a class="headlinelink" href="..."><img src="..." width="100" height="75"></a></td>

I can't change the script, so I can't put a class inside the <img> tag. There is a class inside the <a> tag, "headlinelink, which I can modify, or I can modify the <td> tags directly.

The proposed solution doesn't work because anything outside the img tag would be overruled by teh width/height inside the <img> tag.

So I ask again, is there any way I can take control over the image properties with CSS?

[bedlam]

Yep - css is all about the context in which an element occurs. This is not usually noticeable, since the implied context of a declaration like .myClass is basically 'everywhere'.

You can do what you want this way:

a.headlinelink img {width: 150px; height: 200px;}

If you had to say in English what this means, you'd say something like "every image occurring inside an <a> element with the class 'headlinelink' should be 150px wide by 200px high."

-B

[Odegard]

Great! It worked.

I was so sure the internal attributes (width/height) would overrule the external CSS and the classes I tried to construct didn't work.

I tried:
.headlinelink img {...}
but I should've been more specific, including the <a> tag.

Thanks.

[webaster]

a.headlinelink img
{
width: 150px;
height: 200px;
display:block;
border: 0 none;
}

is more complete -ie. sets border to zero of image;
display: block (CSS1) good when image resides in a

[createErrorMsg]

display: block (CSS1) good when image resides in a

Not true. Making the img a block level element results in a technical specs breach, as inline elements are not allowed to contain block level elements. It won't cause a validaton error (b/c html validates without checking css), and there's some debate over whether it will cause rendering problems (the specs are a little vague about the rendering rules regarding this situation when caused by CSS), but it still runs contrary to the ideas behind the W3's visual formatting model.

Besides that, setting an image contained in an inline element to display:block doesn't accomplish anything.

<A> is inline, and should contain only inline level elements.

cEM