Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE behaves like it should . . .

    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.

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

    Code:
    <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:

    Code:
    <!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" />
    	<!--[if IE 6]>
    	<style type="text/css">
    	html { overflow-y: hidden; }
    	body { overflow-y: auto; }
    	#bg { position:absolute; z-index:-1; }
    	#content { position:static; }
    	</style>
    	<![endif]-->
    		</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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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%?
    Code:
    html, body {
    height:100%;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    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.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of this
    Code:
    z-index:-1;
    in your IE6 CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    overflow:scroll; hidden scroll bars behind bckgrd img.

    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 . . .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •