Jump to content
Sign in to follow this  
WarriorII

Branding image moving off to the right on Firefox

Recommended Posts

WarriorII    0
WarriorII

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
catrina    103
catrina

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/


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WarriorII    0
WarriorII

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
WarriorII    0
WarriorII

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
DIYPropertyManager    0
DIYPropertyManager

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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×