First list item in an unordered list displays disc on the right

HI,

As I have not received any response yet I am not quite sure if I made clear what I need, perhaps my previous comment was a bit confusing.

The point is that I need to keep Enfold’s default styling list-style: disc outside;

Employing list-style: disc inside; is not a solution for me, I mentioned it just in case it helps to understand what is going on.

So please, does anybody have a solution to solve the issue?

Thanks.

Best Regards,

Diego

Hi,

I needed this to be solved ASAP so I have been debugging it myself.

The origin of the problem
I have found out that the problem is caused by ENFOLD’s separator shortcode (default), when it is placed before de list, then the marker (bullet point) of the first list item gets misaligned (in webkit browsers like Chrome (OS X) and Safari).

The reason why this is happening is because of ENFOLD’s class .hr and its property float: left;

Possible Solutions
I came out with two solutions. I haven’t had the time to thoroughly test them in order to detect some possible undesirable secondary effects, so I would like to ask Kriesi’s team to do it as I am worried about harming other elements of the theme like navigation menus or other types of separators.

Solution 1

main ul, main ol {
    clear: left;
}

Solution 2

.hr {
    float: none;
}

In case you want to reproduce the issue here you have the code I used on my page:

[av_hr class='default' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello'] <ul> <li>Measures:</li> <li>Materials:</li> <li>Dyes:</li> <li>Condition:</li> </ul>

Please, can someone confirm the best solution in order to minimize the possible adverse effects in other elements of the theme?

Thanks!

Best Regards
Diego

• This reply was modified 9 years, 5 months ago by p_castro.

Hey Andy,

First of all, I’d like to say I deeply respect the great work that Kriesi’s team is doing in terms of both, development and support. I also apologize if my previous private message felt a bit harsh.

Thanks for taking the time to explain your support policy, in fact I had already read it so I was not expecting your team to give me an answer on the weekend.

I bumped into my own thread because it had been almost 24 hours since I had reported the issue and I saw that other threads, posted much later than mine, had already been answered, so I thought that I had not properly explained the issue thus I tried to make some clarifications. Maybe, in order not to get behind in your queue I should have edited my first post, instead of adding a new one, is that correct?

I hope you understand that I, like other users, work with tight deadlines and, although I know Kriesi’s support team does not have any obligation to give an answer within any timeframe, I do expect being answered within 24 hours, specially when much newer threads have already been responded. I understand that there are threads easier/quicker to answer and of course I’m not trying to tell Kriesi’s team how to deal with the forum. I just want to let you know my personal situation, which I believe must have a lot in common with some other users.

I appreciate you tested the shortcode I provided but I have to disagree with your remark “you are missing the [av_textblock]”. It is true that the way you have employed the [av_hr] shortcode outside the [av_textblock] shortcode makes the issue go away but it should work fine also the way I did it, which is having the [av_hr] shortcode inside the [av_textblock] shortcode. Please, let me elaborate. I am using the ‘Advanced Layout Editor’ (‘Avia Layout Builder’) so when I insert a ‘Text Block’ and edit it using the ‘Visual Editor’, then I get the option of inserting a few Enfold shortcodes, including the ‘Separator/ Whitespace’ shortcode, see here, that means that the theme is explicitly giving the option of inserting the separator shortcode inside the ‘Text Block’ and that is what is causing the issue.

By the way, I have the impression that the shortcode you provided has a duplicated [av_textblock] opening tag, see here.

Here you have the complete shortcode that is causing the issue:

[av_textblock size='' font_color='' color='' custom_class='']
[av_hr class='default' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' custom_class='']
<ul>
	<li>Measures:</li>
	<li>Materials:</li>
	<li>Dyes:</li>
	<li>Condition:</li>
</ul>
[/av_textblock]

If now we are on the same page I would greatly appreciate if you could have a look at the two possible solutions I provided here and let me know if they could possibly cause any adverse effects in other elements of the theme, or perhaps you could propose a better fix.

Thank you.

Best Regards,
Diego

Hi Andy,

By saying:

it is working as expected:

and

The problem is that you are first calling a text block element and then calling a separator element. Obvious that things get messed up

are you implying that Enfold’s users should never use the shortcode generator present on the Visual Editor when using the ‘Advanced Layout Editor’ (‘Avia Layout Builder’)? Really :)?

In one word, are you saying that I am doing something wrong when I am simply using an element present in Enfold’s UI (shortcode generator)?

Sorry but If that shortcode does not work properly nested within the Text Block shortcode then, please, remove it from the shortcode generator, do not offer it misleading the user. BTW is this incompatibility explained in Enfold’s documentation?

Thank you.

Best Regards,
Diego

• This reply was modified 9 years, 5 months ago by p_castro.

Hey!

Thank you Ismael for putting the matter to rest. At last, in this thread, a member of Kriesi’s team gives a considered and thoughtful response.

I think I’ll use your solution instead of mine because it is more specific, so less likely to cause undesirable secondary effects in other elements of the theme.

Cheers!
Diego