I have an issue which I assume is CSS, but I cannot seem to find the fix for it. I am using a WordPress theme (the site can be viewed here: http://sencb.com). Everything functions as intended, unless the screen size is somewhere sub 1050px wide. I know most modern monitors are much wider than that, but this is still a fix I'd like to find. The problem, when the screen/browser window is smaller in width, usually somewhere around 1050px, the whole scrolling content side (the right side) shifts left over the fixed area and navigation menu. I've tried just about everything I can think of, so I am in hopes someone here can find the fix. Thanks in advance!
The problem is the sidebar is using position fixed. Whatever the browser's width/height and scroll coordinates, the sidebar will always be in the same place in the window. The content area, on the other hand, moves naturally and is able to appear anywhere on the browser window space. Sometimes it just happens to overlap the sidebar.
Try adding z-index: 300 to #main-leftarea and see if that works for you.
Related
Here is my site: http://www.requitedesigns.com/seele/
To see the problem, you'd have to load up the site in Chrome or FF responsive mode, say the iPhone responsive mode. Scroll to the bottom. You should see the bottom of the page where the copyright is, is not quite there. It's as if it hangs up somewhere around Featured Author or Featured Video.
The reason seems to be the coloumn image, in the middle of the page, the one next to "Ultimate Shortcodes". If I hide that image by removing it's height (set by the matchHeight JS library), I can then see the content at the bottom of that page. But, restore that image height, and the content gets pushed down off screen? I must be missing something. I can't figure out why that happens. I tried disabling all the overflow CSS, to no avail. Is there a CSS guru out there who can point me in the correct direction?
Thanks!
I added a min-height css, seemed to fix it. Not sure why. Oh well. Sorry I could not duplicate an ENTIRE SITE for most of you chaps.
Morning All,
I'm having a very annoying issue with a sticky footer using Ryan Fait's - however the main problem is the footer overlaps my "main" div with the content when the browser window size is reduced. when you make the browser window small enough, it eventually disappears. I just want to stop it from overlapping the content, so as I make the window smaller, the footer sticks to the bottom of the page until it gets near the "main" div, then it should go out of view (creating a scroll bar for the page).
I've searched for and tried more than a dozen fixes via google to no avail (I have a feeling it's probably a piece of bad code on my behalf causing an issue) - I'm recently getting back into the swing of things with web design.
Enough of my talking anyway, see for yourself here: http://www.steviespittle.com/recruitment/design3/index.php
P.s. it's not optimized for I.E 7/8 at all - another issue I'm struggling with as I'm not familiar with cross-browser compatibility.
Any help would be appreciated.
Thanks,
Stevie
I'm working on the following project and I'm having a small problem with my entire page shifting about 5-10px when the page content goes beyond a certain lenght.
http://www.thewaymultimedia.com/IML/
I'm not sure what I"m missing, I've spent the past couple of hours looking at my CSS to see if I have an extra padding or margin but I cant narrow it down. Anyone a pro at CSS familiar with this problem.
If you go in the about menu and then click on 'board of directors" menu and you will see what i mean. If i reduce the content it will stop, but this page will require quite of bit of vertical real state.
Any suggestions. The website is using WordPress by the way
Is it possibly because it is going beyond the length of the window and is, therefore, needing a scroll bar?
That is due to the scrollbar...
I'm trying to develop an horizontal scrolling for a landing page. I'm trying information that I found here. But I want to make something similar, but not exactly that...
In that Web page, we have two elements:
We can see we have a menu, and an horizontal list of boxes. This list works as expected: if you press on a link on the menu, it jumps to the correct box. If you go to a mobile browser, it scrolls right and left using your hand.
But, when you scroll right with the mobile browser, the menu on the top, stays at the left of the layer, disapearing from the visible part of the Web. If you do so with a computer browser, the menu stays always at top left.
I want the menu to always stay at top, even if I'm using a mobile browser, so I can scroll, let's say, some images, without hiding left the content of my Web Page.
How can I do so?
I hope I explained myself correctly.
If you also think there's an easier way to make a scroll horizontal, I'm open to suggestions.
PS: I want a kind of result like this:
Mobile browsers have issues with fixed positioning - see this article which also provides a list of JavaScript Solutions.
I am working on our new corporate website. I took over for someone else. I just resized the IE8 window to make it smaller and the left side of my page is cut off. I get a scroll bar at the bottom of the window, but it won't let me see part of the left side of the page. There's nothing weird about the site. It's html with some javascript and a couple of stylesheets that were created by the previous developer.
Is there any way I can prevent this from happening? Or force the bottom scroll bar to allow me to go all the way to the left side of the website?
Check for some rules in CSS styles with margins set to negative values. Probably the positions of your containers got messy after you change the size of the window.