0

I am trying to make something display in IE8 - namely, the dots in each table row that mimics a list. It's done in asp.net and has some server controls, so the changes that I can make are pretty limited. I made some style sheet changes that do the trick in current browsers, but the dots/bullets don't display in IE 8. I have created a sample page that demonstrates the problem. Code is below, as is a jsFiddle link.

Any ideas on how I might find an IE-compatible way to display the bullets on each line? I guess I could stick an image there, butwho knows what other hijinx I may run into. Thanks in advancve for any advice.

http://jsfiddle.net/NbL6W/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<!-- Add jquery for client side functionality... -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<style>

.TableListItems
{
padding: 10px 5px 0px 15px;
text-decoration:none;
font-weight:normal;
border: none 0 white;
}

td.TableListItems
{
display:list-item;
list-style:disc inside;
}
</style>

</head>
<body>
   <table cellspacing="0" rules="all" border="1" style="width:100%;border-collapse:collapse;">
<tr>
<th scope="col" style="width:100%;">The title</th>
</tr><tr class="TableListItems">
<td class="TableListItems">A line of text a line of text</td>
</tr><tr class="TableListItems">
<td class="TableListItems">more lines of text more lines of text</td>
</tr><tr class="TableListItems">
<td class="TableListItems">still more lines of text</td>
</tr>
</table>
</body>

<script language="javascript" type="text/javascript">

   $(document).ready(function () {
           $("td.TableListItems").css( { "display":"list-item", "list-style":"inside" } );
   });

   </script>

</html>
Ev Conrad
  • 323
  • 4
  • 17
  • Why not use
      and
    • balise?
     – Orelsanpls Jun 03 '14 at 22:22
  • @RaNdoM_PoWneD - The html is emitted by server controls. I could go in and hack this up, but simply changing CSS seems like the least invasive approach rather than rewrite client code and server code and CSS. It wasn't a problem until someone showed me how it looked in IE8. I know that the jQuery is correct because when I add something a little more innocuous, such as 'text-decoration:underline', IE renders that w/o a problem. – Ev Conrad Jun 03 '14 at 22:40
  • Look http://stackoverflow.com/questions/2799874/ie8-playing-funny-with-list-style-position-inside And http://www.sitepoint.com/forums/showthread.php?689172-IE-Bug-on-CSS-Property-list-style-float-left Maybe this is your problem. I have no more idea sorry – Orelsanpls Jun 03 '14 at 22:47
  • As @RaNdoM_PoWneDNot notice it's not a bad idea to change the code anyway. Tables are for tabular data, try to use elements that "makes sense" whenever possible. – miguel-svq Jun 03 '14 at 22:50
  • @Miguel - I agree, although the tabular code is emitted by the server control (produced by a big vendor) and the data is tabular in the production application, although not necessarily in my example. – Ev Conrad Jun 04 '14 at 16:15
  • Try to add display block to the table and the tr. If not solved try using list-style-type and list-style-position spite of the shorthand. BTW there's a bug in certain IE versions and if the element is floated the bullet disapper. – miguel-svq Jun 04 '14 at 16:36

1 Answers1

0

You don't need to use jQuery, just instead of your current td.TableListItems CSS class use:

td.TableListItems:before
{
    display:inline-block;
    content:"";
    width:5px;
    height:5px;    
    margin-right:5px;
    vertical-align:middle;
    background-color:black;
    border-radius:50%;
}

The last line won't work in IE8, so bullets will be square in that browser (they will be round everywhere else) but they will be displayed.

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • I replaced my td.TableListItems CSS with the above block and took out the script block, with no luck. I'll keep trying though, thx. – Ev Conrad Jun 10 '14 at 23:19