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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Bottom positioning imposible in internet explorer 8??

    If anybody can help me with this I'd be so grateful. I'm trying to position a background image at the bottom of a page (not window). This code works in all browsers (and previous versions of ie) except ie8:

    Code:
    #body1
    {
    	text-align:center;
    	padding:0;
    	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    	background: #000 url(images/golfBG1.jpg) center bottom no-repeat;
    }
    I've tried everything I can think of and have been searching forums for ages but still no solution. Latest attempt was to get rid of a relatively positioned footer and try to use an absolute positioned div (with the bg image) to do it. But this failed too:

    Code:
    html:
    
    <!--[if IE 8]>
    	<div id="bgImage1"></div>
    <!--<![endif]-->
    
    </div><!-- #wrapper -->
    
    <!--[if !IE 8]>
    <div id="footer">
    	<p>Copyright &copy; <?php echo date(' Y '); ?> Executive Golf</p>
    	<ul>
    		<li><a href="<?php bloginfo('url'); ?>/recommended-packages/booking-information/">Booking Info</a> - </li>
    		<li><a href="<?php bloginfo('url'); ?>/recommended-packages/corporate/">Corporate</a> - </li>
    		<li><a href="<?php bloginfo('url'); ?>/contact">Contact</a></li>
    	</ul>
    	
    </div><!-- #footer -->
    <!--<![endif]-->
    <?php wp_footer(); ?>
    </body>
    </html>
    
    
    css:
    #bgImage1
    {
    	background:url(images/golfBG1.jpg) center bottom no-repeat;
    	position:absolute;
    	z-index:-8;
    	top:0px;
    	width:1094px;
    	height:600px;
    }
    Again if you can help I'd be over the moon.. this problem is driving me up the wall!

    BTW I know the website has other issues in ie6 & ie7 - but I'm not as concerned with these for now.

    website located at: hrnewseastanglia.com

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    oh sorry... that last bit of css was meant to be:

    Code:
    #bgImage1
    {
    	background:url(images/golfBG1.jpg) center bottom no-repeat;
    	position:absolute;
    	z-index:-8;
    	bottom:0px;
    	width:1094px;
    	height:600px;
    }
    I tried top before I posted this out of sheer desperation!

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello dlthomas,
    It looks like your IE8 version of the teed golfball is actually a background of absolute positioned #bgImage1, instead of body#body1 like the version that works.

    FF version is messed up too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hello

    Yes, I've been trying to do an absolute positioned div (at the bottom of the page). Because the version that works in all other browsers doesn't in ie8.

    Thanks for pointing that out.. I think some of the conditions for ie8 I put in broke it. FF should work now.

    This whole issue has truly stumped me!

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hello

    Yes, I've been trying to do an absolute positioned div (at the bottom of the page). Because the version that works in all other browsers doesn't in ie8.

    Thanks for pointing that out.. I think some of the conditions for ie8 I put in broke it. FF should work now.

    This whole issue has truly stumped me!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I never liked conditional statements and certainly never wanted to mess with as many as you have.
    What does this do for you?
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    	<!--[if lt IE 9]><script src="http://nopeople.com/homepage/sitewide/js/html5.js"></script><![endif]-->
    <style type="text/css">
    html, body {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    }
    html {background: #000 url(bgGolfedge.jpg) repeat-x bottom;}
    body {background: url(golfBG1.jpg) no-repeat center bottom;}
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 200px 0;
    	background: #999;
    }
    
    </style>
    </head>
    <body>
            <div id="container">
                <section>
                    <header></header>
                    <p>Some interesting golf stuff would go here</p>
                </section>
            <!--end container--></div>
    </body>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks Excavator. That code isn't working with it for some reason - I checked it in firefox too - the bg images don't appear at all.

    I hate to have to hack the code like this and use the conditional statements - but I'm in a pretty bad mess so am feeling like it's the only way out with this project.

    Pretty new to coding for ie to be honest - I use a mac with firefox/ safari/ chrome all of the time and have only just felt the wrath that is internet explorer!

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    oh.. I'm using wordpress by the way if that makes any difference.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by dlthomas View Post
    Thanks Excavator. That code isn't working with it for some reason - I checked it in firefox too - the bg images don't appear at all.
    You just didn't adjust the path to the images to match where they are on your computer. The path in that code is where they are on my computer.

    Try this instead - dlthomas demo
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you - that seems do be working really well on yours, but for some reason mine won't work even with the correct path?

    hrnewseastanglia.com

    I'm applying your code to a php template file that is attached to that page... I'm not sure if that makes a difference

    Another thing I was wondering was, with this code if the content scrolls the page... will the background act as if it's fixed or will it appear at the bottom of the document?

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Definitely a path issue with your images. What is the actual full path, from http:// all the way to .jpg for them?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    bugger.. just put those paths in and the images are there now but not at the bottom.. it seems that the container being too big will break it?:
    http://hrnewseastanglia.com/

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Look at the demo now. I think the scroll works better now.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by dlthomas View Post
    it seems that the container being too big will break it?:
    It was the 100% height. That gives you one full screen, but more content needs to scroll farther than one screen.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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