I have an anchor within a div overlaying all the contents of the div. The problem is that IE8 is ignoring the link when you hover over any non-white-space (e.g. an image or some text): http://jsfiddle.net/jf7xf/
What CSS do I need to apply to what elements to make IE8 have the anchor overlay any sibling elements?
After a lot of experimentation, I have found that to overlay the anchor in IE8 I have to place an image into the anchor. I have used a 1x1 transparent pixel, set the width and height as 100% and it works! Yay!
http://jsfiddle.net/jf7xf/44/
Related
https://realisation.github.io/sketch/
I'm trying to get that SVG to be the background and remain positioned flat at the bottom of the red section while the width and the height scales when the browser window is widened/narrowed.
I've tried a number of solutions with background-position, but none of them work -- it has to scale.
There IS an answer to this folks!
It's very STRANGE -- you do not specify the alignment properties of your image in your CSS, if it is an SVG, then you specify the alignment qualities in the SVG!
preserveAspectRatio="xMidYMax"
Did the trick.
http://jsfiddle.net/ad8dQ/13/
This is the URL.
As you can see, it works in Firefox but not in Chrome.
If I add translate3d(0,0,0) to a fixed element, then I can easily make an element overlap it. (For example, that red-colored div is happily going over the fixed div.) However, if that element contains another element with fixed background-image, then the image disappears in Chrome.
(Please see firefox for how it should work.)
Let me add that if I don't have attachment as fixed of the background image, then the issue disappears, but I do need fixed background image.
I've searched everywhere, and I just can't find out the answer to this.
So I have a DIV in my style sheet, that is positioned absolute and with a background image.
Inside that DIV, I have an that I want to appear UNDER the DIV background.
I've tried z-index but it dosn't seem to work!? Is it something to to with the absolute position on my DIV?
Put the image div before the your absolute positioned one. That should put it under the other div. You could also
position: absolute
the image, but still put it before the div.
Whatever you do, you CANNOT make child elements appear BELOW their parent's background (see about stacking contexts for more info.) You need to modify your DOM so that the second element is taken outside of the DIV having a background to be shown in front of that element.
position:absolute is in a screen context. To use position:absolute inside a div context, make the parent div as position:relative, so, his child with p:absolute will consider the top of his parent as orign.
Make sure that your background image is either a .PNG and or a .GIF File Format. Both of these file types support transparency.
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 a an image not covering the background completely of a div.
Can I specify the height of the image to make it larger?
transparent url(http://www.example.com/picture.jpg) height=??
You can not stretch a background image. Well at least you can not reliably do it cross browser today. The future CSS is most likely to support it, IIRC.
You will need to use a <img> element if you want to use the browser to stretch an image, but this is not recommended.
If you are not wanting to stretch the image, but more some of the background image is cut off, then expand the height of the element that has the background with the css property width or height.
Background images can't be stretched.
Use an img tag with absolute positioning and z-index it behind your other elements.
You should only specify the height of the div. And use
repeat
property of background.
If you need to stretch use an image inside the div and make height and width to 100%.
if the background is just a solid color, you can use repeat-y.
CSS3 does this with http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. Sadly no browsers support that yet. You have to do a img.
See http://webdesign.about.com/od/css3/f/blfaqbgsize.htm and http://www.kyrnin.com/about/blfakebgstretchexample.htm