Jump to content

Button text ruining alignment Solved with Thanks in last post


niche
 Share

Recommended Posts

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 by niche
Link to comment
Share on other sites

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 by ShadowMage
  • Like 1
Link to comment
Share on other sites

I learn something new here almost everyday. Thanks for your help ShadowMage.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...