Ignoring a Stylesheet

[Lee Marsh]

Quick question...if in the header of the page I have this:

<style>
img{
height:110px;
width:130px;
}
</style>


how can I make a single image on the page ignore this rule and define its
height and width uniquely, and continue to allow that style to dictate every
other image on the page? TIA


--
<=============>
--Lee
http://www.inaneasylum.org


Goodbye, adios, bis bald, see ya later, wiedersehen, and everything in
between

 

[Mark Parnell]

how can I make a single image on the page ignore this rule and define its
height and width uniquely, and continue to allow that style to dictate every
other image on the page? TIA

<img class="somethingDescriptive" ... >

img.somethingDescriptive { height: auto; width: auto; }

 

[Chris Hope]

Quick question...if in the header of the page I have this:

<style>
img{
height:110px;
width:130px;
}
</style>


how can I make a single image on the page ignore this rule and define
its height and width uniquely, and continue to allow that style to
dictate every other image on the page? TIA

<img style="width:auto; height:auto" ...

OR

<img style="width:XXXpx; height:YYYpx" ...

where XXX and YYY are the width and height.

You can also declare these as a style class or with an id in the
stylesheet instaad of inline eg

<style>

#foo {
width: XXXpx;
height: YYYpx;
}

</style>

<img id="foo" ...

 

[Spartanicus]

<style>
img{
height:110px;
width:130px;
}
</style>

Image dimensions should be specified via html attributes, not via an
optional component such as CSS.

Often also applies to other seemingly presentational data like valign on
a data table. Your markup should work without CSS.

 

[Lee Marsh]

Image dimensions should be specified via html attributes, not via an
optional component such as CSS.

Well, in this case the spreadsheet would fail 'gracefully' but yes, I see
what you mean.

Often also applies to other seemingly presentational data like valign on
a data table. Your markup should work without CSS.

I'm kind of new with using CSS for anything more than managing fonts and
color schemes, so this raises a question in my mind: is the same true of CSS
and page layout? Because it seems like everyone agrees that CSS is ideal for
page layout, so does that not fall under the classification of
'presentational data', or are you supposed to still have another means to
display a page if a visitor doesnt support CSS?
--
<=============>
--Lee
http://www.inaneasylum.org
Goodbye, adios, bis bald, see ya later, wiedersehen, and everything in
between

 

[Spartanicus]

Well, in this case the spreadsheet would fail 'gracefully' but yes, I see
what you mean.

The function provided by supplying image dimensions to a browser before
the images have been downloaded has no fall back, there is no graceful
fail.

Providing image dimensions beforehand allows a browser to layout a page
before the actual images have been downloaded. Without knowing the image
dimensions a browser would have to reflow the layout as the dimensions
of each image becomes clear after each single image has downloaded.

I'm kind of new with using CSS for anything more than managing fonts and
color schemes, so this raises a question in my mind: is the same true of CSS
and page layout? Because it seems like everyone agrees that CSS is ideal for
page layout, so does that not fall under the classification of
'presentational data', or are you supposed to still have another means to
display a page if a visitor doesnt support CSS?

Layout should be presentational, if it's provided via css and the css
isn't used for some reason then nothing essential should be lost.

As a quality check authors should switch off images, css, client side
scripting, java, plugins and other optional technologies, a page or site
should remain fully functional.

 

[Jonathan N. Little]

Spartanicus wrote:

Layout should be presentational, if it's provided via css and the css
isn't used for some reason then nothing essential should be lost.

As a quality check authors should switch off images, css, client side
scripting, java, plugins and other optional technologies, a page or site
should remain fully functional.

A place where CSS specified img dims can be useful is with a gallery of
thumbnails so the layout doesn't reflow as the thumbs load.

1. resample images to actual display size, like 50x50 px for thumbs with
image editor

2. make a class for the specified images not to general image tag IMG

3. then code your spec'd image with that class...


<img class="thumbs" src="someImage.jpg" title="thumbnail of some image"> ...
<img class="thumbs" src="someOtherImage.jpg" title="thumbnail of some
other image">
....

 

[Spartanicus]

A place where CSS specified img dims can be useful is with a gallery of
thumbnails so the layout doesn't reflow as the thumbs load.

As I wrote before, that's why you *should not* use CSS for this, but you
snipped it, so here it is again:

---
Image dimensions should be specified via html attributes, not via an
optional component such as CSS.

The function provided by supplying image dimensions to a browser before
the images have been downloaded has no fall back, there is no graceful
fail.

Providing image dimensions beforehand allows a browser to layout a page
before the actual images have been downloaded. Without knowing the image
dimensions a browser would have to reflow the layout as the dimensions
of each image becomes clear after each single image has downloaded.
---

If the client has css disabled or the css file isn't used for some other
reason (network or server problem for example) then the client has to
reflow whilst the images download. Image dimensions should be supplied
in the markup.

 

[Jonathan N. Little]

As I wrote before, that's why you *should not* use CSS for this, but you
snipped it, so here it is again:

---
Image dimensions should be specified via html attributes, not via an
optional component such as CSS.

The function provided by supplying image dimensions to a browser before
the images have been downloaded has no fall back, there is no graceful
fail.

Providing image dimensions beforehand allows a browser to layout a page
before the actual images have been downloaded. Without knowing the image
dimensions a browser would have to reflow the layout as the dimensions
of each image becomes clear after each single image has downloaded.
---

If the client has css disabled or the css file isn't used for some other
reason (network or server problem for example) then the client has to
reflow whilst the images download. Image dimensions should be supplied
in the markup.

I agree that putting the dims in the markup is best, but one could argue
that the IMG SRC property determines the 'content' and therefore HTML
domain, and the WIDTH and HEIGHT effect the 'style' or 'presentation' of
the page and is a CSS issue... ;-)