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.

Test page Workaround is not included
Reported by: Randeep.

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.

Test page Workaround is included
Reported by: Mit The Destroyer.

When scripting an object tag for the param tags, IE reports all param tags of all object tags as children of all object tags.

Test page Workaround is not included
Reported by: Bart Melton.

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.

Test page Workaround is not included
Reported by: Duncan Simey.

There is a div element with float:left inside a fieldset. The fieldset has "border:1px solid #64461A;".

Inside the fieldset is <em> element. When <em> tag is removed, there is no more border bug.

Workaround: remove em tags when using float items inside the fieldset.

(ppknote: this bug does not occur in IE6.)

Test page Workaround is included
Reported by: insekticid.

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.

Test page Workaround is not included
Reported by: old9.

Images using the AlpaImageLoader filter as a workaround to provide png transparency in ie6, work ok in ie7 unless the page is zoomed in or out.

On zooming, some or all of the images' backgrounds become apparent.

A possible workaround is to hide the alphaimageloader from ie7 as transparent images placed using css render/zoom ok.

Test page Workaround is not included
Reported by: ryan.

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.)

Test page Workaround is included
Reported by: Vilem Malek.

When border-collapse: collapse; is applied to a table with borders and a hidden cell, all browsers have issues:

Firefox hides border in the table entirely if all the cells in the row are hidden but the row element is visible. This can be resolved by hiding the row element.

Internet Explorer renders the border of the row that has all it's cells hidden. This can be resolved by hiding the row element.

Opera doesn't render all of the top border of a table if any of the top row cells is hidden and there is atleast one visible cell on the row.

Safari and iCab don't render the td border at all if a cell is hidden.

Test page Workaround is included
Reported by: Merri.

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.

Test page Workaround is not included
Reported by: Viktor Kojouharov.

Internet Explorer crashes when a DOM tree traversing JS function is run on an element with display: none; position: absolute that has child elements.

The crash occurs when assigning the result of a unsuccessful document.getElementById() call to a property of one of the children in the hidden element.

Test page Workaround is not included
Reported by: Steffen M�ller.

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.

Test page Workaround is not included
Reported by: feragnoli.

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.

Test page Workaround is not included
Reported by: Herve Masson.

The getAttribute() method will return "null" in Internet Explorer when trying to get the for attribute of a label element.

Solution: use attributes['for'].nodeValue.

Test page Workaround is included
Reported by: Laurent Muchacho.

If you define a function as a member of the window object in IE7, the keyword this obviously refers to the wrong object:

window.myFunction = function() {
   return (this === window);
}

A call to myfunction() in IE7 would incorrecty yield false. This problem also affects exception handling. Predefined event-handlers like onload are not affected.

Test page Workaround is included
Reported by: Arnold Konrad.

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).

Test page Workaround is not included
Reported by: Herve Masson.

The control-click event cannot be caught by Javascript on an anchor tag unless the anchor tag has a child element (e.g. SPAN or FONT).

I need to catch this event on user-entered data, hence I can't work around by inserting a child element myself.

(ppknote: This is a regression in IE7. IE 4-6 handle this correctly.)

Test page Workaround is not included
Reported by: Duncan Simey.

IE6 throws errors when an element is cloned from one frame and appended to another. This includes pop-ups.

The test page shows two frames and buttons which trigger various combinations of cloning from (hidden) elements in a frame and appending to another.

In Firefox 1.5.09, all permutations work. In Safari 1.3.2, all permutations work at some times, but silent crashes occur at others

IN IE6win, an unappended clone can be held in a variable in another frame (eg. its parent), but it must be appended to the frame from whence it came.

I think this means that DOMloading in pop-ups must be created afresh OR cloned from elements in the pop-up itself.

Test page Workaround is not included
Reported by: Andy Taylor.

Attempting to set a generated checkbox element to a checked status fails in IEwin6:it doesn't matter whether setAttribute is called before or after appending.

Don't have a workaround besides using el.checked=true after appending (which is precisely want I wanted to avoid!)

Same problem doesn't affect disabled attribute. PS. see also testpage elements for select.selected and select.size

Test page Workaround is not included
Reported by: Andy Taylor.

If you clone a table row element (tr) by means of cloneNode()in IE it loses its table row "identity". This means that with the cloned row cells[], for instance, is no longer available.

Test page Workaround is not included
Reported by: Rein Groot.

Repositioned content via JavaScript coupled with floats is triggering a variety of bugs in various browsers.

Test page Workaround is not included
Reported by: Chris Hester.

Changing the status of a checkbox less then a second after it's been changed doesn't change the status again. Try clicking the checkbox twice in rapid succession.

Test page Workaround is not included
Reported by: Velko Georgiev.

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.

Test page Workaround is included
Reported by: Chris Hester.

Internet Explorer 5, 6 & 7 fail to always render the background colours of repeated divs when you scroll down.

Test page Workaround is included
Reported by: Chris Hester.

Placing a right-floated element in a left-positioned absolutely-positioned element causes the following behavior:

• Opera and iCab display correctly (I think); the absolutely-positioned element is sized to fit the float or other nodes of the element, whichever is wider
• Gecko stretches the absolutely-positioned element to the maximum width allowed by the containing block
• KHTML stretches the absolutely-positioned element to the sum of the width of the float and the other child nodes
• (ppknote: IE behaves as Firefox)

My understanding of the box model spec is that Opera and iCab's behavior is correct; if anyone can corroborate this it would be greatly appreciated.

Test page Workaround is not included
Reported by: Josh Fremer.

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.

Test page Workaround is not included
Reported by: David Bloom.

Microsoft's Internet Explorer 7 has a somewhat odd behaviour with how it displays form elements when you adjust the text size.

• It will not adjust the font size of form elements unless that form element has a CSS font-size rule set on it.
• To make the element show up like it would otherwise, you need to set the font size to ~90% of what IE would otherwise use.
• The box size of the element scales as you change the font size, except for "smallest" which it conflates with the box size for "smaller"
• Font rendering ain't particularly clever. Notice the extra white space between the "be" and "haves" in the last example ... at some, but not all text sizes

Test page Workaround is included
Reported by: Murray.

IE7 does not correctly process the ending of :hover events when the mouse is positioned over an iframe.

An element which has been altered by a :hover directive will remain altered as long as the user moves their mouse quickly enough over to an iframe element on the same page.

Test page Workaround is not included
Reported by: Darryl Dixon.

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.

Test page Workaround is included
Reported by: Jason Brunette.

IE fails to fully render the background and borders of a div containing floats when the browser window is narrowed.

Test page Workaround is included
Reported by: Chris Hester.

IE can drop a floated column with a percentual width when the browser window is narrowed.

ppknote: Explorer Mac crashes when you resize the test page.

Test page Workaround is included
Reported by: Chris Hester.

Negatively margined (or indented) elements get cropped if their parent elements have layout (hasLayout == true).

(ppknote: IE 7 crops the right margin of the first example, but not the left. IE Mac ignores the margin-right: -10px in the first example.)

Test page Workaround is not included
Reported by: Margaux.

IE7 has problems painting the background image of a div. You can move over the page and it repaints it white! The bug appears to be triggered by a line of code referencing a non-existent element.

Test page Workaround is included
Reported by: Chris Hester.

If a parent element is overflow:hidden, any of its children or grandchildren should be invisible if they fall in the overflow area.

In IE 6 and 7 beta 2, if a child has position:relative, its contents are totally visible although the parent is overflow:hidden

Test page Workaround is not included
Reported by: thinsoldier.

The use of italics on long text blocks makes the containing DIV wider.

Test page Workaround is included
Reported by: Howard Russell.

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.

Test page Workaround is not included
Reported by: Lauri Piispanen / Conmio Oy.

Some text preceded by an empty tag in minimized form (<span />), and properly styled by some CSS rules, is duplicated.

Test page Workaround is not included
Reported by: Andrea.

When using innerHTML in IE6 - aside from the tags contained in the returned string being in uppercase - an unordered list will only have an ending list item tag on the last list element.

Test page Workaround is not included
Reported by: Chris.

In IE 7.0, an empty DIV with no height specified gains height when the CSS property 'overflow' is set to anything other than 'visible' and the document is in strict mode.

Test page Workaround is included
Reported by: Jason Brunette.

The event.clientX/Y values for the text portion of disabled INPUT elements is reported relative to the left/top of the INPUT element and not the viewport if the INPUT element is in a table.

Test page Workaround is not included
Reported by: Jason Brunette.

If a list element's borders are defined as 1px dotted, but one border is further defined as 2px or greater, IE7b2 renders the dotted borders as dashes.

Test page Workaround is not included
Reported by: Carl Camera.

If you try to add style declarations in the head of a document, IE borks at the name 'style' - "unexpected call to method or property access".

I guess its getting confused between the head element <style> and the object property .style?

Test page Workaround is not included
Reported by: Ross Howard.

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.

Test page Workaround is not included
Reported by: Tino Zijdel.

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.

Test page Workaround is not included
Reported by: Chris Hester.

When you use font-variant: small-caps, Explorer ignores text-transform: uppercase || lowercase.

Test page. Workaround is not included.
Reported by ppk.

An event handler for onmouseover an anchor should not show the URL in the status bar when you return false, and it should when you return true, but actually it does exactly the opposite.

Test page Workaround is not included
Reported by: Lal.

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.

Test page Workaround is not included
Reported by: Marc Pacheco.

When you remove an element by innerHTML='' it's possible to re-append the element to the document. In Explorer Windows, though, the text goes missing.

Explorer Mac loses track of the element when it's been removed. So in this browser elements don't stay in hyperspace after they've been emptied from the innerHTML.

Test page. Workaround is not included.
Reported by ppk.

Explorer Windows and Mac, Mozilla and Opera see <fieldset>s as form fields, even though the spec doesn't mention them in the list of control types.

Mozilla and Opera allow change events on <fieldset>s, even though they don't make sense.

Test page. Workaround is not included.
Reported by ppk.

When a drop-down menu has a long option, and the form is placed inside a div of a shorter width, the option is cut off when the user scrolls far enough to the right.

Test page Workaround is not included
Reported by: Chris Hester.

Once the background-color is set on an element, subsequent 'background:inherit' rules (even those matching selectors of higher weight) can't cause the element to inherit the color from its parent.

Test page Workaround is not included
Reported by: Pierre Saslawsky.

When nesting a form wholy inside a cell certain browsers includes extra white space at the end of the form. This would appear to be a bug.

Test page Workaround is not included
Reported by: Jay Soffian.

Under some circumstances the changing the href-attribute of a link also changes the content of the link itself.

This seems to happen when the raw content of the link starts with www.something (and does not need to relatve to the real href in anyway).

Putting redundant span-tags inside the link solves this.

Test page Workaround is included
Reported by: Markus Fischer.

The INPUT (type=text/password) field in IE6 (and older probably too) has a top and bottom margin of 1px in both quirks and standard mode. This can cause a not so nice effect.

(ppknote: Opera and Safari have the same problem with the right margin)

Test page Workaround is not included
Reported by: Marcel Lipovsky.

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.

Test page Workaround is included
Reported by: Carl Camera.

IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level without the hack detailed here.

ppknote 4-feb-06: Workaround doesn't work in IE 7 beta 2.

Test page Workaround is included
Reported by: Spartanicus.

The following will throw an exception:

var button=document.createElement("button"); button.type="button";

The only workaround for dynamically creating <button type="button"> seems to be to convert the button HTML to a string and append it to innerHTML.

Test page Workaround is included
Reported by: Garret Wilson.

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.

(ppknote: Test case does not work in Safari)

Test page Workaround is included
Reported by: Gunnar Vestergaard.

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.

Test page Workaround is included
Reported by: Chris Seeling.

If a page calls window.open(), then submitting a form on that page and returning to it using the "back" button causes the entered form values to be lost.

(ppknote: Safari has a different bug: it doesn't show the form at all when you go back. This has nothing to do with opening a new window.)

Test page Workaround is included
Reported by: Milo van der Leij.

The document.getElementById() function returns an element with a name attribute that is equal to the id specified.

Test page Workaround is not included
Reported by: Chris Bloom.

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.

Test page Workaround is not included
Reported by: Emmett Pickerel.

In Explorer, if you need to set the accesskey attribute using setAttribute(), the attribute name passed in must be "accessKey" and NOT "accesskey".

Test page Workaround is not included
Reported by: Toh Zhiqiang.

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.

Test page Workaround is included
Reported by: Alan Harder.

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.

Test page Workaround is included
Reported by: Valentin Agachi.

A background on a TR doesn't work. Instead the TDs inherit the TR's background image.

Test page Workaround is not included
Reported by: Valentin Agachi.

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.

Test page Workaround is not included
Reported by: G�rard Talbot.

A valid way to position an HTML element with the absolute type is by defining only the left offset, right offset, top offset, and bottom offset from parent. Opera and Firefox pass. IE 6 does not.

Test page Workaround is not included
Reported by: Peter Siewert.

Using setAttribute, you should be able to set any attribute on an element. It appears that in IE, trying to set the style attribute does not work.

Test page Workaround is not included
Reported by: Dan Nye.

When using a css image, if there is no space between the end url bracket and the attributes following it, IE6 will not display the image.

Test page Workaround is included
Reported by: R.

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.

Test page Workaround is not included
Reported by: Phil Endecott.

Explorer 6 Windows ignores all margins on a table. 5.0 and 5.5 ignore top and bottom margins.

Test page. Workaround is not included.
Reported by ppk.

Using a sans-serif font-family may cause an unwanted gap between tightly stacked items.

Test page. Workaround is included.
Reported by: Maxine.

It seems IE is limited in the importation of stylesheets via the @import rule. If you try to import more than 4 levels of CSS, the fifth one is not considered by Ie.

Test page Workaround is not included
Reported by: Thierry Goulet.

When creating custom DTDs like the one below, all browsers except Opera see the end of the ATTLIST as the end of the DOCTYPE. The result is that they print "]>" on the screen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

Test page. Workaround is not included
Reported by ppk.

If you give TDs a CSS width and then use colspan, Explorer Windows still uses the declared CSS width for the content of the colspanned TD.

Test page. Workaround is not included.
Reported by ppk.

For nested boxes IE doesn't add the outer box padding and the inner box margin, as all other browsers do.

Test page Workaround is not included
Reported by: Daniel Bleisch.

In Explorer Windows an element both floated and cleared is ignored by a subsequent float: the latter is positioned higher than the former, and overlaps it.

Explorer Mac and Opera don't get it quite right, either, but they're not as bad as Explorer Windows.

Test page Workaround is not included
Reported by: Bruno Fassino.

When the font of a page in an iframe is resized, Explorer Windows seems to retain the line-height of the previous font size.

Test page. Workaround is not included.
Reported by ppk.

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.

Opera has exactly the opposite bug: it never shows the hash.

Test page Workaround is not included
Reported by: Isaac Z. Schlueter.

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.

Explorer positions a background-image underneath the border of the element. Therefore it's impossible to get the position of a background image in an element with a border correct in all browsers.

Test page. Workaround is not included.
Reported by ppk.

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).

Test page Workaround is included
Reported by: Luke Plant.

When you apply a width to an ol or ul, Explorer Windows secretly applies more rules. Moreover, 5.0, 5.5 and 6.0 each apply different rules.

(note: This bug is very similar, but not identical, to Ordered list rendering with width on LIs.)

Test page. Workaround is not included.
Reported by ppk.

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>

Test page. Workaround is not included.
Reported by Sebastian Redl.

When you define visibility: hidden on * Explorer Windows and Safari don't show anything ever again.

Test page. Workaround not included.
Reported by Giuseppe Bertone.

Any button uses the traditional box model instead of W3C's, regardless of rendering mode.

Test page. Workaround is included.
Reported by ppk.

If an iframe contains body {position: relative}, the scrollbars of the main window may disappear.

Test page. Workaround is not included.
Reported by Keith Swartz.