I'm trying to fix a blank space at bottom of footer (I'm seeing in iPhone 7 Plus mobile). I honestly need help with this.
I've tried various methods (ie: overflow, margin, padding) and none had worked. I also tried to view mobile version on page testing sites but they don't show any blank space.
Odd or is it just my phone?
Looking through your code - this img element seems to be creating the issue:
<img src="https://tags.rd.linksynergy.com/cs?ns=ssc&uid3=5d062c714cedfd0012d95054">
Oddly enough, the img element is only there when I first visit the page. If I refresh the page, the element is gone. This leads me to believe that there is some JavaScript dynamically adding it to the HTML. The image itself seems to broken and never loads either. See screenshot below.
You might want to remove this <img> added the end of the file
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.
I have a problem with a site displaying correctly in IE11. Everything is fine in Firefox and Chrome.
It is built using zen cart and the index page is made up of a series of html banners. One of these banners contains the code to display a twitter feed. In IE11 this is being output outside of the div it is supposed to be in.
I'm looking for suggestions on how to fix this issue. I tried adding an IE specific line in the stylesheet to move it up but it goes so far, until the top of the feed is roughly aligned to the bottom of the coloured heading next to it, and then one pixel more and it jumps up dramatically.
I resolved this by removing the height and margin-top that i had set on the original div and then added new positioning to the stylesheet using the class in the embedded code provided by twitter. The additional css i added is just loaded up along with the embedded css.
It seems that there's no similar problem as mine that I can find in the Internet. So my problem is a huge white space at the bottom of the website that I am currently developing. It only appears after I uploaded it to the server that I have but it isn't when I test it in my WAMP server. What could be causing it? I double checked my CSS and can't find the one that I think causes the problem.
The following image shows the bottom of the page when it's tested in localhost:
http://i59.tinypic.com/rtnqqr.png
This is the image that shows what the bottom of the page looks like after being uploaded to a test server:
http://i59.tinypic.com/sg7las.png
In case you need the exact website:
http://www.bagongbayani.url.ph
Notice that there's already a white space at the bottom of the page. What do you think causes that to happen?
I am using Unsemantic Responsive Grid Framework for that site.
NOTE: Don't resize the screen to a smaller one. I am not yet finished with the design of the mobile view.
The white space appears at the bottom of the layout when the page contents are not as tall as the viewport. Thus you get the body background showing at the bottom. There are fancy fixes for this, but really, the easiest and most practical solution (in my view) is to apply the footer background color (in this case, an image) to the body itself:
body {background-image: url(../images/zwartevilt.png);}
I have a dashboard that I have to show on screen and print to paper. It has dates and some colored blocks to form a grid.
On the screen, everything looks right. But when I try to print to paper, rows are broken in the wrong places, even though there's enough space left. I have tried making the grid smaller, but it keeps happening and break lines are introduced wrongly.
I only have this problem in Firefox. Safari and Chrome are working properly. I have not tested IE yet.
Here you have some screenshots that show the problem.
This is the way it looks on the screen:
This is the way it looks when printed (to paper/pdf):
In this link you can see the html and css that I wrote: Source code
Any advice?
Try not using a width in pixels for the main container but use the 100%
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!