CODEWITHSUNDEEP
htmlcss
shampouya
shampouya

Reputation: 406

Why does an unidentified segment appear near my div when I use an svg line?

I have an svg element that is placed between two div elements that have rounded edges. The divs and the svg line are displaying correctly, but for some reason, when I hover over the divs, a small black line segment appears on the bottom left of each row, and it disappears when I stop hovering. It's only an issue in Chrome, but not IE. How do I get rid of black segment?

<style>


#main_item_list{
    list-style-type: none; 
    position: absolute; 
    padding-left: 0px;
}

.ListItemContainer{margin-bottom: 20px;}


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 39px; 
    width: 360px; 
    height: 46px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
    display: inline-block;
}

.opaqueBlockSubBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 60px; 
    width: 220px; 
    height: 36px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
}

.formTextSpan{
    position: absolute; 
    z-index: 1; 
    margin-left: 23px; 
    color: white; 
    margin-top: 7px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 23px !important;
}

.formTextSpanSubItem{
    position: absolute; 
    z-index: 1; margin-left: 23px; 
    color: white; 
    margin-top: 5px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 20px !important;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #ADDBFF;
    position: absolute; 
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: .7; 
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: relative;
    left: 43px;
    top: -18px;
    stroke: white;
}


</style>




<div id="TechBackgroundContainer" style="background-color: lightseagreen; height: 300px;">


<ul id="main_item_list">

    <li id="DotItem1" class="ListItemContainer">
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon1"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Internal Communication</span></div>
        </a>
    </li>

    <li id="DotItem2" class="ListItemContainer">    
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon2"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Reports Package</span></div>
        </a>
    </li>

    <li id="DotItem3" class="ListItemContainer">    
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon3"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Talking Points</span></div>
        </a>    

    </li>

</ul>


</div>
</div>

Upvotes: 0

Views: 43

Answers (1)

dcalmeida
dcalmeida

Reputation: 403

Add this lines to your CSS:

#main_item_list a { 
    text-decoration: none;
}

Upvotes: 1

Related Questions