Absolute positioned button wrong in FF

HTML & CSS
1

Hi all. As the summary says, I have an issue with an absolutely positioned button not behaving in FireFox (or, just maybe, it’s right in FF but wrong in everything else, it’s hard to tell the difference sometimes). I know that this is probably simple to fix, but I’ve tried looking for info on it and have had no luck so far.

It’s in a website that I’m building for a client and you can find the offending button at the following address:

http://www.openedgewebdesign.com/testing/infotrak/storybooks/medium/medium_level2.html

If you check it out in multiple browsers, you’ll see that Safari, Opera and IE8 render it ok. FireFox has it sitting partially below the form and IE 7 elongates it so that it covers the whole bottom of the form. I’m assuming the ie7 thing can be fixed by adding a width to the class.

Any help offered will be greatly appreciated.

Thanks in advance for your responses.

All the best,

Tim.

2

Hi,

Try something like this:


#storybookSignUp {
    [B]width: 39.5em;[/B]/* exact width added */
    margin: 0 auto;
    border: 2px groove #ff9900;
    height: 25em;
  [B]  position: relative;[/B] /* moved here from below*/
}

#details {
    width: 20em;
    height: 22.2em;
    float: left;
    padding: 1em;
[B]/* position:relative;moved from here */[/B]
    /*margin: 3.5em 0 0 0.5em;*/
}

.submit {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 0.5em 0.5em 0;
[B]    width:100px;[/B]
}

IE7 needs a width on the absolutely placed input because it will treat left as auto which makes it stretch all the way across.

The input will probably still be a few pixels difference between browsers because they add other invisible elements around inputs (for depressed effect and outlines etc).

3

Thank you so much Paul, you’re a life saver. I had to make the width of the storyBookSignup element 40em as 39.5 dropped it down below the image. This was obviously some sort of padding or margin issue.

You are brilliant mate, thanks again.