0

I need to fix some existing html content. The CSS is quite convoluted, however, I have one thing popping up that I can't get rid of.

All the ul li lists have a mid grey vertical line between the circle/dot and the li item text. The first item is fine, it is only consistently appearing after the first item. The first item is fine.

I tried margin 0 and padding 0 to no avail.

Anyone seen something similar and knwo how to fix it?

Here is the code, I was given. Put in a .html and look at it in firefox.

<!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" xml:lang="en" lang="en">
<!-- InstanceBegin template="/templates/standard_menus_fixed.dwt" codeOutsideHTMLIsLocked="false" -->
<head id="Template_Head1"><title>
    Bereavement: key facts
</title><link href="/WebResource.axd?d=5l5Vc4D6yAURPWhWXhJ1YxVmorTrcBTS6LeygIpuH99gHY_hxCH5iVrseffmyXJjODvXT-h-Cep60waS6UnK9oPqL7YFeDCBMOyrJ_54mXW-llvBQnPFG49p21uK3ml9R2ozACJMx6EY-iFhJJSIGm4N0WI1&amp;t=635101844810114495" type="text/css" rel="stylesheet" /><base href="http://www.rcpsych.ac.uk/" /><link href="/templates/default/css/system/system.css" type="text/css" rel="stylesheet" /><link href="/templates/default/css/system/standard.css" type="text/css" rel="stylesheet" />
    <!--<link href="/templates/default/css/main.css" type="text/css" rel="stylesheet" />-->
    <!--New site styles added by JainA00 07/08/2012-->
    <link href="/templates/default/css/newSite/global.css" type="text/css" rel="stylesheet" media="screen,projection" /><link rel="stylesheet" href="/templates/default/css/newsite/print.css" type="text/css" media="print" />
        <!--[if lte IE 7]>
  <link rel="stylesheet" href="/templates/default/css/newSite/ie8.css" media="screen,projection" type="text/css" />
  <![endif]-->
    <!--[if lte IE 6]>
  <link rel="stylesheet" href="/templates/default/css/newSite/ie7.css" media="screen,projection" type="text/css" />
  <![endif]--> 
    <link rel="stylesheet" href="/templates/default/css/n_red.css" media="screen,projection" type="text/css" />
    <script type="text/javascript" src="/../../scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="/../../scripts/jquery.overlabel.js"></script>

    <script type="text/javascript" src="/../../scripts/jquery.hoverIntent.minified.js"></script>

    <script type="text/javascript" src="/../../scripts/main-functions.js"></script>


    <meta name="robots" content="canonical" /><meta name="GENERATOR" content="Immediacy .NET CMS - Licensed To : The Royal College of Psychiatrists" /><meta name="keywords" content="bereavement, grief, death, depression, antidepressants, grieving" /><meta name="description" content="Bearevement: what happens when you loose someone you love: produced by the Royal College of Psychiatrists" /><!-- MY CSS --><style media="screen" type="text/css">body{overflow-x: hidden;}#page-wrapper{background-image: url("");width:630px;left:100px;margin-left:0px;} #page-inner{     background-image: url("");width:820px;left:0px;margin-left:0px;} #top-layer em{background-image: url("");}
    ul{width:85%; background-color:#ffcccc; margin:0; padding:0; padding-left:20px; border:none;}
    li{width:100%; background-color:#ff0000; margin:0; padding:0; border:none;}

    </style></head>
<body class="mainBody">

<div id="top-layer">
    <!-- KILL TOP LAYER -->
    <div id="page-wrapper">
        <div id="page-inner">
        <div id="page-inner">
            <div id="breadCrumb">

<!-- KILL BREADCRUMB -->   </div>
            <div id="main-layer">
                <div id="main-content">

                    <div id="mainContent">

<h3><strong>What if I can't come to terms with it?</strong></h3>

<ul>
<li>You may have problems if you can't grieve properly at the time
of your loss because of family or business commitments. Some people
don&rsquo;t appear to grieve at all and return quickly to their normal
life,&nbsp;but then, years later, have odd physical symptoms or
spells of depression.</li>
<li>If you have had a stillbirth, miscarriage or abortion, other
people may not understand why you feel so deeply about it. This can
make you feel very alone and low.</li>
<li>You may start to grieve, but get stuck. The early sense of
shock and disbelief goes on. Years may pass and still you find it
hard to believe that the person you loved is dead.</li>
<li>You may find that you can&rsquo;t think of anything else, perhaps
making the room of the dead person into a shrine.</li>
<li>Occasionally, you may feel so low that you have thoughts of
killing yourself and may even stop eating and drinking.</li>
<li>Bereavement can affect your physical health, with an increased
risk of cancer and heart disease. Some older people may die very
soon after their partner or spouse has died.</li>
</ul>

</body>
<!-- InstanceEnd -->
</html>
4
  • 2
    Hi, can you make a Fiddle? So we can look into it?
    – abir_maiti
    Oct 17, 2014 at 11:00
  • Create something we can work with by using jsfiddle.net for example: stackoverflow.com/help/mcve
    – Marc Audet
    Oct 17, 2014 at 11:30
  • You mean less code or the CSS visibly in the question? I think there are about 5 CSS files currently. None of it is my work, so it's all very messy. Oct 17, 2014 at 12:40
  • I was looking for a quick answer here, in case anyone has experienced this before. I wouldn't necessarily ask you guys to go through all that CSS for me. Oct 17, 2014 at 12:40

1 Answer 1

0

In order to remove the mid grey vertical line between the circle/dot and the li item text, try to add the following CSS style to 'li' element : border-left: 0px !important;. Here comes the final CSS style for 'li' element :

li{
width:100%; 
background-color:#ff0000; 
margin:0; 
padding:0; 
border:none; 
border-left: 0px !important;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.