Difficult Time with a Unordered List in IE7

[usachrisk]

Hi Everyone, I'm having a hard time with an unordered list displaying properly in IE7. The HTML/CSS below works fine in FF3+ and IE8, but in IE7 the bullets are moved left. I can move them right, but then they're too right in IE8/FF3.

This div is inside of a container DIV with two other DIVs lined up in columns:

<div id="content-right" style="display: inline;">
     <p>List Description Here</p>
     <ul class="myulclass">
          <li>Item #1</li>
          <li>Item #2</li>
          <li>Item #3</li>
          <li>Item #4</li>
          <li>Item #5</li>
          <li>Item #6</li>
          <li>Item #7</li>
     </ul>
</div>

The following is the CSS for the relevant items:

.main_content { 
	display: block; 
	border:0 solid #cacce1;
	border-width:0 1px;
	padding: 4px;
	background:#cacce1;
	color:#000000;
	overflow: hidden;
}

#content-right  { width: 225px; float: left; padding-left: 7px; padding-right: 3px; min-height: 300px; border-left: 1px solid #d5d7ec; }

myulclass.hours { list-style-type: none; padding-left: 3px; }

myulclass.hours li { padding-left: 15px; font-size: 13px; background-image: url('circle.png'); background-repeat: no-repeat; background-position: 0 8px; font-size: 12px; line-height: 20px; }

Help appreciated :-)

[Stomme poes]

Your code doesn't match in the example you've posted here.

myulclass.hours doesn't exist in your HTML.

However, your issue is likely defaults between browsers, because that's what people commonly run into.

I can never keep it straight who does what: someone has default margins on ul's and someone else has default padding on ul's. This was a famous difference between IE and Firefox, though all browsers add something to make room for bullets.

First, always keep the stuff around a list simple: why float something and then in the markup say "display: inline"? You know that inline markup has ultimate say? Do you want content_right to be inline or a block?

You're not using list-item so it's really just a matter of the padding on the li's to make room for their background image.

So what you want to do is give everyone an ugly background colour. I won't bother listing them because the HTML and CSS didn't match up here (I assume they do in your real code), but just make it a different colour. Between browsers, you'll probably see someone adding padding or margin to the left side of the ul and the other browsers aren't, showing the reason for the discrepancy.

*edit another thing occurred to me. IE6 and 7 have something called Haslayout, which affects lists when the list is next to a floated something (an image for example). IE8 doesn't have this nasty Haslayout though, so if there's other pertinent markup around this list, it may have something to do with this.

You might want to post a live page, even if it's a dummy version.

[usachrisk]

Hi Stomme,

Thanks for all the info! The real code did match up, I just didn't pseduo code it properly. In fact, looking at it again, I really fudged up what was supposed to be simplifying and obfuscating the production HTML/CSS.

The display: inline was for testing something else and it was never removed.

You were right, it was padding being seen differently IE7 but I was spending so much time trying to modify the padding on the list item that I didn't think about the UL class. After some playing, I added margin: 0 to the UL and all three browsers (FF3, IE7, and IE8) all saw it close enough to the same for me not to worry about it.