Background color and text display issues in IE7 for lists

**foxinni** · Sep 18, 2007 01:25

I've had this problem before and it does not seem like the same solution works. But I'm up for any suggestions. (used the height:1%)

The incoming messages are displayed in a list. With Clever CSS formatting the <IMG> and <spans>. But in IE those list hide the text (?) and don't display background colors. See it here...

http://www.gaypeers.com/profiles/im/inbox.aspx

Username: demo@demo.com
pass: demo

I'm just confused as to why the date and the check box are displaying properly. Please be sure to view is in both IE6 and IE7... they give the same issues... seeing that IE7 also have a new bag of tricks.

**markbrown4** · Sep 18, 2007 02:30

Can you make a test case please and post both the html and css in code blocks or put up a page on the net for us to have a look at, you need to make it easy for people to help you.

It sounds like classic hasLayout behavior though:
http://www.sitepoint.com/forums/show...9&postcount=24

**foxinni** · Sep 18, 2007 02:59

That what the URL and the login was for. The test case is there. The Code behaves different in seperate browsers. So thought you'd like to see it in action.

The code below was copies out of the webpage via firebug and the CSS out of the source file. Hope it helps to explain myself.

Code HTML4Strict:

<div class="instant">
<ul>
<li style="background: rgb(248, 229, 229) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
 
<a href="/profiles/profile.aspx?user=gaypeers">
<img class="face" src="/thumbnail.aspx?section=PERSONALPICS&w=80&h=60&image=logo0.jpg"/></a>
<table border="0" style="float: right;"><tbody><tr><td>9/18/2007 9:25:27 AM</td><td><input type="checkbox" value="1" name="delInboxItem107"/></td></tr></tbody></table>
 
 
<h4><a href="Read.aspx?ID=107&new=1">Another Test</a></h4>
<a href="Read.aspx?ID=107&new=1">Whahahaha loala..</a><div class="clear"/>
</li>
 
<li class="module_a">
<a href="/profiles/profile.aspx?user=gaypeers">
<img class="face" src="/thumbnail.aspx?section=PERSONALPICS&w=80&h=60&image=logo0.jpg"/></a>
 
<table border="0" style="float: right;"><tbody><tr><td>9/18/2007 9:25:02 AM</td><td><input type="checkbox" value="1" name="delInboxItem106"/></td></tr></tbody></table>
 
 
<h4><a href="Read.aspx?ID=106">Test!</a></h4>
<a href="Read.aspx?ID=106">This is a test ..</a><div class="clear"/>
</li>
</ul>
</div>

- and -

Code CSS:

.instant ul li{ background:#fff; border-bottom:1px #aaa solid; margin-bottom:10px; padding:2px; font-size:14px;}
.instant ul li.new{ background:#f8e5e5; }
.instant ul li span.edit{  text-align:right ; float:right;}
.instant ul li p { clear:both;}
.instant ul li img{ float:left; margin:4px; border:#696969 2px solid;}
.instant ul li h4{ font-size:24px; border-bottom:1px #aaa solid; margin:2px 12px 2px 6px;}

and this higher up in the ccs file...

Code CSS:

/* mac hide \*/
* html li {height:1% !important;}
/* end hide */

**markbrown4** · Sep 18, 2007 03:43

As the FAQ I linked to above explains the height: 1% hack gives 'layout' to IE6,
for IE 7 min-height: 0; is the preferred option.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* mac hide \*/
* html li {
	height:1% !important;
}
li {
	min-height:0
}
/* end hide */
.instant ul {
	list-style: none
}
.instant ul li {
	background:#fff;
	border-bottom:1px #aaa solid;
	margin-bottom:10px;
	padding:2px;
	font-size:14px;
}
.instant ul li.new {
	background:#f8e5e5;
}
.instant ul li span.edit {
	text-align:right;
	float:right;
}
.instant ul li p {
	clear:both;
}
.instant ul li img {
	float:left;
	margin:4px;
	border:#696969 2px solid;
}
.instant ul li h4 {
	font-size:24px;
	border-bottom:1px #aaa solid;
	margin:2px 12px 2px 6px;
}
</style>
</head>
<body>
<div class="instant">
  <ul>
    <li style="background: rgb(248, 229, 229) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <a href="/profiles/profile.aspx?user=gaypeers"> <img class="face" src="/thumbnail.aspx?section=PERSONALPICS&amp;w=80&amp;h=60&amp;image=logo0.jpg"/></a>
      <table border="0" style="float: right;">
        <tbody>
          <tr>
            <td>9/18/2007 9:25:27 AM</td>
            <td><input type="checkbox" value="1" name="delInboxItem107"/></td>
          </tr>
        </tbody>
      </table>
      <h4><a href="Read.aspx?ID=107&amp;new=1">Another Test</a></h4>
      <a href="Read.aspx?ID=107&amp;new=1">Whahahaha loala..</a>
      <div class="clear"/></div>
    </li>
    <li class="module_a"> <a href="/profiles/profile.aspx?user=gaypeers"> <img class="face" src="/thumbnail.aspx?section=PERSONALPICS&amp;w=80&amp;h=60&amp;image=logo0.jpg"/></a>
      <table border="0" style="float: right;">
        <tbody>
          <tr>
            <td>9/18/2007 9:25:02 AM</td>
            <td><input type="checkbox" value="1" name="delInboxItem106"/></td>
          </tr>
        </tbody>
      </table>
      <h4><a href="Read.aspx?ID=106">Test!</a></h4>
      <a href="Read.aspx?ID=106">This is a test ..</a>
      <div class="clear"/></div>
    </li>
  </ul>
</div>
</body>
</html>

I think your problem may be elsewhere as this looks the same now in Firefox, IE6 and IE7.

**foxinni** · Sep 20, 2007 09:31

Thanks.... i did i bit of reading and it seems you have to put the minimum-height:0px in the classes for IE7.

So it's been fixed on the link... thanks guys... Sitepoint is the Best!

User Tag List

Thread: Background color and text display issues in IE7 for lists

Thread Tools

Display

Background color and text display issues in IE7 for lists

got it thanks!

Bookmarks

Bookmarks

Posting Permissions