CSS + <ul> + IE = aarrggghhhh

HTML & CSS
1

I am having some nightmares with the formatting of an unordered list in IE, that I just can’t figure out.

Everything shows up fine in chrome/firefox, but in IE there is extra space around each element (almost like either extra padding, or even a linebreak inserted) and the bullets in my <dt> tag are not lining up at all. Also, you can see the “pages” section fits on one line in Firefox/chrome, but takes two lines in IE

Here you can see the difference (the section titled "Latest Posts): http://www.modernwarfare3forum.org/

Here are the screenshots:
Firefox/Chrome (good)

IE (bad)

Code:

<ul class="newpostslist"><
<div class="topic-actions">
	<div class="pagination">
		{RECENT_TOPICS_PAGE_NUMBER} &bull; <span>{RECENT_TOPICS_PAGINATION}</span>
	</div>
</div>

		<li class="row<!-- IF recent_topics.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
			<dl class="icon" style="background-image: url({recent_topics.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
				<dt style="<!-- IF recent_topics.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{recent_topics.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{recent_topics.TOPIC_FOLDER_IMG_ALT}"><!-- IF recent_topics.S_UNREAD_TOPIC --><a href="{recent_topics.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{recent_topics.U_VIEW_TOPIC}" class="topictitle">{recent_topics.TOPIC_TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
					<!-- IF recent_topics.S_TOPIC_UNAPPROVED or recent_topics.S_POSTS_UNAPPROVED --><a href="{recent_topics.U_MCP_QUEUE}">{recent_topics.UNAPPROVED_IMG}</a> <!-- ENDIF -->
					<!-- IF recent_topics.PAGINATION --><strong class="pagination"><span>{recent_topics.PAGINATION}</span></strong><!-- ENDIF -->
					<!-- IF recent_topics.ATTACH_ICON_IMG -->{recent_topics.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {recent_topics.TOPIC_AUTHOR_FULL} &raquo; {recent_topics.FIRST_POST_TIME}
					<!-- IF recent_topics.U_VIEW_FORUM and recent_topics.FORUM_NAME --><br />{L_IN} <a href="{recent_topics.U_VIEW_FORUM}" style="font-weight: bold;">{recent_topics.FORUM_NAME}</a><!-- ENDIF -->
				</dt>
				<dd class="posts">{recent_topics.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views">{recent_topics.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
				<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {recent_topics.LAST_POST_AUTHOR_FULL}
					<a href="{recent_topics.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{recent_topics.LAST_POST_TIME}</span>
				</dd>
			</dl>
		</li>
</ul>

CSS code:

/* New Posts Mod */
.newpostsrow {
	list-style-position: none;
	padding: 0 0 0 0;
}

.newpostslist {
	padding: 0 0 0 0;
}

.newpostspagination {
	padding: 0 0 5px 0;
	color: #CFCFCF;
	font-size: 1em;
	font-weight: bold;
}

.newpostsblock {
	padding: 0 0 5px 0;
}

a.newpoststopictitle, a.newpoststopictitle:visited {
	margin: 1px 0;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color: #FFFF33;
}

.newpostsposts {
	color: #FF9933;
}

Any help would be very, very much appreciated.

2

Your html is not good.

There is a “<” on the first line that should not be there.

<ul> can only have <li> as DIRECT descendants, but the first descendant is a <div>.

Fix your mark up and I’m sure it will look the same in IE.

3

Hi,

If you still have problems once you’ve fixed the mark up as mentioned by noonope above then please post the source html and not conditional code as that is not really much use for us to test.

Run the page and then copy the html from view source.

We would also need all the relevant cs sin order to build a test case and fix specific problems. You will also need to say which versions of IE are given you problems as they will vary greatly.

IE6 and 7 are buggy with lists and you wuld usually need to remove haslayout is the element has mis-aligned bullets or add haslayout to inner items to cure whitespace gaps. However without full code it;s not possible to say which way to go.

4

I tried removing the <div> from below the <ul> and all of the problems persist.

Here is the html code straight from the view source (without the conditionals)

<ul class="newpostslist"> 
 
	
		<li class="row bg1"> 
			<dl class="newpostsblock"> 
				<dt class="newpostsrow" style="" title="New posts"><a href="./viewtopic.php?f=2&amp;t=7&amp;view=unread#unread"><img src="./styles/MW2/imageset/icon_topic_newest.png" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=2&amp;t=7" class="newpoststopictitle">Favorite thing about MW2 that you want to see in MW3</a><strong class="pagination"><span><a href="./viewtopic.php?f=2&amp;t=7">1</a><span class="page-sep">, </span><a href="./viewtopic.php?f=2&amp;t=7&amp;start=10">2</a></span></strong> 
				</dt> 
				<dd class="newpostsposts">11 <dfn>Replies</dfn>, 56 <dfn>Views</dfn></dd> 
				<dd class="lastpost"><span><dfn>Last post </dfn>by <a href="./memberlist.php?mode=viewprofile&amp;u=88">smokey904</a> 
					<a href="./viewtopic.php?f=2&amp;t=7&amp;p=213#p213"><img src="./styles/MW2/imageset/icon_topic_latest.png" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />Mon Feb 21, 2011 5:08 pm</span> 
				</dd> 
			</dl> 
		</li> 
		
		
	
		<li class="row bg2"> 
			<dl class="newpostsblock"> 
				<dt class="newpostsrow" style="" title="New posts"><a href="./viewtopic.php?f=2&amp;t=47&amp;view=unread#unread"><img src="./styles/MW2/imageset/icon_topic_newest.png" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=2&amp;t=47" class="newpoststopictitle">Nade or Semtex?</a> 
				</dt> 
				<dd class="newpostsposts">3 <dfn>Replies</dfn>, 18 <dfn>Views</dfn></dd> 
				<dd class="lastpost"><span><dfn>Last post </dfn>by <a href="./memberlist.php?mode=viewprofile&amp;u=88">smokey904</a> 
					<a href="./viewtopic.php?f=2&amp;t=47&amp;p=212#p212"><img src="./styles/MW2/imageset/icon_topic_latest.png" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />Mon Feb 21, 2011 4:54 pm</span> 
				</dd> 
			</dl> 
		</li> 
		
		
	
		<li class="row bg1"> 
			<dl class="newpostsblock"> 
				<dt class="newpostsrow" style="" title="New posts"><a href="./viewtopic.php?f=2&amp;t=48&amp;view=unread#unread"><img src="./styles/MW2/imageset/icon_topic_newest.png" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=2&amp;t=48" class="newpoststopictitle">What perks need to go?</a> 
				</dt> 
				<dd class="newpostsposts">7 <dfn>Replies</dfn>, 247 <dfn>Views</dfn></dd> 
				<dd class="lastpost"><span><dfn>Last post </dfn>by <a href="./memberlist.php?mode=viewprofile&amp;u=88">smokey904</a> 
					<a href="./viewtopic.php?f=2&amp;t=48&amp;p=210#p210"><img src="./styles/MW2/imageset/icon_topic_latest.png" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />Mon Feb 21, 2011 4:50 pm</span> 
				</dd> 
			</dl> 
		</li> 
		
		
	
		<li class="row bg2"> 
			<dl class="newpostsblock"> 
				<dt class="newpostsrow" style="" title="New posts"><a href="./viewtopic.php?f=2&amp;t=46&amp;view=unread#unread"><img src="./styles/MW2/imageset/icon_topic_newest.png" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=2&amp;t=46" class="newpoststopictitle">Most kills in one life?</a> 
				</dt> 
				<dd class="newpostsposts">1 <dfn>Replies</dfn>, 20 <dfn>Views</dfn></dd> 
				<dd class="lastpost"><span><dfn>Last post </dfn>by <a href="./memberlist.php?mode=viewprofile&amp;u=57">theor13</a> 
					<a href="./viewtopic.php?f=2&amp;t=46&amp;p=208#p208"><img src="./styles/MW2/imageset/icon_topic_latest.png" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />Mon Feb 21, 2011 4:36 am</span> 
				</dd> 
			</dl> 
		</li> 
		
		
	
		<li class="row bg1"> 
			<dl class="newpostsblock"> 
				<dt class="newpostsrow" style="" title="New posts"><a href="./viewtopic.php?f=5&amp;t=49&amp;view=unread#unread"><img src="./styles/MW2/imageset/icon_topic_newest.png" width="11" height="9" alt="View first unread post" title="View first unread post" /></a> <a href="./viewtopic.php?f=5&amp;t=49" class="newpoststopictitle">MW2 vs. Black Ops</a> 
				</dt> 
				<dd class="newpostsposts">3 <dfn>Replies</dfn>, 304 <dfn>Views</dfn></dd> 
				<dd class="lastpost"><span><dfn>Last post </dfn>by <a href="./memberlist.php?mode=viewprofile&amp;u=82">dabkow</a> 
					<a href="./viewtopic.php?f=5&amp;t=49&amp;p=203#p203"><img src="./styles/MW2/imageset/icon_topic_latest.png" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />Sun Feb 20, 2011 4:20 pm</span> 
				</dd> 
			</dl> 
		</li> 
		
		
			</ul>
5

In IE you have:

<ul class="newpostslist"> 
    <div class="topic-actions">
    <ul class="newpostslist">
    <span class="corners-bottom"> [...]

I believe that’s what’s making your page break in IE: a doubled up <ul class=“newpostslist”>, div, ul and span as direct descendants of an ul.

As I’ve said, try to fix your mark up, and IE (below IE8, since IE8-9 manage to render honorably your bad code) will try to look the same as the other browsers :slight_smile:

You should try make your page validate. Even for transitional, you still have 33 errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.modernwarfare3forum.org%2F&charset=(detect+automatically)&doctype=Inline&group=0.

6

Whoops, I thought I had moved where the <ul> tag opened.

Anyway, I’ve fixed that now so there’s only the one <u> tag and there’s no div inside of it, and I still get the same error.

I guess I’ll step through the page validation stuff, though that stuff seems unrelated. It looks like all of the errors are either a) it not recognizing attributes in the script that facebook generates for the like box, and b) a group of div, tr, td, and table tags that it throws errors for not being closed in random places, and then later throws an error when it gets to the closing tags saying they’re not open.

Odd.

7

Yes it’s a bug with the dl inside the list which I’ve seen a few times before and for some strange reason IE6 and 7 take exception to it. If you changed the dl structure to divs or other block element then the problem goes away.

(That section isn’t really a list of data terms and definitions as far as I can see but basically a list of posts.)

The only solution apart from using divs in the list rather than DLs is to use a hack like this.


*+html ul.newpostslist li{zoom:1.0;vertical-align:top;}
*+html ul.newpostslist dl{position:relative;top:-.3em}
* html ul.newpostslist li{zoom:1.0;vertical-align:top;}
* html ul.newpostslist dl{position:relative;top:-.3em}

That gives haslayout to fix the big gaps between list items and then uses vertical-align:top which IE (stupidly but luckily for us) applies to the marker and aligns it to the top instead of misaligning it altogether. Then we drag the dl back into position with a negative margin.

8

Wow, that fixed it in one fell swoop without having to recode it as divs or anything.

Thanks a bunch.