CODEWITHSUNDEEP
csspositionfixed
user2670747
user2670747

Reputation: 1

Fixed position buttons appearing in incorrect area depending on browser

I am trying to make a simple html site:

http://www.williamcharlesriding.com/test/index3.html

The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:

.but1 {
    opacity:0;
    filter:alpha(opacity=0);
    position:fixed;
    top:463px;
    left:36px;
}

However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated, Thanks

Upvotes: 0

Views: 139

Answers (2)

microbug
microbug

Reputation: 315

Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.

Upvotes: 0

Chords
Chords

Reputation: 6850

Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.

.content {
    padding: 10px 0;
    background-color: #5a5958;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

I would probably add another class to each, so you could do something like this:

<div class="but but1">
<div class="but but2">

.but { position: absolute; }
.but1 { top: 463px; left: 36px; }

Upvotes: 2

Related Questions