Question

Hi all,

I’m making a website for a client and I’ve received a base template image, no HTML, CSS :(.

I’m trying to reproduce the template with my own HTML and CSS, but I’m encountering a problem.

I’m trying to absolute-position a button over the text “LOGIN” in the image. I’ve set the opacity to .4 so that you can see both the button (faint rectangle) and the text it’s trying to cover (LOGIN >).

The first image below is the whole thing in Safari.

This picture, however, is the same thing with the same CSS in Firefox. Notice how the button is way above, where in the first case it was below.

How do I fix this? It’s a big problem, and although I could leave it how it is, I’d really like to fix it.

Thanks in advance!

****EDIT****:

People are asking for code so here it is. I’m having the same problem with input text boxes so I’m posting the code for that.

CSS first:

input.fp-login-u {
    position: relative;
    top: 74px;
    left: 740px;
    width: 100px;
    padding: 3px;
    border-radius: 3px;
    outline: none;
    border: 1px solid #000000;
}

Then the HTML:

<input type="text" class="fp-login-u" />

Everything is in <header> tags, margins and padding are defined and not the problem (on those elements).

****EDIT AGAIN****:

Sorry for being unclear.

The white text “LOGIN” is the background image of the div that holds all this content. Once I position the faded login button properly over it, I will remove it.

The new faded button, not the white text, is what is moving.

Answer 1

If you show some code I can look at what’s going wrong. Otherwise I would say a workaround is to use relative positioning and set margins

#login {
    margin: 10px 30px 0px 30px;
}

Another option is to use it’s own background image (same image you were already using), and obviously change the position values to your needs. This won’t take extra load time because they have already loaded the image.

#login {
    margin: 10px 30px 0px 30px;
    background-image: url(images/top_banner.jpg);
    background-position: -30px -233px;
    background-repeat: no-repeat;
}