1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Chrome / Firefox CSS Issue: Help Me Fix It!

Discussion in 'Styling and Customization Questions' started by TheBigK, Apr 22, 2012.

  1. TheBigK

    TheBigK Well-Known Member

    I'm trying to place the default Xenforo 'Signup' button on my site in the header like this : -
    Screen Shot 2012-04-22 at 11.06.31 AM.png

    (^ How it displays in Firefox)

    Notice that the buttons have shrunk the sub-forum "CS | IT Resources & Tutorials". While Google Chrome handles this very well.

    I did the CSS on my own (easy on me, because I'm totally new to CSS) :-

    Code:
    /* Sign-Up And FB Login Buttons In Header */
     
    #CESignupButton {
        background-color: white;
        border: 1px solid #F9BC6D;
        border-radius: 8px 8px 8px 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        display: block;
        height: 30px;
        line-height: 30px;
        margin: 10px 5px;
        padding: 3px;
        text-align: center;
    }
    #CESignupButton .inner {
        background: url("styles/default/xenforo/gradients/form-button-white-25px.png") repeat-x scroll center -7px #CD0003;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        display: block;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12pt;
        font-weight: bold;
        text-shadow: 0 0 0 transparent, 0 0 3px rgba(0, 0, 0, 0.5);
    }
    #CESignupButton:hover .inner {
        background-color: #F9BC6D;
        text-decoration: none;
    }
    #CESignupButton:active {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        position: relative;
        top: 2px;
    }
     
    .joinnowbuttons {
    border: 1px @primaryLighter solid;
    padding-top: 5px;
    padding-left: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    width: 200px;
    float:right;
    display:inline;
    margin-top:-100px;
    }
    This is how I'm displaying it ( template ad_above_content) -

    Code:
    <xen:hook name="ad_above_content" />
    <xen:if is="!{$visitor.user_id}">
    <xen:if is="{$contentTemplate} !== 'forum_list' AND {$contentTemplate} !== 'register_form' AND {$contentTemplate} !== 'EWRatendo_Monthly'  AND {$contentTemplate} !== 'member_list' AND {$contentTemplate} !== 'online_list' AND {$contentTemplate} !== 'news_feed_page_global'">
    <div class="headerbannerad">
    AD-CODE-HERE
    </div>
     
    <div class="joinnowbuttons">
    <label for="LoginControl" id="CESignupButton">
    <a href="login/" class="inner">Become A Member!</a>
    </label>
    <div class="cta_fbButton">
    <a href="register/facebook?reg=1" class="fbLogin">
    <span>Login With Facebook</span>
    </a>
    </div>
    </div>
    </xen:if>
    </xen:if>
    I want to display the buttons adjacent to the banner advertisement gracefully (without shrinking any existing sub-forum divs in all the modern browsers). I'd really appreciate your help :)
     
  2. TheBigK

    TheBigK Well-Known Member

  3. Chris D

    Chris D XenForo Developer Staff Member

    Took me a while to realise what the problem was even though it was staring me in the face :oops:

    Let's see...
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    OK.

    If I use built in browser dev tools, I'm finding the problem is this bit in the CSS and nothing at all to do with your CSS:

    Capture.PNG

    In Firefox, if I add width: 100%; to this, it extends the area appropriately:

    Capture2.PNG

    I think you'd probably edit the "node_list" template from:

    Code:
    <fieldset>
    <ol class="nodeList sectionMain" id="forums">
    <xen:contentcheck>
    <xen:foreach loop="$renderedNodes" value="$node">{xen:raw $node}</xen:foreach>
    </xen:contentcheck>
    </ol>
     
    <xen:if is="{$newDiscussionButton}"><div class="nodeListNewDiscussionButton">{xen:raw $newDiscussionButton}</div></xen:if>
    </fieldset>
    to:

    Code:
    <fieldset style="width: 100%;">
    <ol class="nodeList sectionMain" id="forums">
    <xen:contentcheck>
    <xen:foreach loop="$renderedNodes" value="$node">{xen:raw $node}</xen:foreach>
    </xen:contentcheck>
    </ol>
     
    <xen:if is="{$newDiscussionButton}"><div class="nodeListNewDiscussionButton">{xen:raw $newDiscussionButton}</div></xen:if>
    </fieldset>
    At least, that's what I'd do. You could also assign it a class, and add some CSS into your EXTRA.CSS, but this is such a minor change, my way is certainly quicker!
     
  5. TheBigK

    TheBigK Well-Known Member

    Hi Yorick,

    The sub-forum area shrunk because of the edits I added to 'ad_above_content' template. Plus, chrome shows it right. Is there anything I can do to the ad_above_content template to rectify the issue?
     
  6. TheBigK

    TheBigK Well-Known Member

    Anyone with a solution that requires changes only to the CSS I've written to fix the issue? :)
     
  7. Chris D

    Chris D XenForo Developer Staff Member

    Code:
    .joinnowbuttons {
    border: 1px @primaryLighter solid;
    padding-top: 5px;
    padding-left: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    width: 200px;
    float:right;
    display:inline;
    margin-top:-100px;
    }
    padding-top: 4px; seems to fix it in Firefox, but this may cause problems in Chrome so I'd probably prefer to force the aforementioned fieldset style to 100% width.
     
  8. TheBigK

    TheBigK Well-Known Member

    Okay, just a question: Why is the .joinnowbuttons div is messing up with the sub-forums div which is below it?
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    For some reason, with the way Firefox renders it, it thinks that the joinnowbuttons div is overlapping the sub-forums div. So the only way I can see to overcome that is reduce the padding-top so they don't overlap or force the fieldset width to be 100%.

    There might be another solution, but I can't see it.
     
    TheBigK likes this.
  10. TheBigK

    TheBigK Well-Known Member

    Update: Padding-top: 4px; fixed the issue in chrome and FF (y)! Thanks a ton, Yorick! :)
     
    Yorick likes this.

Share This Page