Okay. I know there are dozens of similar threads. I've checked almost each and every one and couldn't find a working solution. I've tried negative margins, min-height, max-height, absolute footer, background-color to the body, even putted overflow:hidden to all main containers in the page. Then putted clearfix class to all of the main containers, tried putting border but the border showed below this space? I also unchecked in the browser inspector the line-height property on the body, which is set to 1 and that made the white line disappear but I need that line-height and it doesn't seem like a legit solution. So..that 1px white space at the bottom still shows on some pages of these 2 sites I work on, only on Internet Explorer (latest) and MS Edge (latest). These are the links to the specific pages:
http://www.flatrocktech.com/ on Edge only and Careers page on IE & Edge (I can't post more than 2 links)
http://flatrockoutsourcing.com/services.html (on IE & Edge)
This is one of the annoying bugs I've ever encountered.
For me, on Edge and IE10, it is caused if html/body elements have a line-height anything other than 1. Also, even if it's not 1, if I have enough page content (lets say, 150% of current viewport height), the issue dissapears if page content amount is less than before mentioned.
I had this issue and thought it had to do with the parallax effect I was using. I ended up changing my height from pixels to percentage and it cleared it up without effecting anything else.
.footer {
background-image: url('images/filler4.jpg');
background-repeat: no-repeat;
height: 100%;
background-attachment: fixed;
background-size: cover;
}
This issue will happen on IE or Edge if you set heights for the footer. Remove the height and set padding like in your design for footer instead of height. Then set the footer line height to normal.
footer {
padding: 1em;
line-height:normal;
}
Related
I have these TWO websites which I just realised both have this issue, and it lies with the navbar. When on mobile device size they get these annoying scrollable white borders on just the right side.... changing padding and margin of anything doesn't help at all. But changing position: fixed; to relative fixes it but obviously makes the navbar not stick. So for some reason the z axis layer of the document is getting a bigger overall width than the body or normal y and x axis divs.....?
Site 1: http://myleisure.com.au
Site 2: http://danceforovariancancer.com.au
I'm not sure about your navbar being the problem. I can't reproduce it on my phone to know for sure, but I did test it on OSX Chrome at 320px wide.
I went into the dev tools and either deleted elements or manually added overflow: hidden; to find out where it made a difference. From what I saw, various minor problems are hidden throughout the sites that are causing overflow (and thus, scrollbars).
On the first site, this particular rule seems to be the actual culprit...
In "css.css":
.col-centered {
...
margin-right: -4px;
}
On the second site, you have nested .rows. A .container has 15px of padding to offset child .row's -15px margins. But .rows do not have the same padding, so they cannot be nested.
Your nesting problem appears at the "BONUS EVENT" heading within the
Acts section.
Also, add the img-responsive class to the image of Jane Hill's
signature in the About section.
Finally, at 320px width, the email provided in the footer is too long
to fit. I would recommend that you change the paragraph wording and swap it out for a mailto link like:
Emma Robinson
Try this:
html, body {width:100%; overflow-x:hidden;}
I have a big absolute div that holds a smaller relative div. The smaller div wraps an Image (png) and auto sizes with height:auto. All works fine. But on one particular site, I get 5px of extra spacing at the bottom of the smaller div after the resize, like it over calculated the height needed? I assume I'm somehow inheriting something from the site that is impacting my resize and div container.
I reworked everything, clear floats, overflow, alternate positioning, removed auto option, flow, etc, but I can't seem to get rid of that 5px extra at the bottom, and its only on that site?
My question - how do you debug your height or auto height issues, and any idea what could be causing this?
Thanx,
Chris
on the container div:
line-height: 0px; will eliminate any height increase caused by white space.
padding: 0px; will eliminate an padding along the inside of the container div.
on the image
margin: 0px will eliminate any space added around the outside of the image.
Could you point us to the site or a jsfiddle so we can get a better idea of what's going on?
As #RyanMcDonough mentioned, Chrome's Inspector is awesome. In IE, you have the IE developer toolbar. In FF you can use Firebug (which is a classic!).
Try
font-size:0;
line-height:0
for smaller div
Example http://jsfiddle.net/U9z5K/14/
Or use
display:block;
for an image
I'd use something like Chrome's Inspect Element, and have a look at the css rules that are affecting it.
You can then go through all the elements and enable/disable on the fly to see what is affecting it.
https://developers.google.com/chrome-developer-tools/
I suppose the best way to show this is in an example: jsFiddle here
Notice that the container (.overlay_inner) with the black border has padding on all sides. If you click on the button in the top right labeled "select" the container's bottom padding disappears!
This strange behavior only occurs for me in Chrome (version 13). I don't see it in IE or Firefox.
I've sort of narrowed the problem down to this block of CSS:
input[type=button]:active {
background: -webkit-linear-gradient(top, #eaeaea, #e2e2e2);
box-shadow: inset 0 0 3px #aaa;
}
Relevant part is the box-shadow. When I remove that bit of CSS, the problem doesn't occur. Doesn't make sense to me, though. Any thoughts?
EDIT: Potential work-around found. I removed the container's bottom padding and added a placeholder div at the bottom with a height equal to the padding amount removed.
Example: jsFiddle here
Feels really hackish which makes me uncomfortable since I thought I left that behind when I stopped writing for IE, but oh well ¯\_(ツ)_/¯
I managed to minify the test case to this: http://jsfiddle.net/4GfWY/8/ and I found that the requirements for this bug to occur are:
You must have a block with
overflow: auto;
position: relative;/* Or on any other block in this but over absolute one */
padding-bottom: 100px;/* Any bottom padding */
Some content that would cause a vertical scrollbar.
An inner block with position: absolute.
And if you'd then change box-shadow for this inner block, the bug occurs.
So, there can be a lot of workarounds, the best I think is: http://jsfiddle.net/4GfWY/9/
There I replaced the position: absolute to float: right (and made some other corresponding changes ), so:
One of the requirments for bug is gone, and the bug itself is gone.
If you'd have a lot of text in title, you could make it wrap: http://jsfiddle.net/kizu/4GfWY/10/ (I replaced there height to min-height), so the button wouldn't overlay the title's text.
For example, if I make a block of four images that are absolutely positioned with 50% width and 50% height, the result in Internet Explorer looks like this:
http://img716.imageshack.us/img716/8376/96774641.png
The images are placed right next to each-other, as would be expected.
But the same code in Chrome produces this:
http://img560.imageshack.us/img560/7976/chrome.png
The images are shrunken slightely to make room for the spacing in-between.
My styles already include:
border-style: none;
border-width: 0;
padding: 0;
margin: 0;
... so why is Chrome spacing my images apart from each-other, and how can I fix it without altering the display for other browsers that render correctly in the first place?
EDIT: <link removed>
Be aware that the actual page is much more complicated, with over 1,000 <img> elements.
It will load slowly in any browser that is not hardware accelerated.
I have confirmed that FireFox renders it identically to IE8, with the images next to each-other as they should be.
This could be a rounding issue: A width of 50% may well end up as 223.5px for example.
Seeing as you're using images with a fixed size, why not specify the positions in pixels as well?
Are you using a CSS reset? Browser default styles can cause irritating problems like paragraphs with differnt top margin heights or other quirks of layout. This particular case may not be fixed with a CSS reset, but it would eliminate the possibility.
Sadly, the CSS3 option to set a background image scale is not yet available in any reliable way, or you could set the image as a repeating background image scaled to 50%, which of course would have no gaps. That won't be an optin for quite some time, most likely.
Have you tried using the Inspector (right-click on the image, select Inspect element) to trace where that spacing is coming from?
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.