SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Button Not Displaying Properly in Firefox

    I have a large action button that is coded in php on my site. While the button displays fine in Safari, it does not in Firefox and Chrome. The site is www.vappingo.com.


    PHP:Safari.jpgChrome and Firefox.jpg

    If I shorten the text, e.g. type "Order now" it displays fine in Chrome and Firefox but shows a complete button and then a blue block of text in Safari:


    Safari shorter text.jpg

    This is the css:

    #slider a.big-button {
    left: 80.5%;
    position: absolute;
    top: 250px;
    z-index: 100;
    display: block;
    }
    #slider {
    width: 1064px;
    }

    Here is the home page code:

    <h3 align="center"
    style="color: rgb(0, 109, 145); font-size: 1em; font-weight: normal; margin-bottom: 1.8em; text-align: left; display: inline !important; "><?$APPLICATION->IncludeComponent("custom:big.button", ".default", array(
    "TITLE" => "Free instant quote",
    "LINK" => "/order_here/"
    ),
    false,
    array(
    "ACTIVE_COMPONENT" => "Y"
    )
    );?></h3>

    I have tried playing around with the css but can't get the button to display correctly on all three browsers. Does anyone know how to fix this please?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Wera. Welcome to the forums.

    These days, CSS rounded corners are so well supported that it's a waste of time to try methods like this. All you need is:

    HTML
    Code:
    <a class="big-button" href="" >
    CSS
    Code:
    .big-button {
      display: block;
      padding 10px 15px;
      -moz-border-radius: 14px; 
      -webkit-border-radius: 14px; 
      -khtml-border-radius: 14px; 
      -o-border-radius: 14px;
      border-radius: 14px;
      background: blue; /* change to suit */
    }
    The color, padding and radius values will need to be changed, but that's the basic idea.

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for your help.

    I have implemented your suggestion and it has improved the button significantly. The only problems I have now is that a line is appearing under the button in Firefox. I assume it is because it is viewing the button as a link. Do you know how I can remove this.

    Thanks again,

    Sarah

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hm, I still think you should get rid of those strongs and just use CSS rounded corners. (We don't see images for rounded corners around here much any more.)

    Anyhow, you could force the issue in FF with

    Code:
    .big-button {height: 31px;}

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're fantastic, thanks!

    I'm not quite sure what you mean re. the strongs. At the moment I have the following:

    <?php if (! defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die() ?>
    <a class="big-button" href="<?php echo $arResult['LINK'] ?>">
    <strong><strong>
    <?php echo $arResult['TITLE'] ?>
    </strong></strong>
    </a>
    <div class="clear"></div>

    and

    #slider a.big-button {
    height: 31px;
    display: block;
    float: right;
    position: relative;
    background: repeat-x left top #4f6c87;
    text-decoration: none;
    border: none;
    color: #ffffff;
    cursor: hand;
    top: 250px;
    right: 28px;

    }

    Is your suggestion the following?

    <?php if (! defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die() ?>
    <a class="big-button" href="xxx">
    <div class="clear"></div>

    and

    #slider a.big-button {
    height: 31px;
    display: block;
    padding 10px 15px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    -o-border-radius: 14px;
    border-radius: 14px;
    background: 4f6c87;

    Thanks again.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, the PHP is irrelevant in terms of the question, but here's an example of what I mean:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    a.big-button {
      display: inline-block;
      padding: 6px 24px;
      color: #fff;
      text-decoration: none;
      -moz-border-radius: 10px; 
      -webkit-border-radius: 10px; 
      -khtml-border-radius: 10px; 
      -o-border-radius: 10px;
      border-radius: 10px;
      background: #4f6c87;
    }
    </style>
    	
    </head>
    <body>
    
    <a class="big-button" href="#">Free instant quote</a>
    
    </body>
    
    </html>
    This way, you can also forget about setting a height on the <a>, which is not very nice anyway.

  7. #7
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I think I am almost there. The only problem now is that the button is appearing right at the top of the screen as opposed to where it should be located (above the dots of the slider). Is it possible to move it? I tried top: 250px; but that didn't work.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Sorry, yes, I wasn't focused on positioning. You could do something like this (adjust to suit):

    Code:
    .big-button {
      position: absolute; 
      top: 250px; 
      right: 20px;
    }

  9. #9
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that has fixed it.

    Thanks so much for taking the time to help me, I appreciate it.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    No worries. Glad to help! Please come back any time.


Tags for this Thread

Bookmarks

Posting Permissions

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