benphp Posted December 30, 2009 Share Posted December 30, 2009 I can make the buttons the right size, but I can't get the plus (+) and minus (-) text to pop into the middle: <html> <head> <style type="text/css"> .SmallButton { padding:0px; height:12px; width:12px; font-size:9px; } </style> </head> <body> <input type="submit" name="btnWrite" value="+" class="SmallButton"> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/ Share on other sites More sharing options...
Zane Posted December 30, 2009 Share Posted December 30, 2009 try using text-align:center or set the padding to 1 or 2px Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-986065 Share on other sites More sharing options...
JustLikeIcarus Posted December 31, 2009 Share Posted December 31, 2009 Try it like this. You should always make sure you have a document type defined because it will affect the rendering of css, etc... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style> .SmallButton { padding:0px; width:14px; height:14px; } .SmallButton span { font-size:9px; line-height:10px; position:relative; top:-2px; left:-3px; } </style> </head> <body> <button type="submit" name="btnWrite" value="+" class="SmallButton"> <span>+</span> </button> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-986314 Share on other sites More sharing options...
haku Posted January 3, 2010 Share Posted January 3, 2010 text-align: center; line-height:12px; Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-987658 Share on other sites More sharing options...
benphp Posted January 4, 2010 Author Share Posted January 4, 2010 Thanks! haku got it for IE: .SmallButton { padding:0px; width:14px; height:14px; line-height:0px; } but it's still off in Mozilla Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-988247 Share on other sites More sharing options...
haku Posted January 5, 2010 Share Posted January 5, 2010 ??? You haven't set the text-align, and you set the line-height to zero. Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-988940 Share on other sites More sharing options...
benphp Posted January 5, 2010 Author Share Posted January 5, 2010 Yes, I don't want a regular sized button - I want it to be 12px high. So if you set the line-height to 12px, it doesn't work. The text-align doesn't do anything, since it's already aligned to center. Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-989029 Share on other sites More sharing options...
haku Posted January 6, 2010 Share Posted January 6, 2010 Ahh I see what you are saying. I just tried it out - you're right, the line-height doesn't affect anything with submit buttons. I don't really have a solution for you on this one mate. Sorry. Post back here if you figure something out - I'm curious about it. Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-989308 Share on other sites More sharing options...
Zane Posted January 6, 2010 Share Posted January 6, 2010 if you need it 12x12... why not just set the padding to 6px (all around)? .. instant 12x12 box (assuming something is in the box) Then you'd decrease the padding.... one pixel at a time to get it just right Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-989316 Share on other sites More sharing options...
haku Posted January 6, 2010 Share Posted January 6, 2010 Unfortunately that doesn't really work. Quote Link to comment https://forums.phpfreaks.com/topic/186719-how-to-make-tiny-12px-by-12px-square-buttons/#findComment-989376 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.