I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the button's placement.
You can view the problematic page here:
It is imperative that the CHAT button is placed immediately after the box as depicted in this image:
However, in other browsers, the button keeps shifting to the right excessively. Here is the CSS code I have been working with:
<style>
* { /* attempting to RESET CSS */
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
#tab /* highlighting the CHAT button */{
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 27%;
/*float: left;*/
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
#panel /* defining the panel properties */ {
min-height: 367px;
position:absolute;
left: 1355px;
top: 171px;
background-color: #D4D4D4;
max-height: 367px;
min-width: 0; /*new line*/
}
#panel .content /* customization for the chat */ {
min-width: 100px;
text-align: center;
/*margin-right:300px;*/
margin-right: auto;
max-width: 100px;
}
#close /* styling for the closing X symbol in the chat window */ {
position: absolute;
left: 1758px;
top: 168px;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
text-decoration: none;
}
#share /* positioning for sharing on Facebook after use of the chat feature */ {
position: absolute;
left: 1656px;
top: 540px;
font-size: 10px;
font-family: Verdana,sans-serif;
}
</style>
Thank you for your assistance.