CodingForums.com - HTML5 - width=100% not valid problem

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - HTML5 - width=100% not valid problem (http://www.codingforums.com/showthread.php?t=285258)

jeddi

01-04-2013 11:00 AM

HTML5 - width=100% not valid problem

Hi,

In my HTML I have this code:

Code:

<img alt="My website pages" title = "My website pages" width="100%" height="150px" src="http://simpg.net/sys_images/simplepage.png"  >

And it displays just fine.

But when I validate it I get:
Bad value 100% for attribute width on element img: Expected a digit but saw % instead.

If I take out the width="100%" then the image doesn't stretch across the screen and doesn't look so good.

Is there an "official" way to stretch the image to fill the screen width ?

Thanks.

.

LearningCoder

01-04-2013 01:22 PM

Use CSS:

Give it an ID like so:

Code:

<img alt="My website pages" title="My website pages" id="image" src="http://simpg.net/sys_images/simplepage.png" >

Then in your CSS, do this:

Code:

#image

{

width: 100%;

height: 150px;

}

Give that a try and re-validate your HTML.

Kind regards,

LC.

jeddi

01-04-2013 02:54 PM

THat worked :thumbsup::thumbsup:

AndrewGSW

01-04-2013 03:01 PM

This is because the width and height attributes of an img are (pixel) values, so "px" in the height attribute is also invalid.

The previous post confirms that you can set these values in CSS.

An alternative approach is to make the image the background to another element. However, stretching a background-image is only available from CSS3:

Code:

background-size: 100%; /* CSS3, or */



.style1 {

        background: url(images/bg.jpg) no-repeat center center fixed;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

} /* IE 9+ */

All times are GMT +1. The time now is 02:39 AM.