Issues with pointer-events and z-index - html

I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy, but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears behind all the rest of my content, but this is what I have so far:
here's my jsfiddle of my issue
it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:
.bottomdivtransparent {
pointer-events: none;
width: 100%;
top: 0px;
height: 300px;
left: 0;
overflow: hidden;
opacity: 0;
}
Which should make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..
Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?
Thank you!
edit: Thanks to Kasyx and Andrea Ligios for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..

As i noticed in comment pointer-events will not work in this case. But instead of it ill suggesting you to add margin-bottom to your div like in fiddle: http://jsfiddle.net/auFeV/6/
.bottomdiv {
//(...)
margin-bottom: 310px;
//(...)
}
(Thank you #Andrea Ligios for improving this answer)

Related

blank space on right side of website, culprit is not visible

My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }

Slick Slider extra margin/padding top

Have run into an issue with slick slider I have never seen before and cannot figure it out myself. The slides seem to be pushed down slightly from their container making them appear outside it and I cannot work out what is causing it. See screenshot:
Anyone got any ideas on what's causing this weird behaviour? I have searched through all my code for any hidden margins or paddings that may be causing this and had no luck.
Live site here. You can see this strange behaviour on the top and bottom sliding sections but not the middle one for some reason.
Thanks in advance!
Change position:relative; to position:absolute; style.css line 306.
.slick-slider .slick-prev {
left: 50px;
z-index: 10;
position: absolute;
}

Scroll bars never appear when re-sizing web page

so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}

Strange css overflow like effect taking place

I've been using a twitter bootstrap based template.
For the images at the bottom of the landing page, for some reason there is an extra scrollbar that appears which then causes the images in the portfolio at the bottom to appear cropped, or partially loaded.
Not sure which bit of html or css is causing this, as the problem doesnt seem to occur in the original template. I've checked and compared my code to the original but cant figure out what's causing it.
I have removed alot of the code from the original as i dont need much of it. I just wanted a simple homepage, but cant figure what's causing the additional scrollbar or overflow effect.
Here is the page link if anyone has any ideas: http://krmmalik.com/photography/
The reference to the Ascensor.js is what's breaking the site and adding all that ugly inline CSS to the body. I have no idea what it's supposed to be doing honestly but it's breaking things at the moment. I disabled js on your site and reloaded it and everything works fine.
That layout isn't responsive as much as it is just a fluid layout. It doesn't resize well honestly. I hope it wasn't terribly expensive. Either that or something you changed broke how it is supposed to resize.
I'd try and find out what that script is supposed to be doing, but in the meantime just remove the reference and your site seems to load correctly.
I'm seeing this in Chrome dev tools:
<div class="house" id="house0" style="height: 268px; width: 1726px; overflow-y: scroll; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
which sets a fix height, and then causes the second scroll bar when items drop below that height with the overflow-y:scroll; property.
However, this isn't in the View Source of your document! Getting rid of that is the key to fixing the problem, if you happen to know where it's coming from.
If you have control over it, maybe try changing it to:
<div class="house" id="house0" style="min-height: 268px; width: 1726px; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
What this (should) do is make it never be shorter than 268px while allowing it expand to a new height, if it needs to. I say should because I didn't test it!
here is you made silly mistake. just remove overflow-x: hidden;
and overflow-y: scroll; and your code something like this.
<div id="house0" class="house" style="width: 1263px; margin-top: 0px;
margin-left: 0px; position: absolute;">
Hope it will helps you, Cheers. !!
Mark it as answer if it will helps so that other can fix their same problems. Thanks.

Imaginary margin in IE8?

Does anyone know why the image is not aligned to the bottom right of the container where it should be, but instead has some sort of imaginary margin which causes it to overlap the button?
This occurs only in IE8, view the page in any other browser and it looks super.
Live example for your inspection.
Thanks in advance :)
Changing the css at line 1616 to "text-align:right" should fix it.
.dealerLogo {
text-align: right;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
I don't know why this is happening, and I didn't try hard enough to find out.
To workaround the problem, on .vcard .dealerImages .dealerLogo change text-align: center to text-align: right. This doesn't make any difference in other browsers, but fixes IE8.
You'll also need to add z-index: 1 to .vcard .dealerImages .dealerContact, to keep the rightmost part of the orange button working.