This needs to be compatible with all modern browsers and IE7 and IE8.
What I'm trying to do is have a repeated background image for the page with a linear fade that makes the bottom darker. http://i.imgur.com/rrzyw.jpg
Here's my example code: http://jsfiddle.net/hxk2d/2/
As you can see, I have two floated divs in the example above. The body linear gradients do not show up for some reason. I figured out it was because of the left div being floated.
As soon as I delete the float for the left div, you start to see a gradient but it only appears within the container.
Obviously, I'd prefer this to work whether there's a floated div or not. My test browsers were both Chrome and Firefox, both of which performed the same behavior.
What am I missing?
Please look at my example, I'm not 100% sure but I think the parent div of your two floats didn't had a height calculating as a result of the 2 floating div's, the parent tag of that div is the body that doesn't have any height because nothing inside has, as a quick fix i added some the clearfix class to the parent of the floating div's
Here is the example link:
http://jsfiddle.net/sHXf2/
I modified your gradients to make them more visible, Hope this helped
Related
I have set up some divs for my layout, a main div and a menu div.
They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.
For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:
http://jsfiddle.net/kR7rs/2/
It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.
Removing the margin from main seems to fix it:
http://jsfiddle.net/kR7rs/3/
What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.
Kind of seems like a bug.
(Don't have FF right now to test it and see if it breaks it for FF.)
Move overflow:hidden to #wrapper. That fixes it, but doesn't explain why.
I'm trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/
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.
I have an absolutely positioned div that has a width of 100% with a background image tiling horizontally. When the browser is shrunk to the point that the width of the browser is less than the page, the remaining right portion of the div's background color is truncated.
Is there a better approach or a hack to resolve this?
Here's the example: link with the div in question being the menu.
Edit: to clarify, reduce the size of your browser so that the full width of the page (960px) requires a scroll-bar. At this point, 100% of the "page", or the viewable area, is actually less than 100% of the content. When this occurs, the menu's background doesn't span the remaining content that would require scrolling to the right to see.
This issue is present in ie7, ie8, and firefox 3.5. I haven't tested the other browsers but I can only assume that this happens there as well.
Thanks
Add:
min-width: 960px;
to the menu div selector. Fixes it for me.
With regards to the actual code structure, and as someone pointed out (but promptly deleted their post), perhaps structure your elements in a more logical layout. There's no reason to have the menu as the bottom child element (as far as I could tell anyway)
It's a more linear, free flowing code structure, rather then a spaghetti mess of containers in random orders, that it can turn into.
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it