Hi all, I'm wondering if it's possible to create with css exactly the same buttons for links and submit form types? .but, .butlong { display: block; float: left; height: 16px; margin: 0px 10px 0px 0px; color:#337f92; background: #d2eaf0; padding: 2px; text-align:center; text-decoration: none; border: 1px solid #337f92; } .but { width: 100px; } .butlong { width: 175px; } Code (markup): with this html: <input type="submit" name="action_send" class="butlong" value="Verstuur bericht" /> <a href="/user/mailbox/delete/<?php echo $list->id; ?>.html" class="butlong">Verwijder bericht</a> Code (markup): gives this And another change (from a friend) .but, .butlong { font: 11pt arial; display: block; float: left; line-height:19px; margin: 0px 10px 0px 0px; color:#337f92; background: #d2eaf0; text-align:center; text-decoration: none; border: 1px solid #337f92; } .but { width: 100px; } .butlong { width: 175px; } Code (markup): gives this (not good in IE7 only good in FF) Anyone how to solve this problem in IE?
Short answer - no, no it's not possible if you use an input. Because the specification doesn't actually say how inputs are supposed to be styled, browser makers all went and did what they do best... Each go their own direction and to hell with what anyone else is doing. As such, in IE the CSS height property is ignored, though line-height gives you a bit of control, but expect extra horizontal and vertical padding over which you will have ZERO control. (even when you set padding:0; margin:0 In Gecko based browsers like FF, line-height has no effect, but it does obey height... though expect a DIFFERENT top and side padding over which you have no control. In Safari or Konqueror they ignore any styling the site designer wants, and will shove it's own styled buttons down your throat. While in opera they are treated as just another inline-block element... Which honestly is the only approach that makes the least bit of sense to me and completely allows you to do exactly what you are asking... ... at the very least the other browsers should treat them as block if you SAY display:inline-block or treat them as block if you say display:block - but no joy. Pretty much all the browsers have their heads wedged up their collective asses on this one - not entirely their fault since the specification doesn't even say. My 'solution' would be to style the input normally, but put a class on it like 'replaceWithAnchor' - then I'd use a javascript to trap all INPUTS, replacing any of them that have the specified class with anchors that have an onclick method on them. If javascript is not present the user gets an ugly input, but at least the page works - javascript present you get the nice pretty version of the page.