Question

I’m trying to embed some CSS3 for my website buttons using custom CSS3 button generator (http://www.cssportal.com/css3-button-generator/). However, it creates some annoying issues. The whole div is pushed downwards! The CSS of the div that includes it is:

.login {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #DDD;
    font-size: 14px;
}

And the CSS of the button:

.button {
font-family: Arial;
  color: #ffffff;
  font-size: inherit;
  padding: 7px;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #003366 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#001a33));
  background: -moz-linear-gradient(top, #42aaff, #001a33);
}

If you want to check the html of the website itself, it’s the #navbar of http://www.nosfistis.com/

Answer 1

The CSS rule padding: 7px is causing it to be pushed down. Currently you have all these elements pushed down 10px using absolute positioning. You’ll either need to pull that one button up with negative margins (bad idea usually) or push all the others down. Generally try to keep your elements the same height in situations like this (ie: add padding to smaller elements).