SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    South Africa
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Background color and text display issues in IE7 for lists

    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.
    Blog, Graphic, Web and Frontend Designer
    www.foxinni.com

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    South Africa
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 */
    Blog, Graphic, Web and Frontend Designer
    www.foxinni.com

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    As the FAQ I linked to above explains the height: 1&#37; 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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    South Africa
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    got it thanks!

    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!
    Blog, Graphic, Web and Frontend Designer
    www.foxinni.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •