Text size Button size?

HTML & CSS
1

Hi all

This is a really simple question, I’m trying to learn CSS again and I’ve forgotten everything.

I have a basic vertical list navigation.


<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Test</title>
	<style type="text/css">
	
	#nav{
		margin:0;
		padding:0;
		margin:50px 0 0 100px;
		list-style-type:none;
	}
	#nav li{
		display:inline;
	}
	#nav a{
		display:block;
		width:7em;
		background:#036;
		color:white;
		padding:.5em .2em;
		border-bottom:1px solid #fff;
		text-decoration:none;
		font-family:Verdana, sans-serif;
		//font-size:.5em;// changing the font size changes the box size
		padding-left:.5em;
	}
	#nav a:hover{
		background:#69c;
		color:#000;
	}
	
	</style>
</head>

<body>
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">People</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Places</a></li>
		<li><a href="#">Contact</a></li>
	</ul>	
</body>
</html>

If I don’t change the font size the buttons are this size

If I change the font size it effects the size of the buttons to this size

I know this is very basic but how can I change the font size without changing the button size, or should I set the font size then adjust the surround box to the size I want. Can anyone explain why this happens

Thanks in advance for any help.

2

Hi,

em sizes (for width and height etc) are specifically designed to create a relationship between the font size and the size of the element. This is to allow the layout to be scaled uniformly but to still retain the same dynamics. the em width is calculated from the parent’s font-size so if you change the font-size you also change the width/padding/margins etc.

If you want a fixed width container then use pixel measurements for the container but you could find that when a user resizes the text then the text will break out of the container if you have fixed the width and height.

However if you are careful and don’t make things too tight then you should be ok.


#nav a {
    display:block;
  [B]  width:110px;[/B]
    background:#036;
    color:white;
[B]    padding:8px 5px;[/B]
    border-bottom:1px solid #fff;
    text-decoration:none;
    font-family:Verdana, sans-serif;
}