float an program icon on the website

[gracexl]

We just installed a program which display an icon on our website, tried to figure out how to make the con float on our website so that the icon follows the customers when customers scroll down our web pages. How can I achieve that?

Thanks,

Grace

[Snookerman]

You can use fixed positioning for that. If you need it to work in IE6 as well, take a look at this article:
http://ryanfait.com/position-fixed-ie6/ (http://ryanfait.com/position-fixed-ie6/)

Good luck!

[gracexl]

Thanks!

I will look into this. Does that only work for IE6? I would need for it to work on any types of browsers, ideally.

[Snookerman]

It works in all other popular browsers as well. That is just a fix to make it work in IE6 since it has problems with fixed positioning. If you don't care about IE6, you don't really have to bother about that "hack" but just use position:fixed;. That should work in all other popular browsers, although with some minor differences.

Good luck!

[gracexl]

Thanks for the great help!

I implemented on one of website perfectly, but was not able to on another website. Is there any PHP version requirement for it to work?

The one that works has higher/newer versions as below:
* Linux Kernel 2.6! Increased performance over the 2.4 kernel.
* JFS support! JFS is a journaling 64 bit file system that allows
for files greater than 4 GB in length and has superior performance
compared to XFS and ext2fs.
* Apache 2! Increased performance over the 1.3 apache.
* PHP 5!
* MySQL 5!

[Snookerman]

Is there any PHP version requirement for it to work?
No, this is just HTML and CSS. You must have missed something. Please post a link to the site and I'll take a look.

[gracexl]

I actually resolved the issue. But there is another issue that I don't know how to fix. Here is the link: http://www.camptents.com/greatout.htm

Certain parts of the web page moved around. Our goal is to implement this online chat program without covering any texts and pictures on the website.

Thanks so much for your wonderful help! I can't imagine such generous help!

Grace

[gracexl]

Here is the original working website. www.camptents.com. Any suggestion on how to seperate the moving icon with the body of website would be very much appreciated. We want the moving icon by visible to our customers at all time without covering any parts of our website.

Thanks in advance for your expertise,

Grace

[Snookerman]

That happens because of the star selector that targets everything on your page:

* {
margin: 0;
}
try removing that and adding this instead:

body, wrapper {
margin: 0;
}

Good luck!

[gracexl]

You are so wonderful! It works like a charm!!! Thank you!

[gracexl]

One more question, we found that it screwed up the i-phone display. It is not able to scroll down the whole web page. It uses Apple Safari Browser. Any Idea on how to fix that? We haven't tested on Mac. yet.

[Snookerman]

I'm sorry but I don't have an iPhone so I can't test this. What you could do is create another page for the iPhone that doesn't use the IE6 technique (I doubt anyone is running IE6 on their iPhone). You could also do this by using conditional comments to only pass the code to IE6 users. If you some tips on coding for iPhones, take a look at this screencast:
http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/ (http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/)

Good luck!