Moving image properties to CSS

[John]

I am currently using one of the IE hacks to give a PNG image full alpha
transparency. But I wanted to move as much of this data to a .CSS as possible
to lighten the load in the HTML as it is uses on every page. Here is my HTML:

<div id="logo1"
style="width:128px;height:100px;filter:progid:DXIm ageTransform.Microsoft.AlphaIm
ageLoader(src='images/logo-128x100x32.png');">
<img style="filter:progid:DXImageTransform.Microsoft.Al pha(opacity=0);"
src="../images/logo-128x100x32.png" width="128" height="100" border="0"
alt="Matroska Logo">
</div>

Here is the CSS I am using for it:

#logo1 {
position: absolute;
top: 10px;
left: 10px;
}

What all can I move to the .CSS file? I am most interested in moving the style
properties over.
Atamido


----== Posted via Newsfeed.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeed.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= 19 East/West-Coast Specialized Servers - Total Privacy via Encryption =---

[Matt]

John wrote:

I am currently using one of the IE hacks to give a PNG image full alpha
transparency. But I wanted to move as much of this data to a .CSS as possible
to lighten the load in the HTML as it is uses on every page. Here is my HTML:

<div id="logo1"
style="width:128px;height:100px;filter:progid:DXIm ageTransform.Microsoft.AlphaIm
ageLoader(src='images/logo-128x100x32.png');">
<img style="filter:progid:DXImageTransform.Microsoft.Al pha(opacity=0);"
src="../images/logo-128x100x32.png" width="128" height="100" border="0"
alt="Matroska Logo">
</div>

Here is the CSS I am using for it:

#logo1 {
position: absolute;
top: 10px;
left: 10px;
}

What all can I move to the .CSS file? I am most interested in moving the style
properties over.

You can move all the style properties over. That's what they are -- inline
CSS.

#logo1 {
position:absolute;
top:10px;
left:10px;
width:128px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='images/logo-128x100x32.png');
}

#logo1 img {
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=0);
width: 128px;
height: 100px;
border: none;
}

<div id="logo1"><img src="../images/logo-128x100x32.png" alt="Matroska Logo"></div>

--
Matt

-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[John]

"Matt" wrote...

You can move all the style properties over. That's what they are -- inline
CSS.

#logo1 {
position:absolute;
top:10px;
left:10px;
width:128px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='images/logo-128x1
00x32.png'); }

#logo1 img {
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=0);
width: 128px;
height: 100px;
border: none;
}

<div id="logo1"><img src="../images/logo-128x100x32.png" alt="Matroska

Logo"></div>

Well both IE and Mozilla render the page fine like that, but now the CSS won't
validate. It doesn't like all of the colons in
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='images/logo-128x1
00x32.png');

Is there any way to fix it so that it validates? Also, is there any way to put
the src="" and alt="" in the .CSS?

Thanks for your help!
Atamido


----== Posted via Newsfeed.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeed.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
---= 19 East/West-Coast Specialized Servers - Total Privacy via Encryption =---

[Brian]

John wrote:

is there any way to put the src="" and alt="" in the .CSS?

No; those are part of the content of the document, and are outside of
the scope of css.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Roedy Green]

On Mon, 05 Jul 2004 23:20:10 -0400, Brian
<us*****@julietremblay.com.invalid> wrote or quoted :

is there any way to put the src="" and alt="" in the .CSS?

No; those are part of the content of the document, and are outside of
the scope of css.

If you have a repeating logo associated with a style, you can do
something like this:

..new /* anything new */ {
background : url(images/plant.gif) #ffffff no-repeat scroll
3px 3px;
border : dashed;
clear : none;
color : #9400d3;
display : block;
margin : 8px 0px 8px 0px;
padding : 10px 8px 10px 40px;
}

--
Canadian Mind Products, Roedy Green.
Coaching, problem solving, economical contract programming.
See http://mindprod.com/jgloss/jgloss.html for The Java Glossary.

[Brian]

Roedy Green wrote:

[attribute re-inserted] John wrote:

is there any way to put the src="" and alt="" in the .CSS?

If you have a repeating logo associated with a style, you can do
something like this:

.new /* anything new */ {
background : url(images/plant.gif) #ffffff no-repeat

[additional css snipped]

What has this to do with alt and src attributes of an <img> element?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Beauregard T. Shagnasty]

Quoth the raven Brian:

Roedy Green wrote:

[attribute re-inserted] John wrote:

is there any way to put the src="" and alt="" in the .CSS?

If you have a repeating logo associated with a style, you can do
something like this:

.new /* anything new */ {
background : url(images/plant.gif) #ffffff no-repeat

[additional css snipped]

What has this to do with alt and src attributes of an <img> element?

It moves the image to the background where no alt is required. In
fact, no <img> element is required either. <g>

--
-bts
-This space intentionally left blank.

[Roedy Green]

On Tue, 06 Jul 2004 00:26:08 -0400, Brian
<us*****@julietremblay.com.invalid> wrote or quoted :

.new /* anything new */ {
background : url(images/plant.gif) #ffffff no-repeat

[additional css snipped]

What has this to do with alt and src attributes of an <img> element?

the url is roughly the equivalent of img src.

--
Canadian Mind Products, Roedy Green.
Coaching, problem solving, economical contract programming.
See http://mindprod.com/jgloss/jgloss.html for The Java Glossary.

[Mark Tranchant]

John wrote:

"Matt" wrote...

Well both IE and Mozilla render the page fine like that, but now the CSS won't
validate. It doesn't like all of the colons in
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='images/logo-128x1
00x32.png');

Is there any way to fix it so that it validates?

Use IE conditional comments to reference an IE-specific style sheet. The
validator won't see it, but IE will.

Example at http://billericaybaptist.net/ including both IE5 and IE6
style sheets, although this is just for box model fixes.

--
Mark.

[Chris Morris]

"Beauregard T. Shagnasty" <a.*********@example.invalid> writes:

Quoth the raven Brian:

Roedy Green wrote:

[attribute re-inserted] John wrote:
> is there any way to put the src="" and alt="" in the .CSS?

If you have a repeating logo associated with a style, you can do
something like this:

.new /* anything new */ {
background : url(images/plant.gif) #ffffff no-repeat

[additional css snipped]
What has this to do with alt and src attributes of an <img> element?

It moves the image to the background where no alt is required. In
fact, no <img> element is required either. <g>

Where no alt is required *provided* that had an <img> been used to
display the image alt="" would have been appropriate.

--
Chris

[Christoph Paeper]

*Mark Tranchant* <ma**@tranchant.plus.com>:

Use IE conditional comments to reference an IE-specific style sheet.
The validator won't see it, but IE will.

That's just bogus. If you're using non-standard HTML or CSS then stand for
it and don't cloak it.

--
To the optimist, the glass is half full.
To the pessimist, the glass is half empty.
To the engineer, the glass has an appropriate reserve space.
To the economist, the glass is twice as big as it needs to be.

[Mark Tranchant]

Christoph Paeper wrote:

Use IE conditional comments to reference an IE-specific style sheet.
The validator won't see it, but IE will.

That's just bogus. If you're using non-standard HTML or CSS then stand
for it and don't cloak it.

But I'm not - if you're using a real browser. My HTML and CSS is
completely standard to a proper UA, with just a redundant comment in the
HTML.

Much as I don't like supporting MSIE [1], it is pretty much essential
for non-personal sites. By doing it this way, using a
standards-compliant comment that MSIE happens to parse, I get the best
of both worlds: standards-compliant code and fixes for MSIE.

[1] http://tranchant.plus.com/ie

--
Mark.

[Alan J. Flavell]

On Tue, 6 Jul 2004, Christoph Paeper wrote:

*Mark Tranchant* <ma**@tranchant.plus.com>:

Use IE conditional comments to reference an IE-specific style sheet.
The validator won't see it, but IE will.

That's just bogus.

I quite agree! Nevertheless, it does no harm to WWW-conforming
browsers (which would be my priority, but there's also a real world to
consider), and it keeps the operating-system-component happy (which
avoids pointless complaints from senior manglement who don't know any
better). So (although to be honest I'm not doing it myself to any
extent - although I know a web designer whose authoring tool does it
anyway), I think it's a tolerable response to an unfortunate
situation.

Which, on the other hand, is no attempt to persuade you to go that way
yourself if you don't want to!

good luck