ansaurus

Question

Why does absolute positionining within <button> works differently from <div>

Answer 1

A:

Your problem is only with Firefox?? (3.6.6) - Can't fix it with standard CSS. Try:

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}

That will do it for Firefox hopefully. Good luck!

Emile 2010-07-18 07:20:35

Answer 2

+1 A:

I advice against using a this way. It is really difficult to style and you'll end up having to write specific styles for different browsers. I needed to achieve something very similar and after dealing with a large amount of exceptions and fiddly positioning to accommodate different browser rendering, I went for this structure instead:

<div class="button">
 <span>
  <button>Text</button>
 </span>
</div>

With the button tag reset this way:

button {
    background:none repeat scroll 0 0 transparent;
    border:0 none;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
    overflow:visible;
    padding:0;
   position:relative;
 }

You can even use js to wrap the on page load. This system has turned out to be much more solid and reliable. Requiring less css and almost no browser specific styling.

Update: As I commented below, the wrapping element should not be an a tag. Remember that we need the to keeps its functionality, we just need it to be text only (form will still submit on enter). You can still re-use any css that you may be using to turn standard links into expandable button widgets only in this case it;s a div instead of an a.

lupalz 2010-07-20 09:46:36

I end up using <a..> tag for that, so that I can use href attribute in place of button's/submit `name` attribute, and use jQuery to turn all those <a class='button'...> into button widgets. How do you handle enter-click on forms? is there a jQuery plugin for that?

2010-07-20 16:25:30

You can't wrap an <a> around a <button>. If we were to make a plain <a> into an expandable button widget, you just add the span inside and apply the css for that. But because it is a <button> we are dealing with, you need to stick with the <div>. Remember that we are not removing the <button> tag, so the form will still submit on enter, as well as when clicking on the button (depending on the dimensions of the button widget you may need some css tweaking to make sure that the clickable areas is wide enough)

lupalz 2010-07-26 11:41:28

ansaurus

tags:

views:

answers:

Why does absolute positionining within <button> works differently from <div>

related questions