niche Posted May 8, 2012 Share Posted May 8, 2012 (edited) Why does changing font-size, from 8px to 9px, in the button class, stagger the buttons? Firebug says there's plenty of room. In-line styles are used for convenience. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><?php session_start(); ?><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>ebop </title><style type="text/css">.button {margin:0px;padding:0px;width:60px;height:60px;font-size:8px;text-align:center;}</style></head><body><?phpecho '<div style="margin:0px 0px 0px 0px;float:left;overflow:visible;width:195px;height:160px;">';//right div //button div echo '<div style="margin:0px 0px 0px 0px;float:left;overflow:visible;width:180px;height:100px;">'; echo '<button class="button" >Item Details'; echo '</button>'; echo '<button class="button" >Phone'; echo '</button>'; echo '<button class="button" >Hours'; echo '</button>'; echo '</div>'; //closes button divecho '</div>'; //closes right div?></body></html> Edited May 8, 2012 by niche Link to comment Share on other sites More sharing options...
ShadowMage Posted May 8, 2012 Share Posted May 8, 2012 (edited) It has to do with the vertical alignment of the buttons. By default, vertical alignment is set to baseline (ie, baseline of text in the button). You'll notice that when you increase the font size, the first button's text increases to two lines. This shifts the baseline of the button, altering the alignment of the other buttons on the same line. To fix this, set the vertical alignment to something else (top seemed to work well for me). .button { ... vertical-align: top;} Edited May 8, 2012 by ShadowMage 1 Link to comment Share on other sites More sharing options...
niche Posted May 8, 2012 Author Share Posted May 8, 2012 I learn something new here almost everyday. Thanks for your help ShadowMage. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now