problem with img

Post here if your topic is about CSS HTML Validator but doesn't fit in another forum.
Post Reply
Walter Metzger
Rank II - Novice
Rank II - Novice
Posts: 48
Joined: Tue Feb 26, 2008 12:57 pm
Location: Germany
Contact:

problem with img

Post by Walter Metzger » Fri Dec 12, 2014 9:02 am

Good day,

I have more as lines like this:

<a href="index.html"><img class="logo" src="anlage2/logo_vfk.jpg" height="80" width="80" alt="Logo VfK" border="0" title="Das Logo des Vereins mit Link zur Startseite" /></a>

and get by validate current document under Warnings:

This "img" tag uses one or more presentational attributes. Use CSS to separate structure from presentation [A, 1.3.1; G140]. Visit http://www.w3.org/TR/WCAG20-TECHS/G140 for more information. The presentational attributes for "img" include: "align", "border", "hspace", and "vspace". Recommendation: Instead of the "border" attribute, consider using the border CSS properties. Example: style="border: 0". This message is displayed up to 3 times.

Sorry, I am not able to understand such warnings, can please somebody help me?

Greetings form Germany
piano

Walter Metzger
Rank II - Novice
Rank II - Novice
Posts: 48
Joined: Tue Feb 26, 2008 12:57 pm
Location: Germany
Contact:

Re: problem with img

Post by Walter Metzger » Fri Dec 12, 2014 12:25 pm

Sorry, I was too fast with my question

I could find my mistake,

I changed from border="0" to style="border:0" and at other position from border="3" to style="border: 3px solid;"
and the warnings are gone.

Greetings from Germany
Walter Metzger (piano)

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3344
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: problem with img

Post by Albert Wiersch » Fri Dec 12, 2014 3:10 pm

Yep, that'll do it.

You probably don't need style="border:0" though as that (no border) is the default.

Also, if you can, it's better to use the "class" attribute and specify a CSS class rather then the "style" attribute, but it shouldn't be a big deal if you can't do this.
Image
Albert Wiersch

Walter Metzger
Rank II - Novice
Rank II - Novice
Posts: 48
Joined: Tue Feb 26, 2008 12:57 pm
Location: Germany
Contact:

Re: problem with img

Post by Walter Metzger » Sat Dec 13, 2014 9:53 am

Albert, thanks for the reply,

I know that style="border:0" is default, I use it for other members from our organisation as syntax example (I hope you see what I mean).

1. when I need different styles as for example style="border: 1px solid;" till style="border: 10px solid;", is that useful to work with class?

2. how can I work with class instead of styles, based on a definition like (example):

<a href="index.html"><img class="logo" src="anlage2/logo_vfk.jpg" height="80" width="80" alt="Logo VfK" style="border: 5px solid;" title="Das Logo des Vereins mit Link zur Startseite" /></a>

We have in our organisation a lot of similar lines.
Thanks for an answer.

All who read this post, greetings from Germany,
Merry Christmas and a Good New Year 2015


Walter Metzger

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3344
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: problem with img

Post by Albert Wiersch » Sat Dec 13, 2014 10:47 am

Walter Metzger wrote:1. when I need different styles as for example style="border: 1px solid;" till style="border: 10px solid;", is that useful to work with class?
If I understand correctly, you are saying you have a very specific style that applies to only one element. You can use the "style" attribute but it may be better to use an "id" attribute and then specify the style for the element's ID in a style sheet. This keeps the style information together in one place instead of mixing it in with HTML elements.
Walter Metzger wrote:2. how can I work with class instead of styles, based on a definition like (example):

<a href="index.html"><img class="logo" src="anlage2/logo_vfk.jpg" height="80" width="80" alt="Logo VfK" style="border: 5px solid;" title="Das Logo des Vereins mit Link zur Startseite" /></a>

We have in our organisation a lot of similar lines.
Thanks for an answer.
I'm not exactly sure what you are asking, but you already have a class="logo" attribute on the "img" element, so you could put this in the head section of your HTML document and remove style="border: 5px solid;":

Code: Select all

<style>
 img.logo { border: 5px solid; }
</style>
Or you could put this in an external style sheet:

Code: Select all

 img.logo { border: 5px solid; }
Then you just need to use class="logo" on all the "img" elements that it applies to... and if you need to change the style then it will be easier since you will need to change it in fewer places (only one place if you put it in only one external style sheet).
Walter Metzger wrote: All who read this post, greetings from Germany,
Merry Christmas and a Good New Year 2015
Merry Christmas and a Good New Year to you as well!
Image
Albert Wiersch

Walter Metzger
Rank II - Novice
Rank II - Novice
Posts: 48
Joined: Tue Feb 26, 2008 12:57 pm
Location: Germany
Contact:

Re: problem with img

Post by Walter Metzger » Sun Dec 14, 2014 4:54 am

Albert, Thanks for the good tips,

I revised my homepage, *.html and styles.css specially by img (There were more inaccuracies since beginning ...)

I have a line (similar in more sites)
<a href="gemeinschafft.html"><img class="gemeinschaft" src="anlage2/gemeinschaft.jpg" alt="Zu Gemeinschaft" title="Gemeinschaft" /></a><br />

and in styles.css

.gemeinschaft {
border: 2px solid;
height: 20x;
width: 106px;
}

I see the wanted border local with CSE HTML (View with browser ...) in Google Chrome

But after the upload the new files there is no border around gemeinschaft.jpg
in http://www.koerperbehinderte-es.de in Google Chrome,

but I see the defined border in Opera and in Internet Exporer.

Can You please say me why?

Greatings
Walter Metzger

Walter Metzger
Rank II - Novice
Rank II - Novice
Posts: 48
Joined: Tue Feb 26, 2008 12:57 pm
Location: Germany
Contact:

Re: problem with img

Post by Walter Metzger » Sun Dec 14, 2014 5:40 am

Albert,

Sorry, I was again too fast with my question
I could find my mistake in Google,

Styles.css.

.seitenanfang {
border-style:solid;
border-width:2px;
height: 23px;
width: 95px;
}

Works in IE, Opera and Google Chrome.

Greetings from Germany
Walter Metzger

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3344
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: problem with img

Post by Albert Wiersch » Sun Dec 14, 2014 4:07 pm

Great. I'm glad you found the problem. So everything is working as expected now?
Image
Albert Wiersch

Post Reply