Extra spacing for php conditioned link?

[user438]

At first it was just a simple href link with a background image, and they all stacked next to each other nicely.

Now I added a little php if condition where if user is logged in show "Logout" link, otherwise show "Login" link and what it does now is add a weird extra spacing on both sides of the button, which it turn makes other buttons slide next line.

The button has the same class and styling, and identical to the other link buttons except for that php if statement.

The illustration:

http://img441.imageshack.us/img441/9020/19024875.gif

PHP condition:

<?php if (!$signed) { ?>
      <a class="button" href="<?php echo str_replace('&', '&amp;', $signed); ?>">Login</a>
      <?php } else { ?>
      <a class="button" href="<?php echo str_replace('&', '&amp;', $signout); ?>">Logout</a>
<?php } ?>

CSS for button:

#menu .button {
margin-left: 1px;
margin-right: 0px;
margin-top: 0px;
width: 101px;
height: 40px;
background: url(button.gif) no-repeat;
display: inline-block;
border: 0px;
}

What is causing that kind of behavior?
Its cross browser issue by the way, and no I don't use ie6.

[Pprakash]

try like this

#menu .button onclick {
margin-left: 1px;
margin-right: 0px;
margin-top: 0px;
width: 101px;
height: 40px;
background: url(button.gif) no-repeat;
display: inline-block;
border: 0px;
}

[user438]

try like this

#menu .button onclick {
margin-left: 1px;
margin-right: 0px;
margin-top: 0px;
width: 101px;
height: 40px;
background: url(button.gif) no-repeat;
display: inline-block;
border: 0px;
}

Didn't work.

[criterion9]

What does the rest of the HTML look like around those statements?

[user438]

<div id="div2">
		<div id="menu">
	<a class="button" href="<?php echo str_replace('&', '&amp;', $home); ?>">Home</a>
	<a class="button" href="<?php echo str_replace('&', '&amp;', $link2); ?>">Text2</a>
<?php if (!$signed) { ?>
      <a class="button" href="<?php echo str_replace('&', '&amp;', $signed); ?>">Login</a>
      <?php } else { ?>
      <a class="button" href="<?php echo str_replace('&', '&amp;', $signout); ?>">Logout</a>
<?php } ?>
	<a class="button" href="<?php echo str_replace('&', '&amp;', $link5); ?>">Text5</a>
	<a class="button" href="<?php echo str_replace('&', '&amp;', $link6); ?>">Link6</a>
		</div><!--end of menu-->
		</div>

[criterion9]

What are the applicable styles on the containers?

[user438]

#div2 {
float: left;
clear: right;
height: 40px;
overflow: hidden;
}

#menu {
width: 522px;
height: 40px;
float: left;
}

#menu .button {
margin-left: 1.5px;
margin-right: 0px;
margin-top: 0px;
width: 98px;
height: 40px;
background: url(button.gif) no-repeat;
display: inline-block;
border: 0px;
}

#menu a {
margin-left: 0px;
margin-right: 0px;
font-size: 11px;
font-weight: bold;
padding-top: 15px;
margin-top: 0px;
text-align: center;
}

#menu a:hover {
text-decoration: underline;
color: #C20000;
}