html css list with 'p' tag issue

StackOverflow https://stackoverflow.com//questions/25012021

  •  20-12-2019
  •  | 
  •  

Question

We have lots of List (li tag) directly followed by 'p' tag.

<ul>
<li>
   <p>in paragraph</p>
</li>
</ul>

in IE8 it is was not a problem. The list image and the text was aligned. But in IE10 text and list icon is not aligned (aligned in compatibility view).

Removing such 'p' tags is a solution but we have it in many places so it is not possible.

How do I solve it?

will really appreciate.

I notied that it is because of the 'a' tag after 'li' tag. But I cannot remove it. html pages are automatically generated.

CSS:

html{color:#000;background:#FFF;}
body,div,h1,h2,h3,h4,h5,h6,pre,code,form,img{border:0;}
address,caption,cite,code,em,th{font-style:normal;font-weight:bold;}
caption,th{text-align:center;}
h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
/* fonts */
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

 html {background-color: white; 
 scrollbar-shadow-color: white;
scrollbar-highlight-color: white;
scrollbar-face-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: white;}
Scrollbar hiding*/
   body { font-family: arial;}
  .familylinks {font-family: arial; padding-top:1.75em;} 
  .tablenoborder { margin: 0.5em;}
  .tablecustom{margin-left:-0.4em;}

  .p ol{margin-top: 0em;}


  ul.simple { list-style-type: none }
  ul { list-style-type: disc; list-style-position: outside; padding-bottom: 0.02em; margin-top:-0.05em;}/*--padding-bottom:0.15 changed to 0.05*/

  ol li { margin-left: -1.05em; padding-bottom: 0.25em;}
  ol li p{margin-top:-0.00005em;}
  li p{margin-top:-0.00005em;padding-top:0em;color:red}
  ol.customlists { margin-top: -0.5em}
  ol.customlists { margin-top: -0.25em}
  ol.h2custom{margin-top: 0.5em}
  ol.olcustom{margin-left:2.6em;}
  ul.ulcustom{margin-left:2.6em}

/* Various basic phrase styles */
  .bold { font-weight: bold; }
  .boldItalic { font-weight: bold; font-style: italic; }
  .italic { font-style: italic; }
  .underlined { text-decoration: underline; }


/* Align images based on @align on topic/image */
  div.imageleft { text-align: left }
  div.imagecenter { text-align: center; margin-top: 1em; margin-bottom: 1em; }
  div.imageright { text-align: right }
  div.imagejustify { text-align: justify }

html file example:

<?xml version="1.0" encoding="UTF-8"?>
<html lang="en-us" xml:lang="en-us">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" type="text/css" href="layout.css"/>
        <title>Numbering &amp; Bullets</title>
        </head>
        <body>
  <h1>Numbering &amp; Bullets</h1>
  <div>
     <div class="p"><strong>Bullets Test</strong>.</div>

     <ul>
        <li><a><!-- --></a>
          <div><p>in paragraph</p></div>
        </li>
        <li><a><!-- --></a>blha blha blha
        </li>
  </div>
</body>
</html>

regards, rnv

Was it helpful?

Solution

This is caused by the div, which is a block, so it wants to start on a new line after the inline a, even if the a is empty (and would have been ignored by older versions).

Solution: turn the div into an inline block, so that it sits in the same line as the a, to the right of it. In other words, add this to your CSS:

ul a + div {display:inline-block}

See http://jsfiddle.net/MrLister/6RPsN/

Edit: or if some of your a elements do have content and do need to sit on a line of their own above the div that follows, add :empty to the CSS, so that it works only on as without content.

ul a:empty + div {display:inline-block}

I'm not sure if this works in the versions of IE that it should work in though; can't test all of them here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top