/    Sign up×
Community /Pin to ProfileBookmark

Extra spacing for php conditioned link?

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:

[url]http://img441.imageshack.us/img441/9020/19024875.gif[/url]

PHP condition:

[CODE]
<?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 } ?>
[/CODE]

CSS for button:

[CODE]
#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;
}
[/CODE]

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

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@PprakashApr 28.2010 — 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;

}
Copy linkTweet thisAlerts:
@user438authorApr 28.2010 — 
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;

}
[/QUOTE]


Didn't work.
Copy linkTweet thisAlerts:
@criterion9Apr 28.2010 — What does the rest of the HTML look like around those statements?
Copy linkTweet thisAlerts:
@user438authorApr 28.2010 — [CODE]
<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>
[/CODE]
Copy linkTweet thisAlerts:
@criterion9Apr 28.2010 — What are the applicable styles on the containers?
Copy linkTweet thisAlerts:
@user438authorApr 28.2010 — [CODE]
#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;
}
[/CODE]
×

Success!

Help @user438 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...