Well I have, I think, kind of unusual question. Well I have a web page with starting div with absolute position.
.head_warp
{
width:100%;
display:block;
height:238px;
margin:0 auto;
padding:0;
position:absolute;
text-align:center;
background-image:url(images/demo6_fon.png);
background-position:center;
background-position:top;
background-repeat:repeat-x;
z-index:-9999;
}
and after that I have a container
#container_out
{
width:1024px;
margin:0 auto;
}
The HTML is that way:
<div class="head_warp"></div>
<div id="container_out"></div>
The idea is the content in the "container" to be shown over the "head_warp" and it's ok in any browser I tested with. Chrome, FF, Safari even with IE8 and IE7. But my co worker is with IE8 with windows VISTA and look what is the result
alt text http://www.pechat.mdkbg.com/problem.jpg
What is the problem?
#Puaka I think all browsers are relative to the parent container when specifying a percentage width. In this case it should be relative to the body.
Is your DOCTYPE correct?
If you are absolutely positioning an element, you should be specifying the top/left position which you don't appear to be doing. Also, you specify margin:0 auto; implying there could be a left/right margin. I would have thought this should be simply margin:0;?
Looks like you're missing some information for your absolutely-positioned div:
top: 0;
left: 0;
in IE, 100% width will use its parent width, so you need to put it inside container_out, change your container_out css, maybe add padding-top/margin-top = header_warp height
I just tested it in IE8 on Vista and it displayed fine.
It looks like all that div is doing is displaying a background image for the page. Why not just add the background image to body and get rid of that div?
Related
Here is the code
<style>
.test{
position:absolute;
width:100px;
height:100%;
top:50%;
transform:translateY(-50%);
background:blue;
}
</style>
<div class="test"></div>
Here is a picture of what it looks like. I tested this in Chrome and IE and the gap doesn't appear.
The gap remains if I set the height to 100% 100vh or the absolute height in pixels. I am using Firefox 40 so the browser is up to date.
Also, for anyone wondering why you would center a div that has a height of 100% it is so that it will center no matter the orientation of the screen.
EDIT
For all those suggesting setting margin:0 it unfortunately doesn't fix the problem
Clarification of the problem.
Apparently this is rounding error in the rendering engine. Because if you change the height of the window the gap appears and disappears. Chrome seems to show a slight gap but it is almost indistinguishable. To see the problem try changing the frame height in this fiddle http://jsfiddle.net/m4yqoq4w/. I assume this also means there is no easy way to fix the problem.
Add margin:0; to the body
Before: http://jsfiddle.net/m4yqoq4w/
After: http://jsfiddle.net/2umLokj4/
This will fix it:
body{
margin: 0;
}
If you reduce the "top" property value as below, you will never get the gap
top:49%;
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
I am currently working on a website which was all going well until the css now thinks that the bottom of the page, even though i have positioned the image with
position:absolute;
bottom:0px;
is actually about 100 pixels above the bottom! I can't figure it out and my only answer could be because of how I am repeating things across the layout.The site can be found at SemaphoreDesign The paste bin for the style sheet is here And for the HTML go here I really cannot figure out why the header and the endside are not at the bottom of the page and why there is a scroll bar.Thanks
you can do a fixed position for these 2
#endside {
width:100%;
float:left;
height:112px;
position:fixed;
bottom:0px;
overflow:hidden;
background-image:url(images/main_09.png);
z-index-2;
}
#footer {
width:915px;
margin: 0 auto;
background-image:url(images/main_10.png);
height:112px;
position:fixed;
bottom:0px;
z-index:11;
}
Mostly likely you're scrolling down when you see the problem?
You should be using position:fixed if you want it to not move when the user scrolls.
The reason you're getting a scrollbar in the first place is because you set your "content" <div> to height:100%, which means 100% of the window height. Since there's other elements the height exceeds the window height.
Something like this might help:
HTML: http://pastebin.com/H0EauYeu
CSS: http://pastebin.com/mbV44Jef
I don't think you want to use position:fixed. This site has good CSS for footers you can copy:
http://www.cssstickyfooter.com/
In my site, I have two divs - right and left. Both are contained within a wrapper div. Here is my code:
#wrapper{
width:1000px;
height:750px;
margin:auto;
}
#left{
width:500px;
height:750px;
float:left;
position:relative;
}
#right{
width:500px;
height:750px;
float:right;
position:relative;
}
In Chrome, no problem.
In Firefox, no problem.
In Safari, no problem.
In Opera, no problem
In IE, the #right div is in the same location horizontally, but vertically it's below the #left div.
I've tried a few different techniques to remedy this. Setting the wrapper line height to 0, setting the right display to inline, reducing the size of the right and left divs (I thought maybe there was a margin/padding issue). I've run out of ideas now, can anybody offer any help of the issue?
In All Browsers (except IE):
In IE:
There's nothing wrong with the CSS you've posted. It will work in all browsers as expected (I've decreased the widths in my example).
What's happening is that you've got an element in one of your columns that's forcing the width of either #left or #right to be greater than 500px. The easiest way to fix this is to start removing elements until the float drop disappears. Then you can figure out if there's a solution for the offending element (i.e. set its width or set overflow: hidden or scroll).
Try using float:left for both the #right and #left divs. You could also probably take out the position: relative as well.
put both left and right divs as float:left