I've recently put a website online, and everything is going well, the site looks good, it all works, but there's one very subtle problem that I can't find the root of.
To see what I'm talking about, go to edited out . Click on one of the parts where it says "X comments", and watch the left side of the page. It moves, just a bit.
Now, maybe this doesn't matter at all, but it's been bugging me that I can't find the reason. Anyone have any ideas?
This kind of behaviour happens frequently. The problem is that the scrollbar appears only some times and nudges everything centered or right aligned. To prevent this, the best solution is to simply make sure the scroll bar always appears:
body{
overflow-y:scroll;
}
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css)
1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html
To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on?
Well I think I found out the issue I am not sure as I used firebug, my friend the problem is because of the values of z-index that you gave to #postarea #sidebar #sidebar1 #sidebar2 etc they have z-index:1 if you turn off them using firebug, it completely resolves the issue you are facing. I think z-index:1 is being considered bigger than z-index:99999999 that's why your content appear above the game and creates issues for you.
I think the issue is not because of z-index as they both are same for both sites, it must be something else that is effecting it. My guess is that the buggy site's design is maybe messing with it as I see contents appearing inside the game and when you click on borders the game disappears.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks