Archived

This topic is now archived and is closed to further replies.

  • 0

Branding image moving off to the right on Firefox

Question

Posted · Report post

Hi, I have a problem with the Branding Logo on this website. On most browsers (Safari, Chrome, Opera) looks centered, but in Firefox looks way out to the right. I'm using PageLines Framework 2.2.5 and this is my custom CSS related with the header:

/* Header*/
	header#header.container-group {background:#000000; padding-top:40px; !important;}
	div.outline section#branding.container div.texture div.content div.content-pad div.branding_wrap a.plbrand {margin-left:280px; margin-top:-45px; padding:0; !important;}
	
	/* Home-blank-space*/
	.page-id-181 header#header.container-group {margin-bottom:-1000px; padding-bottom:0; !important;}
	
	/* Menu*/
	/* No-line*/
	.navigation_wrap {border-bottom: 0 none !important}
	
	nav#nav_row.main_nav ul#menu-main-menu.main-nav {margin-left:56px; width:900px; margin-top:-40px; !important;}
	
	.main_nav li:hover {
	background-color: transparent;}
	
	/* Main-Sections*/
	ul#menu-main-menu.main-nav li#menu-item-220.menu-item a{color:transparent;
	background: url("/wp-content/uploads/2012/07/workout-button.png") no-repeat scroll left center transparent; width:265px; height:60px; !important;}
	
	ul#menu-main-menu.main-nav li#menu-item-220.menu-item a:hover {color:transparent;
	background: url("/wp-content/uploads/2012/07/workout-button-inv.png") no-repeat scroll left center transparent; width:265px; height:60px; !important;}
	
	ul#menu-main-menu.main-nav li#menu-item-219.menu-item a{color:transparent;
	background: url("/wp-content/uploads/2012/07/wellness-button.png") no-repeat scroll left center transparent; width:284px; height:60px; padding-bottom:2px; !important;}
	
	ul#menu-main-menu.main-nav li#menu-item-219.menu-item a:hover{color:transparent;
	background: url("/wp-content/uploads/2012/07/wellness-button-inv.png") no-repeat scroll left center transparent; width:284px; height:60px; padding-bottom:2px; !important;}
	
	ul#menu-main-menu.main-nav li#menu-item-218.menu-item a{color:transparent;
	background: url("/wp-content/uploads/2012/07/beauty-button.png") no-repeat scroll left center transparent; width:226px; height:60px; !important;}
	
	ul#menu-main-menu.main-nav li#menu-item-218.menu-item a:hover{color:transparent;
	background: url("/wp-content/uploads/2012/07/beauty-button-inv.png") no-repeat scroll left center transparent; width:226px; height:60px; !important;}

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

The branding image appears to be moved out of the branding wrap container and it may have to do with the branding image being implemented with javascript. You can try using the browser-specific plugin to come up with CSS that allows you to move that image specifically on Firefox: http://www.pagelines.com/store/plugins/browser-css/

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina, I installed the plug-in. How can I implement it? could you please give an example?

Share this post


Link to post
Share on other sites

Posted · Report post

I tried this:

@-moz-document url-prefix() {
	.page-id-411 div.branding_wrap a.plbrand img.mainlogo-img {
	     margin-left:-600px;
	  }
	}

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry, I forgot to include the link on how to use the plugin: http://www.pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage Here's an example of the CSS you'd use to adjust the position of the branding image (added to Custom Code > Custom CSS):

body.firefox img.mainlogo-img {margin-left: -#px;}

Adjust the number of pixels until the positioning is just right.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

Not trying to hijack this thread, but since the 'symptoms' are the same, I figured I would just add to this one.

 

 

I too have been having a similar issue with FF.  My problem stems from the "recommended" way of adding Google Adsense into the branding section above the mainlogo-img.  

 

pagelines-customize/functions.php

 

 

add_action('pagelines_inside_top_branding', 'google_leaderboard_ad');
// function name
function google_leaderboard_ad(){
?>
<div class="leaderboard">
<script type="text/javascript">
    google_ad_client = "ca-pub-4654815947711460";
        /* Leaderboard */
google_ad_slot = "8176564403";
google_ad_width = 728;
google_ad_height = 90;
//-->
 
</script>
<script type="text/javascript" 
</script>
</div>
<?php } ?>
 
 

Without any CSS, this advertisement is left justified in IE, Chrome, FF, and Safari.  I then scoured the Pagelines forums again and came across some recommended CSS for this.

 

 

#branding .leaderboard {
        float: left;
  margin: 5px 2% 0 0;
  padding: 0 11%;
        z-index: 10;
        position: relative;
}
 
 
Now with the addition of this CSS, most desktop browsers behave as expected except for FF.
 
IE: Everything looks correct
Chrome: Everything looks correct:
Safari: Everything looks correct
FF: Advertisement is centered correctly, but my logo is way out in right field.
 
 
So I would assume that everything could be fixed by CSS, but I am a little lost on how to proceed.

 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

 

If you install the browser specific css plugin you'll be able to target the css for firefox in particular.

http://support.pagelines.me/docs/plugins/browser-specific-css/

 

Then you can use the .firefox command before your current css and change the figures to suit the display in firefox.

 

 

.firefox
#branding .leaderboard {
        float: left;
  margin: 5px 2% 0 0;
  padding: 0 11%;
        z-index: 10;
        position: relative;
}

Share this post


Link to post
Share on other sites