tags:

views:

45

answers:

2

I have the following markup:

<p class="managebox">
  <button value="Add page">
    <img src="page_add.png" alt="Add more content" />
    Add Page
  </button>
</p>

And the following CSS:

p.managebox { position: relative; }
p.managebox button { display: block;
                     padding: 5px 7px 4px 30px;
                     position: relative; }
p.managebox button img { position: absolute; left: 7px; }

In IE 8 I get this:

IE8

In Chrome 4.0 I get this:

Chrome

In Firefox 3.6 I get this:

Firefox 3.6

Does anyone know what I'm doing wrong? One thing I've just realised that may be relevant - if I use an a instead of button, it works fine.

+1  A: 

Never seen this problem, but for those particular pusposes I usually use background-image. Give it a try.

Update: just tried an SSCCE. I actually didn't need any style to get it to be positioned the same in all browsers.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2397413</title>
    </head>
    <body>
        <button value="Add">
            <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Calendar_add.png" width="16" height="16">
            Add
        </button>
    </body>
</html>
BalusC
So do I, not sure why I opted to do otherwise here - I can make that change, but I'd really like to know/understand *why*.
Dominic Rodger
Maybe a FF bug. In all the other browsers from IE6 and up (Safari, Chrome, Opera) it indeed works fine.
BalusC
A: 

Hard to say, p.managebox button img seems to be inheriting some CSS. Use FireBug to inspect the element and see what CSS is being applied. Looks like align though.

Dustin Laine
What difference would `align` make if `img` is positioned absolutely?
Dominic Rodger
It shouldn't that is why I would look at FireBug and see what is actually being applied.
Dustin Laine