Jump to content


Photo
- - - - -

Branding image moving off to the right on Firefox


This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 WarriorII

WarriorII

    Member

  • Members
  • 29 posts

Posted 01 August 2012 - 03:42 PM

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:


Please Login or Register to see this Hidden Content



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 01 August 2012 - 03:55 PM

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:

Please Login or Register to see this Hidden Content



#3 WarriorII

WarriorII

    Member

  • Members
  • 29 posts

Posted 01 August 2012 - 04:26 PM

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

#4 WarriorII

WarriorII

    Member

  • Members
  • 29 posts

Posted 01 August 2012 - 04:32 PM

I tried this:

Please Login or Register to see this Hidden Content



#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 01 August 2012 - 04:34 PM

Sorry, I forgot to include the link on how to use the plugin:

Please Login or Register to see this Hidden Content



Here's an example of the CSS you'd use to adjust the position of the branding image (added to Custom Code > Custom CSS):

Please Login or Register to see this Hidden Content


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

#6 WarriorII

WarriorII

    Member

  • Members
  • 29 posts

Posted 18 August 2012 - 08:18 PM

Thanks

#7 DIYPropertyManager

DIYPropertyManager

    Newbie

  • Members
  • 3 posts

Posted 04 December 2012 - 10:15 PM

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" 
 src="

Please Login or Register to see this Hidden Content

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

 



#8 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 05 December 2012 - 12:43 AM

Hi there

 

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

Please Login or Register to see this Hidden Content

 

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

 

 

Please Login or Register to see this Hidden Content