has anyone got the bug on Opera (and others) but not IE6 (here everything is OK) when the block (DIV) has a background-image (no-repeat) does not appear if the block has negative margin? Something like this:
#slide_desc {height: 60px;margin-top: -84px;background: url('back/slide_desc.png') no-repeat;}
IE6, IE7 - OK
IE8, Opera, Firefox, Chrome, Safari - BUG
No background image no PNG hacks
Just this HTML:
<div id="slider"> <img src="img/slide.jpg" height="300" width="730" border="0" /> <div id="slide_desc"> Lorem ipsum </div> </div>
and this CSS
#slide_desc {margin-top: -84px;background: url('slide_desc.png') no-repeat;}
If I add position: relative - works in Opera but doesn't work in IE6
If I change to position: fixed - everything is great but I'm not sure it's perfect way to solve the problem.
Becase of scrolling this scrolls too.
Looks like you just need to give it a height and width or else it is only as big as the text in that div:
Here is a fiddle:
http://jsfiddle.net/VrEvA/
And another with the background in the original div:
http://jsfiddle.net/VrEvA/1/
Related
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I have a transparent div-element with a higher z-index than an img-element on the same page. But Internet Explorer is acting as if the img-element would have a higher z-value when it comes to click events.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
<div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>
When clicking on the image nothing happens altough the click event of the div-element should be fired (works in Chrome for example).
Is there any workaround or fix for my problem?
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
For example:
background:white; filter:alpha(opacity=1);
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
IE z-index trouble on element with transparent background
I have tested the Suggestion given by Preli background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:
http://jsfiddle.net/VMrNF/11/
This is still a bug in IE11, but not Edge. The following solved my problem by creating a background that "looks" transparent but has a color.
background: rgba(255,255,255,0.0);
Slightly better that the filter solution above, if you want only the background to be transparent, but not the contents of the object.
add left:0 to div, click event available
tested in ie9
Issue: Slideshow
Details: There's a frame (which is just a transparent PNG around the slideshow)
What I'm trying to do:
Make the frame over the image and caption background but make the link and nav-balls on top of the png.
It works like I want in other browsers except for IE. I read more on the z-index bug for IE but that didn't help. Any suggestions or help is VERY very much appreciated.
Issue resolved.
To make navigation dots clickable, apply styles:
display:block; position:relative; // to frame
z-index:1001; //to .nivo-controlNav
To learn more link i suggest:
1) delete all z-index property that applies to .nivo-caption
2) add shadow div with z-index: 87 /*(87 for example)*/ below frame
The issue for this is that IE don't follow the z-indexing of an image, no matter how small or big the z-index you put in your image, IE will still follow the hierarchy level of the elements. If you really want to use z-indexing of an image in IE, you can wrap the image inside a div and put the z-index on the div, this will follow the right z-indexing on all browsers including IE.
// will not follow in IE
<div>first div</div>
<img style="z-index: -1;" src="image.png" />
<div>my div</div>
// will follow in IE
<div>first div</div>
<div style="z-index: -1;"><img src="image.png" /></div>
<div>my div</div>
When I zoomed in on an XHTML document containing an SVG, it works correctly in FF and Opera, but in Safari and Chrome the width of svg document is changed by zooming in and out(increased and decreased), Is there any way to fix this problem?
in the top of your code you have used % and px together in width, which should be changed only to percent
<span style="border:solid red 1px;display: block; width:100%px;">
to
<span style="border:solid red 1px;display: block; width:100%;">
not sure if that's your problem here but it should be changed
I have two divs like this
<div style="position:relative; width: 500px; overflow:auto">
<div style="position:absolute; top:0;left:0;width:100%">
</div>
</div>
Now the problem in IE is Scrollbars start to appear unnecessarily for the outer div. Even when i have specified the inner div's width to be 100% it extends more than it is supposed to. Works fine in Firefox, Chrome. IE is causing problems.
Try removing overflow:auto property from outer div
Try specifying a margin-right:-1px for IE only using ConditionalComments ( apply it to the AP'd el )