CODEWITHSUNDEEP
cssbrowsercross-browserzooming
Vinicius Santos
Vinicius Santos

Reputation: 35

Making a button fit in every browser

I am having a problem with my website. I created a button that will open a chat. But this button don't stay in the right place in all browser and screen monitors. Due to the browser zoom, the button do not stay like I want.

This is my page: http://www.assembleia.org.br/site/webtv/

The CHAT button needs to be right after the box, like this photo: http://imageshack.us/photo/my-images/20/cssfix.jpg/

But in others browsers, the button goes to right and right. Here's my css:

<style>

* { /* trying to RESET CSS */
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}

#tab /* the button CHAT */{
  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 /* the panel */ {
  min-height: 367px;
  position:absolute;
  left: 1355px;
  top: 171px;
  background-color: #D4D4D4;
  max-height: 367px;
  min-width: 0; /*new line*/
}

#panel .content /* for the chat */ {
  min-width: 100px;
  text-align: center;
  /*margin-right:300px;*/
  margin-right: auto;
  max-width: 100px;
}

#close /* for the little red X after opening the chat */ {
  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 /* for facebook sharing after opening the chat */ {
  position: absolute;
  left: 1656px;
  top: 540px;
  font-size: 10px;
  font-family: Verdana,sans-serif;
}

</style>

Thx..

Upvotes: 2

Views: 129

Answers (2)

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

use this 

#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}

Upvotes: 1

Josh McKearin
Josh McKearin

Reputation: 742

Use position: relative; attribute on your parent wrapper div, then change #tab CSS as follows:

  • Add position: absolute;
  • Change top to top: 50%;
  • Change right to right: 25px;

This was tested using Firebug and should give the desired effect.

Upvotes: 0

Related Questions