IE behaves like it should . . .

eskdale

09-26-2007, 03:11 PM

and doesn't do what the rest of the W3C agrees on, i.e. (no pun intended) standards . . .

Anyway less of the rant.

Haven't been on for a while, so Heeeeellooooooo . . .

I have been writing a toy site for myself, you'll have to excuse the banality of it all.

I have used the old background stretch feature which is supported so nicely until "background-size: 100%;" is supported.

#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

with

<div id="bg">
<img src="inc/background_img.jpg" alt="background" width="100%" height="100%" />
</div>

in the html, which works delightfully in Firefox, Safari, even IE5 for mac mostly, but doesn't work on the current flavour of IE for PC's; yes I have Mac and every time I work on anything I know need to send it to a PC user to confirm it works after MS stopped producing IE for Macs.

I have included the following in my header to see if this fixes it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="keywords" content="Digital Constructions, grid irons, Beckermet, Ravenglass, doors, puerta, ranger luke, La Puerta, Forum Wars, Ed Richardson, digital, constructions, shops, shop fronts" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Digital Constructions</title>
<link rel="shortcut icon" href="inc/favicon.ico" type="image/x-icon" />
<link rel="icon" href="inc/favicon.ico" type="image/x-icon" />
<link href="inc/main.css" rel="stylesheet" type="text/css" />

</head>

But apparently it doesn't. So I am open to suggestions.

Any help would be appreciated.

The full URL to the site is:

www.digital-constructions.com/index.php

I still have a static index.html there for the time being while I get this and a few other bugs sorted.

Cheers in advance

_Aerospace_Eng_

09-26-2007, 03:35 PM

What about it doesn't work? Does it just not show up or does it not stay fixed? And have you made your html and body height:100%?
html, body {
height:100%;
}

eskdale

09-26-2007, 04:01 PM

html, body {
height: 100%;
margin: 0;
padding: 0;
}

already in my CSS.

Apparently it doesn't show up . . . but thats half the issue, I can't see it first hand on my machine.

ahallicks

09-26-2007, 04:07 PM

No offence... but that background does not look good anyways? Making an image stretch and letting the browser interpret the pixel colours will ALWAYS result in a considerable loss of quality. Imagine seeing that in a browser on a 1600x1200 screen? The image would look horrible. Also, for some people that make their windows small, the image isn't even recognisable?

eskdale

09-26-2007, 04:14 PM

Okay, fair enough, but it still doesn't answer my question?

I am already aware of the resolution issue and I am thinking of making the image fixed in a position, more for those poor folk at home on lower resolutions than those on higher. But, if I were to stick with it, or even use it in the future, is the fix I have the correct one?

vtjustinb

09-26-2007, 04:41 PM

No, the image stretches properly but all content is placed below it.

Why aren't you using that image as a background instead of placing it directly in the HTML? It's presentation and shouldn't be there in case people have CSS disabled when viewing your site:

[CODE]
#wrap {
height: 100%;
width: 100%;
background: #fff url(inc/background_img.jpg) left top fixed no-repeat;
}

And then wrap your content with that.

Honestly, I think the best solution would to be forgo the scaling (and the aliasing that naturally follows) and just make a background image large enough to stretch on a 30" monitor. Might be a juggling effort with page load and image quality, but I think in the end you'd be happier than that.

_Aerospace_Eng_

09-26-2007, 08:49 PM

Get rid of this
z-index:-1;
in your IE6 CSS.

eskdale

10-02-2007, 11:17 AM

Okay after careful consideration and thought I have now ditched the expanding image that I was asking for advice on, now need some additional help on my site.

I have used overflow:scroll; on my photo and text pages where the content box is smaller than the content.

But when it is overlapping the background photo, the scroll bars on the box are hidden. Whilst messing around with the image size in the background I noticed that the scroll bars become visible when the content box exceeded the boundaries of the background photo, so it seems that the background photo is hiding the scroll bars? I have tried using z-index of 1 on the background and the content box with a z-index of 2, this didn't resolve the issue but did take affect.

Any clues, I know the title is not relevant to the subject now so I'll see if I get any response and might need to start a new thread.

URL is the same:

www.digital-constructions.com/index.php

Cheers . . .