unemployment Posted March 7, 2011 Share Posted March 7, 2011 How can I make this button cross browser compatible? IE7 is rendering the input padding, some how even though it is set to 0. input { width:auto; overflow:visible; } input.invis[type="submit"], input.invis[type="button"]{ background: transparent none no-repeat 0 0 scroll; border: 0px none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; padding: 0; margin: 0; color: inherit; font-size: 14px; } span.button.invis{ background: transparent none no-repeat 0 0 scroll; border: 0px none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; padding: 0; margin: 0; color: inherit; font-size: 14px; } span.button.invis a{ font-size: 10px; margin: 5px 3px 0 0; padding: 3px; border: 1px solid transparent; } span.button.invis a:hover{ font-size: 10px; margin: 5px 3px 0 0; padding: 3px; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); background: #fff; border-color: #999999 #999999 #888888; border-style: solid; border-width: 1px; line-height: normal !important; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; } .button{ -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); background: #fff; border-color: #999999 #999999 #888888; border-style: solid; border-width: 1px; font-size: 11px; margin: 0px 3px; padding: 4px 8px; text-align: center; text-decoration: none; white-space: nowrap; float: left; } .dark_grey{ color: #333333 !important; } .button:hover, .button label:hover{ cursor: pointer; } .button a{ font-size: 14px; font-weight: bold; font-family:Helvetica Neue,Helvetica,Arial; } .button.disabled{ opacity:0.4; filter:alpha(opacity=40) } .button label{ padding: 0; margin: 0; } <fieldset class="mvs plm buttonfield"> <input type="hidden" name="action" id="action" value="" /> <span class="button"> <label> <input type="button" id="starttop" class="invis dark_grey" value="New Conversation" /> </label> </span> <span id="smarktop" class="button disabled"> <label> <input type="button" id="marktop" class="invis dark_grey" value="Mark as Read" disabled="disabled" /> </label> </span> <span id="sdeletetop" class="button disabled"> <label> <input type="button" id="deletetop" class="invis dark_grey" value="Delete" disabled="disabled" /> </label> </span> </fieldset> Link to comment https://forums.phpfreaks.com/topic/229887-ie-adds-input-margin-padding/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.