I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu.
http://resume.jamesfishwick.com/
The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7.
I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects.
How can I achieve this look in IE7?
You will need to give that scrolling div a z-index which is less than the z-index on the main header. To control the transparency for msie 7 just add the following css code to the end of your document say right before the </body> tag.
/* ie6 hack */
* html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }
/* ie7 hack */
*+ html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }
In IE7 an element is trapped by its positioned parent and cannot escape. One cannot interweave the children of positioned parents because ie7 and 6 incorrectly apply a z-index of zero to positioned elements when they should have applied auto.
There is no way to escape this other than not positioning the parent which my case is not possible because I want it fixed.
So I'll need to change the design and apply the gradient to another element and not the 100% high fixed element. That will allow the header to be separate form the content and then the content can go under the header.
Related
I am doing my first React-Redux project and I am working on styling.
The issue I am having is with background colors.
If I set a background color on a div containing the main content of a page, the bottom of the page is left white.
My solution was to set a default background color in my reset file, on the body and html. This fixed the problem.
However, I want to have different background colors/images on different pages and if I have the body and html set to a default color that color will be the color below the div on any page.
Any help would be appreciated. This again is using React and Redux, I am brand new to this material and from my understanding , all the components will be nested under a parent element (body in my case) so changing that will affect every page. That said is there a way to make a div fill all the space between a header and eventually footer element?
If you are sure that your main content element needs to be 100% of the height of the page, you can use
height:100vh;
This will give the element a height which is equal to 100% of the view height. This is supported in all current browsers except opera mini.
Beware of margins or padding on parent elements as these could make your container overflow the page slightly - see how i have dealt with the margin on the body in this example
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
i have a div element (class "content") that contains 2 divs and a sibling of the first div that has bottom: 0px; attribute and fixed height and i wanted the div with the class "gallery" to expand as much as they don't flow over their parent div.
and also ... i saw that except the firefox browser, chrome, opera and safari shows the search input in the upper right corner 4-5 pixels upper than normal. why is that?
http://goaltod.iulianonofrei.com/
You have 2 questions here.
The first question is not clear, "contains 2 divs and a sibling of the first div", isn't the sibling of the first div - the second div? Also it is not clear what you want to do, in general it seems that you have everything global positioned, so you why not set the gallery div with the exact dimensions you want. For the content it contains you can use overflow:auto so it will create an internal scroller when needed.
For the second question, looks like the problem is in firefox. if you set the top and padding of the input element to 0, it still does align with the containing td element. This is a very odd usage of table elements and I would advise against it... You probably should use div elements instead.
Because you used height: 100% the content will match the height of it parent element. And the other elements push it down.
There are a few ways you could fix this:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Put the header and footer in the content, then position them absolute.
I would recommend the 3rd option which is demonstrated here: http://jsfiddle.net/tnRpR/
I'm using a jQuery UI accordion as a menu on the right side of a page. However, there are occasions where the menu will be taller than the content on the left. Because of this, when expanding/contracting sections of the accordion, the scrollbar on the browser can grow/shrink when opening a section of the accordion. My thought was to have a div below the accordion which is the height that the accordion could possibly get to, and when the accordion expands it would just overlap it, thus not changing the scrollbar on the browser at all (hope that makes sense). Giving it a position: absolute and declaring the height and width seems to screw up the layout, placing it overlapping the footer but bleeding below it. Anyone have any ideas on how to make this work? If you need a more detailed example, I'll see what I can do to provide it, however, the site is locked down and I can't give out a username/password.
Min-height is easy to implement in IE 6.
The oldest hack from Dustin Diaz:
selector {
min-height:500px;
height:auto!important;
height:500px;
}
Or with expressions:
selector {
height:expression( this.scrollHeight < 499 ? "500px" : "auto" );
}
In fact for IE 6 height is like min-height. Element will expand with the content in it, until there is overflow:hidden specified..
You can always apply rules for IE 6 only with "* html hack" or with Conditional Comments.
You probably have a container around the menu and the content right? You could add a css min-height to the container which would be equal to the tallest that the menu could be in height
I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.