IE8 Playing Funny with List-Style-Position: Inside

IE list-style-position:inside issues

This is an inconsistency among browsers. Firefox displays the number/bullet on a separate line, as does IE.

Use display: inline-block on the h4 and *display: inline; zoom: 1; for IE7.

ol.myList li h4 {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Quote from the Mozilla documentation regarding this issue: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#Browser_compatibility

N.B. There is variance among browsers regarding behaviour when a block
element is placed first within a list element declared as
list-style-position:inside. Chrome and Safari both place this element
on the same line as the marker box, whereas Firefox, Internet Explorer
and Opera place it on the next line. For more information on this, see
this Mozilla Bug report and an example.

IE8 display inline-block not working

I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The code you pasted works in IE8 with that doctype.

CSS causing an UL to be indented too much in IE

margin-left:0px;

In Firefox the UL is padded left by default, in IE it has a left margin.

Example:

<html>
<head>
<style>

ul{
border:1px solid red;
margin:0px;
list-style:none;
padding:0px;
}

li{
border:1px solid green;
margin:0px;
}

</style>
</head>
<body>

<ul>
<li>this</li>
<li>that</li>
<li>these</li>
<li>those</li>
</ul>

</body>
</html>

IE7/IE8 in Compatibility mode DIV with overflow problem

We've solved the mystery.

If you want to poke at the issue directly, here's where it can be seen live. Note: After we push the fix, this link won't repro.

On the LI element in the page level CSS, I removed the following style attributes

li
{
        margin-bottom: 10px;
        position: relative;
        left: 10px;
        width: 500px;
}

And replaced them with:

li
{
    margin: 0px 0px 10px 25px;
}

On the OL element in the page level CSS, the width attribute was moved.

ol 
    {
        padding-left: 10px;
        width: 500px;
    }

And I feel like something of an idiot. The moral of the story, and this has been discussed elsewhere is that IE7 scrollable divs and the CSS position attribute do not play well together.

Css style problems on input in IE8

Try specifying a line-height: 34px or thereabouts.

Weird spacing issues - IE8 works great, IE6 and IE7 bite

I used the Internet Explorer Developer Toolbar in IE 6 to determine that the spacing issue started on the <li class="subType subType##" surrounding each part (inside <ul class="partType partType##">).

When I used the Developer Toolbar to change the style to be display: inline the extra vertical spacing went away in IE 6.

I modified cartSideBar.css and redefined:

#cartComputer LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
}

as:

#cartComputer LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
    DISPLAY: inline;
}

I tested the result in IE 6, 7 & 8, Firefox 2, 3 & 3.5, Opera 9.6 & 10, Safari for Windows 3 & 4 and Google Chrome. It seemed to be okay in all of them. You'll want to perform more in-depth testing to make sure it doesn't negatively affect other layout.

You may want to isolate the change to just the subType class just to make sure it doesn't affect other li elements under #cartComputer:

#cartComputer LI.subType {
    display: inline;
}

Weird IE8 layout glitch - why does the body background disappear?

The answer below is now mostly obsolete, because the problem has been fixed as of jQuery 1.6.2, which has been out for a while now.

If you're having this problem, just upgrade jQuery to the newest available version.

Edit:

There's something wrong with jQuery!

If I switch to 1.6.1 hosted from Google, it still breaks: http://jsbin.com/epata3/3

If I move the script to inside the head, it works: http://jsbin.com/epata3/4

And you're right, everything works as expected with 1.6.0: http://jsbin.com/epata3/7

???

~~There's something wrong with your jQuery include.~~

This simple test case breaks in IE8 in exactly the same way:

See in IE8: http://jsbin.com/exomi4

The background flashes red, then turns white.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style>
body {
    background-color: red;
}
</style>

</head>
<body>
<script type="text/javascript" src="http://www.mojalbum.com/js.php?f=core/jquery_1.6.1.js,&c=v2"></script>
</body>
</html>