Looking for help with github ribbon code

[ApplianceJunk]

Awesome, that works great!

Maybe someone else can explain why it works the way it does in Safari. I uploaded a video to youtube showing how the ribbon disappears in Safari when you start to scroll the page.

http://youtu.be/AEOhXeUYp0M

Thanks again for all your help with this.

[TheKnown]

I asked a friend who knows coding to have a look and he cannot reproduce this issue :/

[ApplianceJunk]

Thanks for him looking.

Was thinking it was maybe my Mac version of Safari, Version 7.0.2 (9537.74.9) so I took a look using Safari on my iPhone 5 and it cuts off the same way.

Not sure if it's a clue, but it seems to cut off just at the bottom of the username/password login text boxes.

[TheKnown]

this is a long shot but can you try adding

z-index: 100;

after the position: fixed; please

[ApplianceJunk]

ok, just added it and reset Safari. Still gets cut off.

[TheKnown]

well i am stumped :/

[ApplianceJunk]

no problem, you have been very helpful. Thanks again.

[ApplianceJunk]

Searching online for a solution and found this. Sounds similar to what I'm trying to work with, but not sure how I go about adding them properties to position:fixed or maybe it's nothing like what I'm doing.

Why does Safari seem to have a problem with css position:fixed?

You have position:fixed on a few elements but you haven't set any of top, left, right, or bottom to tell the browser where they should be positioned. The browser will be left to guess (within limits) what you mean if you don't specify the position and different browsers will guess different things. The solution is to add left and top properties to all your position:fixed elements.

http://stackoverflow.com/questions/6824456/why-does-safari-seem-to-have-a-problem-with-css-positionfixed

[TheKnown]

you have them specified already:

this is what they are on about:

top: 42px;
right: -43px;

[ApplianceJunk]

shows you how much I know, haha

[Chen Zhen]

ApplianceJunk,

Try the position:relative attribute for the first container (fixed being in your second container). 

Regards.

[ApplianceJunk]

ApplianceJunk,

Try the position:relative attribute for the first container (fixed being in your second container). 

Regards.

Hi,

Not sure exactly how to do that. Could you post the code for me to copy and paste, thanks.

Just playing around with it tonight and when I change the position to left-bottom or right-bottom if floats just fine in Safari, even without adding position:fixed anyplace.

[Chen Zhen]

ApplianceJunk,

  I did not bother looking at your site before a moment ago. Imo your issue is that the 2 css style sheets you added to the template are not closed. You need to learn to close your html tags because I also see many others on the page (unrelated to this example) that have the same issue.  Ignore my previous suggestion and apply what is shown below.

Your 2 css link tags for the ribbon should look like this:

Code Select Expand


<link rel="stylesheet" type="text/css" media="screen" href="http://appliancejunk.com/forums/mobiquo/smartbanner/appbanner.css" />
<link rel="stylesheet" type="text/css" href="http://www.appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css" />


Regards.

[ApplianceJunk]

Seem to have found the problems.

In my CSS I have this...

Code Select Expand


.github-fork-ribbon-wrapper {
  width: 150px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  pointer-events: none;


I changed it to this...

Code Select Expand


.github-fork-ribbon-wrapper {
  width: 150px;
  height: 150px;
  position: fixed;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  pointer-events: none;


I will also check out the 2 css link tags your talking about.

Thanks,

[ApplianceJunk]

ApplianceJunk,

  I did not bother looking at your site before a moment ago. Imo your issue is that the 2 css style sheets you added to the template are not closed. You need to learn to close your html tags because I also see many others on the page (unrelated to this example) that have the same issue.  Ignore my previous suggestion and apply what is shown below.

Your 2 css link tags for the ribbon should look like this:

Code Select Expand


<link rel="stylesheet" type="text/css" media="screen" href="http://appliancejunk.com/forums/mobiquo/smartbanner/appbanner.css" />
<link rel="stylesheet" type="text/css" href="http://www.appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css" />


Regards.

I don't know where you are seeing this. Should I be looking in my index.template.php file?

[Chen Zhen]

ApplianceJunk,

Yes, that is where you added the tags to load those style sheets. You need to correct the 2 tags you added by replacing them with what I provided.

Do you use Firefox?
Download and install this plugin for it:
https://addons.mozilla.org/en-US/firefox/addon/html-validator/

After it is enabled, navigate to your forum pages and right-click view source. It will highlight your html errors and tell you what needs to be fixed. Ignore empty spans and table summary attributes (considered misdemeanors). It will show you all those non-closed tags that are causing errors and incorrect display on your forum pages.

Regards.

[ApplianceJunk]

I don't have anything like this in my index.template.php

Code Select Expand

<link rel="stylesheet" type="text/css" href="http://www.appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css" />

What I do have though is this...

Code Select Expand

<link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.css">
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.ie.css">
    <![endif]-->

Maybe it just shows up different for you for some reason...

[ApplianceJunk]

To give you a bigger pitcher of the code I have all this just before the closing head tag.

Code Select Expand


echo '

<!-- BEGIN Tynt Script -->
<script type="text/javascript">
if(document.location.protocol=="http:"){
var Tynt=Tynt||[];Tynt.push("bYgXyUPTyr4yWfacwqm_6l");Tynt.i={"ap":"Read more:"};
(function(){var s=document.createElement("script");s.async="async";s.type="text/javascript";s.src="http://tcr.tynt.com/ti.js";var h=document.getElementsByTagName("script")[0];h.parentNode.insertBefore(s,h);})();
}
</script>
<!-- END Tynt Script -->

<!-- START COPYING HERE -->
    <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.css">
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.ie.css">
    <![endif]-->
<!-- END COPYING HERE -->

</head>
<body>';


[Chen Zhen]

find:

Code Select Expand


<!-- START COPYING HERE -->
    <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.css">
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.ie.css">
    <![endif]-->
<!-- END COPYING HERE -->


replace with:

Code Select Expand


<!-- START COPYING HERE -->
    <link href="', $settings['theme_url'], '/css/gh-fork-ribbon.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <link href="', $settings['theme_url'], '/css/gh-fork-ribbon.ie.css" type="text/css" rel="stylesheet" />
    <![endif]-->
<!-- END COPYING HERE -->


  You have other tags on the page causing issues. Imo use the tool to which I provided a link to guide you in learning html markup.
Look stuff up on w3schools for detailed explanations. Your Doctype declaration is XHTML therefore some tags need closing whereas in HTML5 some would not.

Regards.

[ApplianceJunk]

ApplianceJunk,

Yes, that is where you added the tags to load those style sheets. You need to correct the 2 tags you added by replacing them with what I provided.

Do you use Firefox?
Download and install this plugin for it:
https://addons.mozilla.org/en-US/firefox/addon/html-validator/

After it is enabled, navigate to your forum pages and right-click view source. It will highlight your html errors and tell you what needs to be fixed. Ignore empty spans and table summary attributes (considered misdemeanors). It will show you all those non-closed tags that are causing errors and incorrect display on your forum pages.

Regards.

I do have Firefox for Mac.
When I go to that link it says, "Not available for your platform".
Any others?