www.webdeveloper.com
Results 1 to 7 of 7

Thread: Extra spacing for php conditioned link?

  1. #1
    Join Date
    Apr 2010
    Posts
    14

    Question 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:

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

    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 } ?>
    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;
    }
    What is causing that kind of behavior?
    Its cross browser issue by the way, and no I don't use ie6.
    Last edited by user438; 04-28-2010 at 10:36 AM.

  2. #2
    Join Date
    Sep 2009
    Posts
    93
    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;
    }

  3. #3
    Join Date
    Apr 2010
    Posts
    14
    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.

  4. #4
    Join Date
    Jan 2009
    Posts
    3,346
    What does the rest of the HTML look like around those statements?

  5. #5
    Join Date
    Apr 2010
    Posts
    14
    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>

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    What are the applicable styles on the containers?

  7. #7
    Join Date
    Apr 2010
    Posts
    14
    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;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles