CSS Forum

**scuts** · 05-13-2010, 01:57 PM

Not sure why, and I have been messing with this for a while, but in IE, these 2 images float top left and drop the site. In firefox they do just what I want and stick to the bottom right of the site.

How do I get it to stick bottom right in both ie and ff?

Code:

css for those 2 elements

.facebook {
    background-image:url('facebook.png');
    height:76px;
    width:77px;
    padding:0;
    position:fixed;
    bottom: 15px;
    right:5px;
    margin: 5px 5px 5px 5px;
}
.blog {
    background-image:url('blogger.png');
    height:76px;
    width:77px;
    padding:0;
    position:fixed;
    bottom: 100px;
    right:5px;
    margin: 5px 5px 5px 5px;
}

Code:

html/php for those (yes I know its ugly)
echo "<a href=\"http://www.facebook.com/pages/Buckventures-Outdoors/10150114226955297?ref=ts&v=wall\" target=\"_blank\"><img src=\"themes/".$site['site_themename']."/facebook.png\" class=\"facebook\" border=\"0\"></a><a href=\"http://www.facebook.com/pages/Buckventures-Outdoors/10150114226955297?ref=ts&v=wall\" target=\"_blank\"><img src=\"themes/".$site['site_themename']."/blogger.png\" class=\"blog\" border=\"0\"></a>\n";

link http://outdoorsindoors.net/DEV/BVO/

any help would be appreciated

**LadynRed** · 05-13-2010, 02:42 PM

It's working fine in IE7, so what VERSION if IE are you seeing the problem? Let me guess.. IE6? If so, IE6 doesn't support position: fixed.

**scuts** · 05-14-2010, 09:30 AM

ie 8 it wont stay fixed. I got it bottom right, that is fine, but sticks in the same spot when you scroll instead of staying bottom right

and I actually had to change over to absolute to get that to work

Code:

.facebook {
    background-image:url('facebook.png');
    height:76px;
    width:77px;
    padding:0;
    position:absolute;    
    bottom: 15px;
    right:5px;
    margin: 5px 5px 5px 5px;
    display:block;
}
.blog {
    background-image:url('blogger.png');
    height:76px;
    width:77px;
    padding:0;
    position:absolute;
    bottom: 100px;
    right:5px;
    margin: 5px 5px 5px 5px;
    display:block;
}

any ideas?

**LadynRed** · 05-14-2010, 03:31 PM

You'd have much better results if you'd dump those nasty tables for layout.

**scuts** · 05-14-2010, 10:26 PM

trust me I know

This is a php cms that I have written and been maintaining for YEARS. I am just now converting over to the div/css approach. It would take too much work on this project to cut out the tables.

is there any way to do what I am looking to do with this?

**scuts** · 05-18-2010, 08:36 AM

no one?

**Phunk Rabbit** · 09:05 AM

Just out of interest, try replacing your doctype with:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

ref: http://stackoverflow.com/questions/1...tioning-in-ie8

Edit: Nice site BTW.

**LadynRed** · 03:20 PM

Oh yeah.. go back to an ancient, loosey-goosey doctype.. that's just NOT a good solution.

Scuts - the icons don't really go where you might want them if you want them in the lower-right corner of the window. This is one case where using positioning is the most likely solution, given that the rest of the site is in tables. You have the icons in that div, but you haven't applied any styling to it at all - except that align="left" which don't see the point of.

I would suggest putting the icons inside their own container, then positioning that bottom,right where you want it. If you set the main "container" div to position: relative, you could then position the icon div relative to that, otherwise it's just going to be positioned relative to the body.

**Phunk Rabbit** · 05-18-2010, 03:51 PM

Quote:

Originally Posted by LadynRed

Oh yeah.. go back to an ancient, loosey-goosey doctype.. that's just NOT a good solution.

Sarcasm was a little unnesessary.

If the change in doc type fixed the problem then he could use it as a temp measure.

Since he is already coding his site using tables then the boat has sailed on "good procedure".

**LadynRed** · 05-18-2010, 06:27 PM

I can't agree with that at all, considering he's working with a OLD site that he's now trying put something new into. He didn't recently create it using old methods.

Given what he's trying to do, going backwards to that old doctype isn't going to solve his problem.

**Phunk Rabbit** · 05-19-2010, 03:17 AM

But yet he cant expect to use new methods on old foundations or there is more chance of causing secondary errors. in my opinion of course.

**scuts** · 05-19-2010, 11:17 AM

thanks for the help guys. I am by no means a css expert, or even a web expert. I am just trying to work with what I have

I put the icons in what I think is a container

Code:

</div> <!--- ends main site div ---->
<div class="icons"><a href="http://www.facebook.com/pages/Buckventures-Outdoors/10150114226955297?ref=ts&v=wall" target="_blank"><img src="themes/BVO/facebook.png" class="facebook" border="0"></a><a href="http://www.facebook.com/pages/Buckventures-Outdoors/10150114226955297?ref=ts&v=wall" target="_blank"><img src="themes/BVO/blogger.png" class="blog" border="0"></a></div>
</body>
</html>
<!--- style for those --->

.facebook {
    background-image:url('facebook.png');
    height:76px;
    width:77px;
    padding:0;
    margin: 5px 5px 5px 5px;
    display:block;
}
.blog {
    background-image:url('blogger.png');
    height:76px;
    width:77px;
    padding:0;
    margin: 5px 5px 5px 5px;
    display:block;
}
.icons{
position:fixed;
bottom:10px;
right:5px;
}

it still works just great in FF, but not in IE

**LadynRed** · 05-19-2010, 02:26 PM

You can't use position:fixed and expect it to work in IE6 - IE6 does not support position:fixed. If you just HAVE to support that rotting browser, use conditional comments to call a separate IE6-only stylesheet and use position relative or absolute to position the icons.

**scuts** · 05-19-2010, 03:42 PM

this is in IE 8

**LadynRed** · 05-19-2010, 08:39 PM

IE 8 is rendering it in Quirks mode - update your DOCTYPE to at least HTML 4.01 Strict. Once I told IE8 to use Strict mode, the icons went where they were supposed to go. I would also suggest that you give that icons div a width that's a least as wide as the icons, right now it's taking on 100% width because you didn't specify a width.

**scuts** · 05-19-2010, 10:10 PM

YOU ARE THE WO-MAN!!!!!!!!!!!!! Thank you so much. That fixed it, I gave it a width as well. How does it look to you?

**LadynRed** · 05-21-2010, 03:22 PM

You're welcome! Looks good!!