If you view this in Firefox, you'll see that the bottom footer stays right with the window as you resize, move, etc. It also starts right at the bottom without a scrollbar. However, in IE8 I can't get it to sit at the bottom at the beginning OR move with the window, and probably a number of other issues. I got the code from this site, and it says it's IE compatible, so I must be doing something wrong. I had to alter the code a bit to fit my situation, but here's the IE specific css:
* {
margin: 0;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, .push{
height: 30px;
width: 100%;
background: -moz-linear-gradient(top, #565656, #303030);
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#303030));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#303030');
text-align:center;
font-family: loginfont;
font-size:13px;
color: #fff;
padding-top:5px;
clear: both;
}
Can anyone tell me what's going wrong? I'm absolutely clueless at this point. I hate IE...
I'm not sure, but it can be the padding-top:5px; which is causing the problem. Try changing the margin: 0 auto -30px; to margin: 0 auto -35px; and see if that helps.
In your #container add <div class="push"></div> and add position:relative; to #container as negative margin will not work on static positioned elements.
Related
I have a content div within a main wrapper div. I've set both the margin-right and paddding-right to 0 on the content div, yet chrome still shows it extends to the end of the wrapper div, even passed it a little:
I'm trying to understand why this is. The Css for the outer and inner divs looks like this:
#Inner {
position: relative;
width: 40%;
height: 70%;
top: 3%;
margin-left: 2%;
margin-right: 0;
padding-right: 0;
text-align: center;
}
#outer {
height:80vh;
width:50vw;
position:absolute;
border-radius:5%;
border:3px solid black;
left:50%;
transform:translate(-50%, 0);
top:10%;
background: linear-gradient(to bottom, #304352, #525252);
}
Is this just something to do with chrome or does the inner div really extend so far, even passed the wrapper?
After a bit of research, I've found out that adding the display property of inline-block seemed to take away the right margin. I guess I still have more to understand about the block model.
I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.
Here is the HTML, with the unnecessary parts stripped out:
<div class="container">
<div class="page-content">
<div id="corner"></div>
... page contents here
</div>
</div>
And here is the CSS:
.container {
margin: 0;
min-height: 100%;
padding: 0;
}
.page-content::after {
content: "";
display: block;
height: 1px;
}
.page-content {
background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 190px 100px 150px;
max-width: 64em;
padding: 10px 120px 145px;
z-index: 2;
}
.page-content {
margin: auto;
max-width: 64em;
padding: 0 1em 1em;
}
#corner {
background-color: #ffffff;
background-image: url("corner.png");
display: block;
height: 200px;
left: 120px;
position: absolute;
top: 20px;
width: 200px;
z-index: -1;
}
As you can see in this screenshot the #corner element is not positioned correctly.
I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.
try adding position:relative to the containing elements of div#corner, .container and/or .page-content
position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.
so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.
It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.
Side note: Not sure if this is what you're trying to do, but min-height:100% does not make content's size to 100% the height of the screen.
Replace that with this:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Anyway, you've set #corner to
position: absolute;
top: 20px;
left: 120px;
And that's where IE is placing it, relative to the entire page. It's doing what you're telling it to do. With the other browsers, it's position is absolute compared to that header. But to take a guess, you probably wanted to set it to position: relative.
Just in case this helps someone else:
I had a similar issue. It looked like ie11 was ignoring the 'right' property:
right: -320px;
but it turned out to be because I had set the 'left' property to:
left: initial;
Turns out the 'initial' keyword is unsupported by ie11:
left: initial doesn't work in internet explorer
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
EDIT: you can view the page here: http://websitem.gazi.edu.tr/test/index.html
I'm trying to do the effect in the screenshot below:
The first one is from Chrome. Firefox show the same. But Internet Explorer from version 7 up to 9 shows the second picture.
My html structure is this:
<div class="header-menu">
<div class="container">
<div class="header-curve"></div>
<div class="header-building"></div>
</div>
</div>
And my css is this (dont bother with LESS specific syntax)
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
height: 82px;
margin-top: 82px;
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
margin-top: -82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
margin-top: -82px;
width: 1000px;
}
}
how can i solve the problem with IE? i already tried position: relative and zoom:1 fixes.
Thanks.
It looks like the filter style on your .header-menu class is causing it to be hidden in IE, is this necessary?
I think you were on the right track with the position: relative;, but also add a z-index value in there (play with the value until it appears correctly).
I might be missing something, but I still don't understand why you're bothering with the negative margin. The following CSS would do exactly the same, no?
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
width: 1000px;
}
}
I usually have my structure laid out something like this:
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.
I have tried variations on using the css height/min-height properties:
html, body {
height:100%;
...
}
#all {
height:100%;
min-height:100%;
}
#page {
height:100%;
min-height:100%;
height:auto !important;
}
It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears
example
However if I keep the height:auto there then I get the problem of the background for page not working
example
Hopefully someone knows a fix?
Well, here's what I ended up with for the CSS:
html, body {
height:100%; /* IE6: treaded as min-height*/
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #494949;
text-align: center;
background-color: #3f91a7;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#all {
margin: 0px;
padding: 0px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
background-image: url(images/bg_all.png);
background-repeat: repeat-y;
background-position: center top;
overflow: hidden;
}
#page {
width: 993px;
padding: 0 0 10000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: -10000px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
#header, #footer {
text-align: center;
font-size: 16px;
padding: 20px;
}
#content {
padding: 25px;
}
I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.
I would just flip the location of your div#all and div#page...
<div id="page">
<div id="all">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.
Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.
Let's start with the divs I created:
<div id="full_background">
<img src="images/bkg_main.jpg" alt="" />
<div id="absolute">Contains background set to repeat-y</div>
<div id="content">Contains the content</div>
</div>
the css looks like this:
* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }
#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }
#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }
#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }
First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc
Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.
Then below this div you put the div with your content, which freely expands downwards beyond the browser window.
Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them.
This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.
I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.
Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.
The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.
More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Have you tried:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#all {
min-height: 100%;
}
? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).
If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.
My comment on the downvote:
It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.
But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.
This worked for me:
#page {
width: 993px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
/* height:100%; IE6: treaded as min-height*/
height: expression(document.body.offsetHeight); /* sets min-height for IE */
overflow: auto;
min-height:100%; /* real browsers */
/* height:auto !important; */
}
Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.
html {
height:100%;
background-color: blue;
}
body {
margin: auto auto;
padding: 0;
color: #494949;
/*min-height: 100%; */
height:100%; /*for ie6*/
border-left:solid 2px red;
border-right:solid 2px red;
background-color:#fff;
width: 960px;
}
Have you tried this :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
window.onload = init;
function init(){
document.getElementByID("all").style.height = getWindowHeight() + "px";
}
Or put page instead of all