5 replies [Last post]
ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 31 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

Hi,

I have a Bootstrap-3 template and at first I had all my images with this code:

<img src="assets/images/1.jpg" alt="1" width="40%" height="2%" border="0">

That worked perfectly as my images were responsive to all device dimensions.

I then ran a HTML/CSS validator and all images where I used above code came back with error, a respectable 59 errors in total(I use a lot of images in my articles blog... Big smile ).

So why does above code does not validate??? Its sweet, easy, fast and effective.

I checked alternatives and those are working with max-height, max-width, etc.
Also @media queries becomes necessary, my head is exploding with that since apparently I have to calculate the dimensions of each of my images for each device dimension separately???

Any help, tips, advise to make it fast and easy and above-all error-free, is much appreciated... Party

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 28 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Error message?

You don't say what caused the validator to gag, but I suspect it's the border attribute, which hasn't been valid since ca. 1999.

What is sweet, fast, easy and effective about entering an attribute for every instance? Use css and enter once.

Do a search and replace on border="0".

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 31 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

Ah, sorry, Hi Gary, yes the

Ah, sorry, Hi Gary, yes the error message says this...

"Bad value 40% for attribute width on element image: Expected a digit but saw percentage instead!"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 28 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Ahh

I learned something new today. The use of percentage width or height attribute values has been deprecated in html5. Just one more example of html5 stupidity.

If you validate against html4, those errors will go away.

IMO, except for the border attribute, you're ok. That does speed rendering somewhat, but you'd still be better off using css.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 31 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

Great, thank you

I am relieved to hear this ... Smile

Related to this I got some issue with CSS-ing the images. I post a new thread on it, hopefully you can help me again. Thanks in advance.

Cheers!

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 8 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

Using percentages

hi,the percentages height and width are used in responsive for all devices not mentioned in sizes,only width are using in percentage,img-responsive class used in all images.