List item showing toward Top of <div> in EI8 but not FF or Chrome

HTML & CSS
1

I can’t see why in IE 8 the same type of list would show top aligned but in FF and other browsers it’s middle-aligned veritically which is perfect

Example in FF (this is how it should look and works fine in FF and Chrome):

Example in IE8

the right example is FF and how it should look. Now here’s the code:

.xItems-NotificationsContainer
{
	width: 720px;
	background-color: #F3F1EB;
	margin: 10px 0px 10px 5px;
	color: #000;
	border: 1px solid #D0CABD;
	padding: 5px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
}

.xtems-NotificationContainer a
{
	color: #A1191F;
}

.xItems-NotificationsContainer ul
{
	text-align: left;	
}

    <div class="xItems-NotificationsContainer">
        <ul><li>blah blah blah</li></ul>
    </div>
2

weird, this fixes it sort of (still not perfect in terms of the height of the box and vertical alignment of the text but better), but the list item bullet disappears in IE!

.xItems-NotificationsContainer
{
	width: 720px;
	background-color: #F3F1EB;
	color: #000;
	margin: 0px 0px 10px 0px;
	border: 1px solid #D0CABD;
	padding: 5px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
}

.xItems-NotificationContainer a
{
	color: #A1191F;
}

.xItems-NotificationsContainer ul
{
    margin: 15px 0px 10px 5px;
    text-align: left;
}
3

The ul (as with most other elements) has a top margin by default in Firefox (and most others) but not in IE. Ie just has a bottom margin whereas others have a default top and bottom.

You also need to control the padding on the ul as some use margins for the bullet and some use padding by default.

4

Thanks Paul. Through playing with this I’m beginning to now notice that it is a combo of the margin and padding in this case for ul like you stated. I’ll play around with this a little more. I thought there was some magical clear I could do…but my boss won’t let me use clears lol. Gayness.

5

It’s just also weird that the bullet point goes away when I add margin to the ul in IE 8. I’ve been fiddling with the margin and padding. This one is a pure pain in the ass this time. I either end up with more padding/margin on the left in FF as compared to IE …or end up with more padding or margin at the top of the ul in IE as compared to FF.

6

As I mentioned above the space for the bullet is supplied by default via the browser using padding or margin.

You have set a 5px left margin which means that browsers who use padding via default will get a lot or room for the bullet and those that use margin will have no room at all.

You need to set padding and margin to zero and then just set one of them. You need about 16px left margin (or 16px padding instead) at least for a bullet to show.

7

Thanks, I see it now. Weird.