Bug Reports for Explorer 7

Absolute/Fixed elements align with Adjacent elements

I have a fixed div that is supposed to reside on the left side of the page and remain static using fixed positioning. There is another div adjacent to it that has a margin property that ensures it remains shifted to the right of my fixed element.

This looks fine in Firefox and Opera, but in IE7 the fixed element seems to 'inherit' somehow the margin of the adjacent element and positions itself relative to it, so that they share the same left margin. Any repositioning of the fixed element is relative to its adjacent node. This also happens if the node is adjacent.

IE7 Uncle Double Class Selector Bug

Creating a [.class|*|element] + element selector rule will cause IE7 to apply .class1.class2 element or .class1.class2 > element as though it was also a .class1.class2 + element:first-of-type; assuming the final element getting selected in all the above rules are the same element type.

IE will not submit unless file field is correctly specified

When a file upload field has an incorrectly specified file, browsers respond in different ways.

IE solves the problem by preventing form submission.
This approach is reasonably sensible, however it would be much better if IE popped up a warning dialog saying "File not found".

Firefox takes a totally different approach; it lets the server sort out an appropriate response.
It means I have to code the server for this use case (good practice anyhow) and I can put up my own warning messages.

In summary, the Firefox approach needs a bit more coding but gives me complete control over the page. IE means well, but leaves my users confused and unable to leave the page.

IE7 with haslayout and cursor text problem

This problem appears only in IE7, move your cursor to the #container1 filed (the red rectangle), it turns in to a text shape. Remove the hasLayout trigger(zoom:1 here) makes it return to normal arrow shape(the blue rectangle).

This does not affect my IE6 and IE5.

A single cursor:default; would be a cure, but it also changes the text cursor on normal text.

IE7:hover ghosts bug

If you nest several elements inside each other and you tie the display of child elements to the :hover of the parent element, it can happen that after a first, correct display of the nested elements, these elements will stay displayed in IE7 even if the element directly above them does not have :hover! (And if simultaneously an indirect-parent element does have it.)

Floated elements overflow container incorrectly

When using relatively positioned floating elements inside a container, which has an overflow other than visible, the elements behave as if the container has overflow: visible. This occurs in (at least) Internet explorer 6 and 7.

ie7 position:fixed and margin-top bug

imagine you want a fixed layer at the top of your page and all which follows to scroll UNDER that layer.Apparently explorer 7 is unable to calculate a top margin for a 'position:relative' div which follows a 'position:fixed' one with higher z-index. The second layer will just stick to the top of the page no matter which marin-top you define for it.

IE: no hyperlink above element using AlphaImageLoader filter

I first noticed the problem when I tried to use a PNG+alpha background in an element that contains an hyperlink (see test page). The hyperlink would not work in certain area, which I later identified as non transparent areas of the background image.

It seems as if the filter "steals" mouse events in non transparent areas, regardless of its z-order (no click, no cursor shape change).

Workaround: add the filter to an element with position: static, and there must be a position: relative child element.

Can't have both PNG32 and alpha(opacity) in IE7

Using PNG with alpha channel is known to work fine in IE7 ... unless you also want to apply some opacity in a parent element (ex: if you want to use some javascript driven fadein/fadeout effect). In this case, the alpha data seems to be used as a on/off transparency layer.

A workaround consists of transforming the IMG element into a SPAN with the AlphaImageLoader filter (the usual trick to use PNG32 on IE6).

Background Zoom Bug

IE7 apparently ignores the body element when zooming. So if a background image is applied to the body, zooming the page spoils the layout, as the image isn't resized to match the zoom value. Only elements within the body are affected by zoom.

If your document's body uses a percentage value as a left or right margin, then position:relative (even without left/top/bottom/right declared), floated elements inside a containing block with a defined width, will not reposition accurately (or at all) as the page is resized. Reloading the page after resizing fixes the problem - just like a Netscape 4 bug.

Setting border: 2px inset on a text input element (INPUT.text, INPUT.password, TEXTAREA) to return to its default border after having changed its border style and color leaves the left border's previous color intact.

IE overflow-y IFRAME bug

Using css property overflow-y:scroll on iframes in IE6 will cause it to display an empty gap on the right side of the frame. The gap is approximately the size of a scrollbar. There is no workaround yet, other than refraining from using overflow-y.

Stretched buttons bug

If an input is given a type "button" or "submit" and the value used to apply text to the button is over 18 characters long, the button is shown stretched horizontally. The top and bottom border is also thicker. The effect increases with the length of the button text used.

Floats and block widths applied in the incorrect order

This bug is caused by IE not calculating position of floats correctly. As far as I can tell the left edge of the content is calculated and then the width is applied, the correct behaviour is to apply the width and then see where the content should be layed out due to any floats.

Anchor Border Shortened When Inheriting Line-Spacing Property

The content box surrounding an anchor (A) element is truncated when the A elements inside a block element that inherits a non-zero letter-spacing value and appears immediately after a top-borderless DIV element.

Table created with DOM2 methods is not displayed

When creating a table dynamically and inserting table rows with table data cells and text nodes and add it to the document tree, it is not displayed at all when you don't include a <tbody> tag. W3C DOM2 methods are used.

Disappearing image with relative position

Experimenting with position: relative styles I noticed this inconsistent behavior of IE6. The image on the pages vanishes when a TD is shown/hidden, even though it is not involved in the javascript action.

position:relative breaks out of overflow constraints

In any non-quirks mode doctype, content with position:relative within a block container with overflow: auto, scroll or hidden and a height shorter than its contents, will spill out past the bottom of the container.

Wrapped inline+nowrap elements lose padding-left

When IE6 wraps an inline element with white-space:nowrap onto the next line, the element loses its left padding. Workaround is to use inline-block display instead of inline, though this doesn't work for list items.

Breaking floats into rows

When trying to break a list of floats into rows with clear: left on the first cells in the future "rows", the cells after the cleared ones just fill up the remaining space from the previous "rows" as long as the parent's width allows.

A percentual width of an abolutely positioned element should be calculated relative to the containing block (the body, if there is no other absolutely positioned element. Unfortunately Explorer (Win and Mac) and Opera calculate the width relative to a static block that contains the HTML for the absolute element.

getAttribute("HREF") is always absolute

In some browsers getAttribute("HREF") on an A element returns a complete URL, even if the HREF attribute in the source specified a relative path. In others it returns the exact text of the attribute in the source, which may be relative.

All browsers put the complete, resolved, URL for an A element in its .href property. In Explorer (Win and Mac) and Opera 8 the same value is returned by getAttribute("HREF"), while Mozilla (FF1.0), Safari and Konqueror (3.2.2) return the source value. I consider the latter behaviour to be correct.

The test case contains two links, the first absolute and the second relative, and reports the values of .href and getAttribute("HREF") for each. It is the last reported value that differs.

Back and forward between named anchors doesn't update window.location

When navigating between named anchors in IE, the window.location object changes to reflect the change in the URL. This is correct. However, the window.location object should also change when you use the back or forward buttons, or the history.back() and history.forward() methods, to move between these anchors, and in IE 6.0 and IE 6.1, it does not.

Box model of TDs

The box model of a td turns out to be unchangeable in Explorer (Win and Mac), Mozilla and Opera. Explorer Mac forces it into the traditional model, while the other browsers force it into the W3C box model.

Therefore you can't switch the box model of a td, something that is possible for any other element.

Explorer Windows, though, switches the TDs to the correct box model when you use table-layout: fixed. Unfortunately this does not work in the other browsers.

Test page. Workaround is included only for Explorer Windows.
Reported by ppk.

Doubled top padding after float

When a floated box does not have non-floated content alongside it that extends the full height of the float (including its vertical margin), the next 'cleared' div after the float has a top padding that is twice what it ought to be (in IE5.5 and 6).

innerHTML and text normalization

IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>