It's a little bit difficult to ask a question, because I'm using mainly templated code for the outlooks of the (personnal) website I'm conceiving.
It's a template using html5/css3 and javascript (which doesn't seem to take a part in the issue I'm having).
So here it is : in firefox and explorer, the footer displays at the bottom of the screen even when the content of the page does not go that far. But in chrome, for a reason I do not grasp, the footer displays right under the content stop, leading to an ugly blank space from the end of the page to the end of the screen. Does anyone have an idea why?
I know it's difficult to answer without code, but since I only half grasp what's happening I can't really provide more information.
Thanks in advance!
Edit : https://jsbin.com/hozudepimi/1/edit?html,output
Added a bit of code if it can help
Related
I have a website I built using parallax.min.js on top of WordPress, and I am having a very weird issue. I've spent probably 4 hours on this and have concluded that a large white space is being added to the bottom of a div you can see in below screenshot.
when I view code I can see the white space is being added to only one of the parallax divs .para_block - the very last div block on that home page on top of the footer.
the dev site is located here - bloompeach.mybrowsertest.com - I know this is a long shot but I want to see if anyone smarter than me can see something easy I am leaving out.
what is crazy about this is I am using the same code on a site I built a few weeks ago located here - truffles.accountsupport.com - and I am unable to replicate the issue there. which makes this even more confusing.
I appreciate your time and energy it takes to review my post and the dev site, in an effort to fix this. heck if you can figure this out I'll buy you a coffee or a six-pack I am so exhausted trying to solve this.
I have changed the height of .parallax-window, now its look better
.parallax-window {
min-height:837px;
}
Folks -
Longtime lurker, first time poster. I've found many answers here in the past, and have always appreciated the expertise. I'm a bit of a noob, so bear with me:
I have a landing page. It displays well in Chrome, Firefox, Safari, and older versions of IE. All of the above include the the Google ReCaptcha - no issues, widgets work, etc.
IE 11 turns this to mush. My graphic fails to load, and it seems the recaptcha moves itself to the full width of the page instead of the small part I've intended.
Oddly enough, if I grab the sides of the browser window and adjust the width in any way (wider or narrower) the image snaps in where it should be, and the page looks perfect. Likewise, if I inspect the element, the page loads exactly as intended.
This seems like it should mean something to me, but my knowledge is too limited to get exactly what I'm being told. Can anyone shed some light on this for me?
I can furnish source code and screenshots if that's required.
Regards, Cheers, and thanks for any thoughts -
CDM
#Romulo helped me tremendously with this issue. The entire page was being loaded by a script, and there were errors within the script itself that needed correcting. The solution required a style block to be moved, which solved the issue. This was probably a once-in-a-lifetime issue, but if you find this page and think this might be what you're dealing with, feel free to message me and I'll be happy to discuss further.
Issue: I have problems with this page: http://kivusandcamera.com/blog/ The page loads with a proper layout, but then the two blog entries "jump" to the left behind the navigation bar. I have spent a good bit of time trying work through the various CSS, inspecting it with developer tools, etc..., but I have reached a point where I feel like I need some help. Any advice would be appreciated.
Background: This is just a basic Wordpress theme that I am trying to customize for a website, so I am not 100% sure how
Additional Information: Though I am passingly familiar with CSS, I have done hardly any work involving responsive design, media queries, etc... Basically, I am saying (1) I would not be surprised if it is something really simple that I am missing, and (2) if something could be done a better way, please feel free to let me know.
UPDATE - It looks like this issue might be Javascript or JQuery related. Basically, a style attribute is getting injected into one of the div tags. The style attribute used an absolute position, with a certain width, and I have no idea how to modify it.
UPDATE #2 - It appears the issue happens with any pages I set in the theme to "Full Width" (see also the http://kivusandcamera.com/about page.) I think those pages must get processed differently by JS layout framework that is used. Again, I still haven't figured out how that is all happening.
Turns out there were two separate issues:
(1) The JQuery auto-layout framework was resizing the various page columns with the assumption that the navigation bar was the same size as the individual columns of blog entries. That caused an issue that had to be solved.
(2) The full page CSS had to be updated to reflect the lack of a resizing navigation bar.
Ultimately, these issues were very specific to the this particular Wordpress theme, so I doubt full description of the solution would provide much of a benefit to the community. Thank you to everyone who helped lead me to the solution.
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I have a very basic slider on my homepage, but for some reason it stopped working in IE7, 8 and 9. I have no problems in all other browsers tested.
Here is a link to the JavaScript file I am using:
http://pastebin.com/xw3MpvCA
The relevent code for this slider is on the top of the file.
the website in question:
http://shawn.theanointedone.com
The slider in question is the small one with the black background right beneath my primary slider. It simply scrolls through a number of photo's that take a user to a specified Wordpress slideshow post.
Keep in mind that I am brand new to JavaScript, and doing my absolute best to get it right. I did run the script through jsLint, and it seems to come back fine.
Is there a rather basic rule that I have broken somewhere that only applies to IE?
Thanks so much for everyone's help. I'm actually having a great time and loving JavaScript the more I learn about it.
I have discovered what the issue is. Its with the disableCustomButtons(carousel) function in scripts.js from line 25 to line 40. What happens is that when the document loads the visible arrow on the left has an id of #mycarousel-next with a disabled attribute set to false while the invisible arrow on the right with id of #mycarousel-prev has 'disabled' set to true.
In IE both arrows have disabled set to 'false', which should not be so, that is why you are experiencing this problem and its from the disableCustomButtons function from line 25 to 40:
Thank you everyone for the advice!
The only thing I was unsure of is 'Yi Jiang' mentioned that my code could be shortened a lot, but gave no examples of how to do so.
Any ideas on this?