Develop Reference

My nav bar suddenly scrolls left of the page, testing the Get button. Any idea why?

http://birdbreath.com/bb/sticky_navbb4.html
It begins the scroll properly, setting the right classes and suddenly scrolls left off the page.
I have tried a variety of things including overflow-x: hidden; .
Any suggestions?
Thanks

Did you add height and width property into your class? Could you clarify more, what do you want?

use this code in your css
#homePage{
overflow-x: hidden !important;
}

Unable to Close Fancybox iFrame

My issue is available at http://www.jeremiahbenes.com/#/portfolio by clicking on one of the tiles. I tested this in the latest release of Chrome for Mac and experienced the issue described below.
I have implemented fancybox, but when the iFrame appears, I am unable to close it. The "x" in the top-right corner appears to be unclickable. Here is what I have for my implementation:
<a data-fancybox-type="iframe" class="fancybox fancybox.iframe plink" href="http://gegarageenvy.com">
<span>GE Garage Envy</span>
</a>
The code I have for Fancybox is:
<script type="text/rocketscript" data-rocketoptimized="true">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Why does it not close?
(On another note, how can I set it to automatically take up 95% of available height and width? I tried using autosize, but that does not work).
Thanks for your help.

There is a class in your body tag which is disabling pointer events, which is stopping you from being able to click anything inside that fancybox,
.impress-enabled {
pointer-events: none;
}
If you remove this class from the body, then everything inside of fancybox become clickable.
Otherwise you can add,
pointer-events: auto !important;
to the CSS of .fancybox-wrap.

Ok, after googling a bit I found this solution. It's similar to that what #NZ Mikey said:
Add following CSS...
.fancybox-wrap {
pointer-events: auto;
}
The problem is a known one and can be found here:
https://github.com/jmpressjs/jmpress.js/issues/85
https://github.com/bartaz/impress.js/issues/172

Cannot position Google +1 button with CSS?

I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?

When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}

After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.

Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.

If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}

Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.

Empty Div doesn't register CSS events in IE6

I have two elements that have the same event onmousedown.
The elements also have a Cursor: move property set in the CSS style.
The elements are empty, and need be be empty, or at least transparent, except for the border.
In IE 6 the only the border registers the cursor change or activates the javascript event handler. IE6 treats the empty div's like they don't exist. If you hover or click on the border, it changes the cursor and can activate the onmousedown event.
This is not a problem in FF... Anyone know what's going on?
Example Fiddle

It's because IE6 hates web developers.
Make it happy by forcing the div to be non-empty, with a as content.
<div id="ie6-hates-you"> </div>

It works in ie6 if you remove position:absolute;top:0;left:0 from both containers.
Add float:right to #container2 and you get the same layout.

Wrap a container around the 2 divs and set it to position:relative;
<div id="test-container">
<div id="container1"><div id="container2"></div></div>
</div>
css
#test-container{position:relative;width:300px;height:300px}
This works in ie6.
Updated fiddle

that is becouse the absolute positioning..
you must set the width to 100%
width: 100%;