I used the method to stretch a background image with CSS from this page http://www.daniweb.com/forums/thread140397.html and it works great in all the modern browsers I tested but I had 2 problems: 1. it doesn't validate (how much does this matter?) and 2.it doesn't work in older IE browsers

Any thoughts on this? Should I use conditional comments to use a different method for the old IE browsers (and if so, what method?) and just ignore the validation error?

Recommended Answers

All 7 Replies

Around 15% of users to a site I help manage still use IE6 or older, so I wouldn't say you should stop optimising for older browsers just because Facebook and YouTube do. It depends on your user base and whether you feel the extra time to optimise is worth losing a certain number of visitors.

It's always more beneficial to have a page that validates - some search engines will favour it and it's better for accessibility.

Hm ok, because i hate Internet Explorer 6 or older, i would display a box that says, the user should download a newer browser, because of lack of displaying the page and lack of security and more...
But, yes with 15% of the users using these Browsers, you should optimize it...

And to validate your website I would use the w3c valiator, which outputs every error exactly with line and says what exactly is wrong, and then simply correct it in the sourcecode

I usually do a separate style sheet for IE6 that is simplified but in this case, I don't know of a way to stretch the background image for IE6. Anyone know if it is possible?

The method that I linked to above has you place the image first on your page with the css defining the size. However, the W3c validator says "document type does not allow element "img" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag"

Does the IE 6 optimization in the link you posted above not work?

How does your html-code look like? this:

<html>
<head>
...
</head>
<body>
<img id="bg" />
<div id="content">
...
whole content
...
</div>
</div>
</body>
</html>

?
maybe just create a div arround the img-tag, like:

<html>
<head>
...
</head>
<body>
<div>
<img id="bg" />
</div>
<div id="content">
...
whole content
...
</div>
</div>
</body>
</html>

Hi,
Thanks much for the help!
Putting the div tags around the image solved the validation problem and the page still works fine in modern browsers.

I hate to give up entirely on IE7, although I hate it, because I personally know people still using it (sigh). The only problem I'm having with it is that the background is tiling instead of stretching, not too serious. The problem I'm having in IE6 is that the page content doesn't want to display until after the background. I usually put together a style sheet just for IE6 and simplify everything so maybe I will just skip the stretched background in that and let it tile.

ok :) no problem.
if you can do the problems you posted by self please mark this thread as solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.