Moving image properties to CSS

**Matt** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

John wrote:
[color=blue]
> 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:12 8px;height:100p x;filter:progid :DXImageTransfo rm.Microsoft.Al phaIm
> ageLoader(src=' images/logo-128x100x32.png' );">
> <img style="filter:p rogid:DXImageTr ansform.Microso ft.Alpha(opacit y=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.[/color]

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

#logo1 {
position:absolu te;
top:10px;
left:10px;
width:128px;
height:100px;
filter:progid:D XImageTransform .Microsoft.Alph aImageLoader(sr c='images/logo-128x100x32.png' );
}

#logo1 img {
filter:progid:D XImageTransform .Microsoft.Alph a(opacity=0);
width: 128px;
height: 100px;
border: none;
}

<div id="logo1"><im g 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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

"Matt" wrote...[color=blue]
> You can move all the style properties over. That's what they are -- inline
> CSS.
>
> #logo1 {
> position:absolu te;
> top:10px;
> left:10px;
> width:128px;
> height:100px;
>[/color]
filter:progid:D XImageTransform .Microsoft.Alph aImageLoader(sr c='images/logo-128x1
00x32.png');[color=blue]
> }
>
> #logo1 img {
> filter:progid:D XImageTransform .Microsoft.Alph a(opacity=0);
> width: 128px;
> height: 100px;
> border: none;
> }
>
> <div id="logo1"><im g src="../images/logo-128x100x32.png" alt="Matroska[/color]
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:D XImageTransform .Microsoft.Alph aImageLoader(sr c='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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

John wrote:
[color=blue]
> is there any way to put the src="" and alt="" in the .CSS?[/color]

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

--
Brian (remove ".invalid" to email me)

Home - TS McHughs Irish Pub & Restaurant

http://www.tsmchughs.com/

**Roedy Green** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

On Mon, 05 Jul 2004 23:20:10 -0400, Brian
<usenet3@juliet remblay.com.inv alid> wrote or quoted :
[color=blue][color=green]
>> is there any way to put the src="" and alt="" in the .CSS?[/color]
>
>No; those are part of the content of the document, and are outside of
>the scope of css.[/color]

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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

Roedy Green wrote:
[color=blue][color=green]
>> [attribute re-inserted] John wrote:
>>[color=darkred]
>>> is there any way to put the src="" and alt="" in the .CSS?[/color][/color]
>
> 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[/color]

[additional css snipped]

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

--
Brian (remove ".invalid" to email me)

Home - TS McHughs Irish Pub & Restaurant

http://www.tsmchughs.com/

**Beauregard T. Shagnasty** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

Quoth the raven Brian:
[color=blue]
> Roedy Green wrote:
>[color=green][color=darkred]
>>> [attribute re-inserted] John wrote:
>>>
>>>> is there any way to put the src="" and alt="" in the .CSS?[/color]
>>
>> 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[/color]
>
> [additional css snipped]
>
> What has this to do with alt and src attributes of an <img> element?[/color]

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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

On Tue, 06 Jul 2004 00:26:08 -0400, Brian
<usenet3@juliet remblay.com.inv alid> wrote or quoted :
[color=blue][color=green]
>> .new /* anything new */ {
>> background : url(images/plant.gif) #ffffff no-repeat[/color]
>
>[additional css snipped]
>
>What has this to do with alt and src attributes of an <img> element?[/color]

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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

John wrote:
[color=blue]
> "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:D XImageTransform .Microsoft.Alph aImageLoader(sr c='images/logo-128x1
> 00x32.png');
>
> Is there any way to fix it so that it validates?[/color]

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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> writes:[color=blue]
> Quoth the raven Brian:[color=green]
> > Roedy Green wrote:[color=darkred]
> >>> [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[/color]
> > [additional css snipped]
> > What has this to do with alt and src attributes of an <img> element?[/color]
>
> It moves the image to the background where no alt is required. In
> fact, no <img> element is required either. <g>[/color]

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

--
Chris

**Christoph Paeper** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

*Mark Tranchant* <mark@tranchant .plus.com>:[color=blue]
>
> Use IE conditional comments to reference an IE-specific style sheet.
> The validator won't see it, but IE will.[/color]

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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

Christoph Paeper wrote:
[color=blue][color=green]
>> Use IE conditional comments to reference an IE-specific style sheet.
>> The validator won't see it, but IE will.[/color][/color]
[color=blue]
> That's just bogus. If you're using non-standard HTML or CSS then stand
> for it and don't cloak it.[/color]

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** · Jul 20 '05, 11:07 PM

Re: Moving image properties to CSS

On Tue, 6 Jul 2004, Christoph Paeper wrote:
[color=blue]
> *Mark Tranchant* <mark@tranchant .plus.com>:[color=green]
> >
> > Use IE conditional comments to reference an IE-specific style sheet.
> > The validator won't see it, but IE will.[/color]
>
> That's just bogus.[/color]

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

Moving image properties to CSS

Moving image properties to CSS

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment