I have a problem that I am struggling to solve on IE8. I need a 100% height div but everything that I have tried doesn't solve the problem.
You can see the problem here: http://gyazo.com/71ffde560df4d3f87c0fb55a92ef8313
or reproduce here: http://maahes.ninja/ie/ie.html
Problem is that little white margin in the bottom of the page, and this only happens on ie8 (it's ok on ie9). I was able to solve it by removing the doctype yet that fixes the problem, but breaks all the application.
CSS:
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%;
min-height: 100%;
background:#9699FF;
color:#fff;
}
Sorry for not adding more images / links but I have no reputation for that.
There is no white margin on the screenshot you shared. What you see is an embossy-stiled Windows GUI-Element - the border of IE8s browser window.
You could try to verify this by adding a red background to the <html> tag.
html {
background: red;
}
This way you should see a red background, if your div had any margin-like effec on it.
I testet your link on my IE8/WinXP virtual machine and there was no extra margin. (see: Screenshot)
I enlarged the lower left corner of my screenshot (click here) so the inner window-border is more clearly to be seen.
Related
This white border is driving me crazy in IE and Edge, it does not appear in Chrome and Firefox.
If you follow the link:
Might.to
You will see that at the bottom of the page there is a white space of around 1 pixel high. I tried the common ways (after researching) to fix this:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border:0px;
margin:0px;
}
In my CSS:
*{
margin:0;
padding:0;
margin-top:0;
margin-bottom:0;
}
The white space only appears when I use position:fixed on my nav div (the top part). I want the "top" section to stick as the user browse through the website.
I looked around and I tried all solutions I could find on Stack Overflow or Google to no avail.
And I am unfortunately running out of ideas, can anyone help me out with this please?
Most of the site is made of "placeholders" for now, I want to fix the bugs and display glitches before changing everything.
Try to add:
width: 100%;
height: 100%;
border: none;
I have the whole page set to gray as the background color, but would like only the content area to be set to a different color. According to my CSS, this should be happening but it isn't. Why not?
html,
body {
background-color: #FAFAFA;
}
#page-wrapper {
margin: 0 auto;
padding: 0;
width: 1024px;
}
#content {
background-color: blue;
}
OK, well, I thought there might be an obvious answer, because this is a severly slimmed-down version of my code. Yes it has content and there are things in the page-wrapper.
The jsfiddle link is here: http://jsfiddle.net/2pzo80Lu/
Also, if anyone has critiques of the code otherwise, it would be much appreciated.
You need to add overflow:auto to your rules for #content because the children are floated. Floating them essentailly removes them from the normal flow and collapses the parent since it behaves as if there's no content. Adding the overflow rule restores the behavior you seek.
#content {
background-color: blue;
overflow:auto;
}
jsFiddle example
your elements inside #content div is floated right and left so the div has no height ( 0px ) , you can solve this in css by adding the following code
#content {
background-color: blue;
overflow:auto;
}
or in html by adding the following code before the close of the element of #content
<div style="clear:both;"></div>
this will clear any floating and you code should work very will. good luck
Okay, I've been trying to solve this question for years. I've tried a number of different solutions, but finding myself facing the same problem again, I'd really like to ask the community for the best way to solve this problem.
I want to have two images on the background of my page: 1 as an xy-tiled "texture", and another image which will hug the very bottom right of the entire page, regardless of the page height. So, the page will look like this:
This was accomplished not through a background img() in my CSS, but with an image near the footer, like so:
<style>
.specialImage{
position: absolute;
bottom:0;
right:0;
z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />
The problem with this is that if the page is longer than the screen, this happens:
No good. Changing position to 'fixed' cause it to have a 'sticky' effect, which I don't want. So this avenue is a no-go.
Route 2: the CSS background solution. Unfortunately, this code doesn't work:
body {
color: #333333;
background:
url("/static/assets/img/fabric_1.png"),
url("/static/assets/img/stain.png");
background-repeat: repeat,
no-repeat;
background-position: 0 0,
right bottom;
}
So, I tried this:
html{
background:
url("/static/assets/img/fabric_1.png");
background-repeat: repeat;
background-position: 0 0;
}
body {
background:
url("/static/assets/img/stain.png");
background-repeat:
no-repeat;
background-position:
right bottom;
}
Which, for the long page, works! Hooray! But, when I go back to the short page, now it looks like this:
Sonofabitch!
So what's the solution here? Sticky footers? Min-heights? Wrappers? None of the solutions I've tried so far produce the desired behaviour in both situations.
StackOverflow elders, what should I do?
Thanks!,
R
As I understand you want to stick background image to bottom and right?
so solution is:
body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
Hmm, with css3 you can use multiple backgrounds. Can you try this?
html{
background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
background-repeat: repeat, no-repeat;
background-position: 0 0, right bottom;
}
body {
color: #333333;
}
Running into the same issue, my solution involves setting the html element to have a min-height of 100% with a height of auto:
body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}
body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
Shorter pages are forced to the viewing window height and longer pages picks up the auto height.
You could always set the height of body to 100% then it should work.
To clarify: Then you can have a background image in the html element and in the body element, pretty much as you've allready tried:
html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}
Just tested a bit more, and it seems it doesn't work in IE10's Internet Explorer 5 quirks mode, but i really hope that isn't a dealbreaker for youl, because you don't seem to be working with a strange legacy product.
The purple square is the html-background-image and the reddish is the body-background-image.
Thank you for posting. I was having the same problem. I resolved it by adding the background image to a container div for my content set at 100% width. The container closes before my footer, but you could probably try putting it outside the footer also if you need your image to go to the bottom of the page. I only wanted mine to go to the bottom right of my content.
Here's my div structure:
<html> Background image
<body> Padding
<div id="outerWrapper"> Background applied outside content
<div id="borderWrapper"> Contains content
<div id="contentWrap"> Sets up container positioning for child elements
On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.
The current version of the site can be found at: http://beta.residencyradio.com
Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.
I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don't want.
I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I'm not too sure, but it's probably something very simple that I've managed to miss.
Any help would be greatly appreciated!
Thanks in advance, Michael
That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.
This is how it is now:
#second .content {
margin-left: 22.8125em;
}
The .content div has a width of 60em as it is.
You can use something like this instead and it should work fine:
#second .content {
left: 170px; /* adjust to your liking */
position: absolute;
width: auto;
}
I think....
change in your css file:
from:
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}
to
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
background-size:100% 100%;
}
It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out
Is this it?
I did the following:
html, body {
width: 100%;
display: table;
}
And it removed the weird whitespacing while also allowing to scroll in the x-direction.
I usually fix it with
html {
overflow-x:hidden;
}
It should work and hide the white space and rescale the site
Tried
html {
overflow-x:hidden;
}
didn't work. But..
body {
overflow-x:hidden;
}
Did.
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.