CODEWITHSUNDEEP
htmlcsshtml-lists
Mthe beseti
Mthe beseti

Reputation: 619

HTML CSS List-Style Compatibility

I'm working on front-end of an intranet website.

The problem I have is with to do with the list compatibility. What I want to do is to style the list items, for example, instead of having bullets, I would like to have arrows. I have inserted the arrows, but it displays differently on Firefox compared with Chrome.

On Firefox it displays the bullet point on the corner, but on Chrome it displays inline with the link text which is what I'm looking for.

Here is the CSS for the list and arrow:

.jt-menu .item-280 li li {
     color: #FFFFFF;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
     font-weight: bold;
     line-height: 16px;
     margin: 1px 0 0 1px;
     text-align: left;
     width: 172px;
     list-style: disc inside url("../../../../images/barrow.png");   
}

Upvotes: 2

Views: 181

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79022

Add this to your CSS:

.jt-menu > li > ul ul li {
    width: 240px !important;
}
.jt-menu > li > ul ul a {
    display: inline-block;
}

Upvotes: 2

Danny Cooper
Danny Cooper

Reputation: 355

Try adding more left-margin and setting line-height as tall as your image.

Upvotes: 0

Related Questions