Top Region of Page not clickable - html

Curious problem here...the top 80 pixels or so of the header of my website isn't clickable. Any element in the top 80 pixels doesn't respond to hover events or clicks etc. Bringing a link down below this area with a margin-top or something makes it clickable. Even the top half of the logo image isn't clickable while the bottom half is. Really can't figure out why this happening.
The url is at http://www.vapetropolis.ca.
Why is this happening?

In future try to post questions with specific code examples so future users can easily see what's going on.
That being said, it looks like the <div class="cms-links"> is covering up the 80px you're talking about. I removed it using the inspector and the problem went away.

Related

css - fixed parent div showing 0.4px whitespace beneath content - cant fix it?

I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.

How do I make the top portion of my page remain a different color than the body even when I zoom-in or out?

I've seen similar questions to do this but so far I can't find any that address the obvious. On my website the top portion is a different color than the body which I created using a div and setting a color to that div. Two simple questions.
How do I get that div to fill the entire portion of the header of the screen regardless if I zoom in or out?
And how do I keep my title and menu bar from falling out when I zoom-in the browser?
I have gotten close so many times but there is always a compromise. Either the div fills the entire header but when I zoom in the text falls out and causes the div to wrap around the page or the menu wraps and it's just gotten frustrating. I hope what I wrote made sense but if not here is a clear example of what I want to accomplish. http://carlodiego.businesscatalyst.com/index.html#home
Notice on this page that if you zoom in or out the top portion remains filled with the same color.
How do I get that div to fill the entire portion of the header of the
screen regardless if I zoom in or out?
simply make the add css with width:100% && margin:auto

MooTools Page Peel back image sticking out on effect

I have a Mootools Page Peel function that works well, except that when you hover over the 'small' image(small peel), and the bigger one expands, the back image can be seen behind the front image suppose to cover it. Please see my example: http://jsfiddle.net/uc6PJ/1/
I made the animation slow so that you can see what I mean - Look at the bottom part of the effect, you will see it does not look right.
Thank You!

CSS image pop up

I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...

How to make divs extend to the bottom of the page for every zoom

Is there a way to have a div extend to the bottom of the page no matter what the zoom is? I have tried to use fixed positioning and absolute positioning and I can't get the sidebar to extend just to the end of the viewable area?
Here is a screenshot of what I have so far. The scroll bar on the side only applies to the column on the right. I want that to extend to the bottom of the viewable area along with the map. This is on minimum zoom.
http://flic.kr/p/a5mEU7
I have made a jsfiddle version of your page at here.
I believe this is the solution you were after, be warned it may not work 100% in all browsers but it gives you a starting point.
-UPDATE-
The previous jsfiddle URL I gave was incorrect, just changed it to the correct one (got the original one wrong, sorry)