CSS - positioning footer - css

I've been stuck with a gap at the bottom of my footer: http://pactlegacy.com/site/overview.php
I really can't figure it out since it was just right, meeting the bottom of the window. I recently changed the pages to PHP but I don't see how that would effect anything.
I'm still kind of new to CSS so I got the Firefox Web Developer tool to help me troubleshoot. But that's not showing any padding or margins that would give me the gap at the bottom.
I'm really not sure what I'm missing here. Does anyone have an idea?

you have some whitespace characters before and after TOP
, removing them fixes the problem (I've checked it on Google Chrome dev tools)
EDIT:
to be more accurate, try to remove those lines from your code:
<!--////////////////// Load JS Files -->
<!-- JavaScript at the bottom for fast page loading -->

I was able to figure it out. My footer was in an include file which was editting in a different editor. It saved the file as UTF-8 format while the main file was saved as ANSI.
Saving them both as ANSI format removed the gap.

Related

Scroll issue on the page I developed

I'm currently working on the page of a site.
In this page the top bar is stuck at the top when i scroll down.
This issue occurs only in the Chrome browser.
When i opened it in Safari or other browsers it is working perfectly fine.
I tried disabling Javascript thinking js would have caused the problem. But the errror still occured.
I think the issue is with css style. but i'm not sure.
What would be causing this problem ?
Help me to sovle this issue.
If you need anything i can add here...
I expect to solve this problem in chrome since many people are using chrome.
Multiple Jquery has been initialized in both top and bottom of the page.
Use only one jquery and that is at the bottom side of the code.
From console, error looks like some order mismatch in initializing.
Please change the order of js import (First jquery-3.3.1.min.js then bootstrap.min.js and all other js files)
I checked your page out buddy, I don't see any top bars. Can you clarify further?your page as seen by me in chrome
If you meant the logo and the white line on the top, they are not fixed and scroll fine with the rest of the page.

YUI CSS template class .yui-t7 gap at top of page

Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space

responsive not full width when loading single page

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.

Site visualization problem with Chrome

I have a site based on Solar Sentinel Joomla template: www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
The HTML is throwing a lot of validation errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sism.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
My guess is that Safari and Firefox are rendering around these errors in a way that is according to what you would expect. Try fixing the errors and seeing what happens. If nothing else, you'll have ruled out invalid HTML as the issue.
It looks like your div class="col3" is inside your div class="colright".
Try placing div class="col3" outside the other one.

Mac browser messing up page

I have a webpage that is running in wordpress using thesis. The page shows up fine on a PC but the sidebar is being kicked down on any mac web browser. Can anyone point me in the right direction?
I've checked the content, sidebar, padding, margins, etc to make sure they aren't too wide to fit in the wrapper, but I don't see the problem. I need a fresh pair of eyes.
Can anyone help?
http://www.thesurgicalsolution.com/
You're missing an ending </div> tag, which will affect the sidebar placement, among other code errors. See [Invalid] Markup Validation of thesurgicalsolution.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
It can be resolved, for Safari 5.0.5 at least, with a clear:both added to div#content; but I'm not entirely sure why. Some of the body text is still spilling out to the right, behind the sidebars, so there may be a width/padding/margin problem there as well.

Resources