Chrome / Firefox CSS Issue: Help Me Fix It!

[TheBigK]

I'm trying to place the default Xenforo 'Signup' button on my site in the header like this : -


(^ 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) :-

/* 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) -

<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

 

[TheBigK]

Those who'd like to take a look on the live site; please head over to: http://www.crazyengineers.com/community/forums/mechanical-automobile-engineering.43/

 

[Chris D]

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

Let's see...

 

[Chris D]

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:



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



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

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

<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!

 

[TheBigK]

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?

 

[TheBigK]

Anyone with a solution that requires changes only to the CSS I've written to fix the issue?

 

[Chris D]

.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.

 

[TheBigK]

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

 

[Chris D]

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]

Update: Padding-top: 4px; fixed the issue in chrome and FF ! Thanks a ton, Yorick!