...

View Full Version : Bottom positioning imposible in internet explorer 8??



dlthomas
12-10-2010, 05:57 PM
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:



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



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

dlthomas
12-10-2010, 06:00 PM
oh sorry... that last bit of css was meant to be:



#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!

Excavator
12-10-2010, 06:12 PM
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.

dlthomas
12-10-2010, 06:24 PM
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!

dlthomas
12-10-2010, 06:25 PM
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!

Excavator
12-10-2010, 06:47 PM
I never liked conditional statements and certainly never wanted to mess with as many as you have.
What does this do for you?
<!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>

dlthomas
12-10-2010, 07:19 PM
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!

dlthomas
12-10-2010, 07:21 PM
oh.. I'm using wordpress by the way if that makes any difference.

Excavator
12-10-2010, 07:30 PM
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 (http://nopeople.com/dlthomas/)

dlthomas
12-10-2010, 07:42 PM
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?

Excavator
12-10-2010, 07:52 PM
Definitely a path issue with your images. What is the actual full path, from http:// all the way to .jpg for them?

dlthomas
12-10-2010, 08:00 PM
The image path for them is:

http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG1.jpg
http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/bgGolfedge.jpg

dlthomas
12-10-2010, 08:04 PM
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/

Excavator
12-10-2010, 08:15 PM
Look at the demo (http://nopeople.com/dlthomas/) now. I think the scroll works better now.

Excavator
12-10-2010, 08:16 PM
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.

dlthomas
12-10-2010, 08:20 PM
Thanks for spending time looking at this, I really do appreciate it.

The only trouble with this is I can't fix the background image, because my client hated it when I showed them it that way before. Is there any way of getting it to stay at the bottom of the actual page? I don't mind if it takes js or anything else - as long as I have it working in ie8 for him I'm ok!

dlthomas
12-10-2010, 08:22 PM
It was the 100% height. That gives you one full screen, but more content needs to scroll farther than one screen.

Ah right I see... maybe that's the problem I had originally. I used jquery to force the body to 100% height if it wasn't already. Every browser was fine with it except ie8.

Is there another way of doing this?

dlthomas
12-10-2010, 08:26 PM
OHH! A bit of good news... I just took the height out of body and html and now it seems to be working

hrnewseastanglia.com

I'll have a go at putting all the content back in and will report back with progress. Thank you!

Excavator
12-10-2010, 08:30 PM
Is there any way of getting it to stay at the bottom of the actual page? I don't mind if it takes js or anything else - as long as I have it working in ie8 for him I'm ok!

Look at the demo page again.

dlthomas
12-10-2010, 08:36 PM
:( I think some of my other code is stopping this from working. I can't for the life of me figure out what though.

It was working fine with the blank content you've been using, but when I applied it to my original template it's gone all mental again: hrnewseastanglia.com

dlthomas
12-10-2010, 08:37 PM
For some reason, even though it's exactly what we've been using - the main image is disappearing up the top somewhere and the repeated image isn't at the bottom

Excavator
12-10-2010, 08:42 PM
You need to strip yours down a little.

Let's just assume for now that this will work as is and won't need conditional comments ... so all those can go until we decide later if one is really needed.

Also, I still see the jQuery thing that's making the body 100% is still there. We just talked about body height:100%; breaking this layout so that needs to go as well.


That's a start on it anyway.

dlthomas
12-10-2010, 08:43 PM
This is what I've done with the code that worked before I put it with my content:



html, body, #body1, #body2 {
width: 100%;
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
}

html {background: #000 url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/bgGolfedge.jpg') repeat-x bottom;}
body {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG1.jpg') no-repeat center bottom;}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}



#body1
{

text-align:center;
padding:0;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color:#000;
background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG1.jpg') no-repeat center bottom;

}

#body2
{
text-align:center;
padding:0;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color:#000;
background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG2.jpg') no-repeat center bottom;
}


The reason I do that is because the background image is different on the homepage to the rest of the site.. could this be my problem though?

dlthomas
12-10-2010, 08:44 PM
Yes thanks, you've been a great help - I think even if I have to recode it I understand a little more now.

This is my jquery.. I tried to stop ie8 from seeing it:



<!--[if !IE 8]>
<script type="text/javascript">

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame()
{
var h = $(window).height();
var w = $(window).width();
$("#body1").css('height', (h - 12));
$("#body2").css('height', (h - 12));
}

</script>
<!--<![endif]-->

Excavator
12-10-2010, 08:52 PM
This might work better. Grouping can be kind of hard to get at first but the basic idea is to load the things that are similar to all bodies throughout your site in body, then add only the things that are different to each specific body id.

Try this -

html, body {
width: 100%;
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
text-align:center;
}
html {background: #000 url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/bgGolfedge.jpg') repeat-x bottom;}

/* HTML5 tags */
header, section, footer, aside, nav, article, figure {
display: block;
}
#body1 {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG1.jpg') no-repeat center bottom;}
#body2 {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG2.jpg') no-repeat center bottom;}



//edit: I see you've left of the fixed selector... That's kind of important.

dlthomas
12-10-2010, 08:57 PM
That seems to be working better... it didn't work at first but I took out my site footer:



#footer
{
position:relative;
margin-top:157;
bottom:10px;
left:50%;
margin-left:-400px;
vertical-align:text-bottom;
text-align:left;
width:800px;
height:12px;
font-family:Georgia, Times, Times New Roman, Serif;
font-size:10px;
color:#fff;
}

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


For some reason the body background image isn't showing though?

dlthomas
12-11-2010, 11:15 PM
Thankyou Excavator! I've been rebuilding the website today and this problem has dissapeared!

Excavator
12-12-2010, 01:05 AM
Right on :thumbsup:
Glad to help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum