SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Sep 18, 2007, 01:25 #1
- Join Date
- Jul 2006
- Location
- South Africa
- Posts
- 29
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 18, 2007, 02:30 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 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
-
Sep 18, 2007, 02:59 #3
- 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>
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
-
Sep 18, 2007, 03:43 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
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&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"/></div> </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"/></div> </li> </ul> </div> </body> </html>
-
Sep 20, 2007, 09:31 #5
- 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