Problem with details/summary in Firefox

I have a problem with my details/summary tags in Firefox in that it adds an extra little bullet at the beginning.

Chrome:
chrome

Firefox:
ff

My code:

<details>
  <summary title="More...">I have been facilitating international gatherings since my first assignment with the UN in 2002. I draw on a deep understanding of personal and group dynamics and am in demand as a facilitator of group processes large and small and as crisis coach for leaders worldwide. I am accredited by the International Association of Facilitators (IAF) as a Certified&#8482; Professional Facilitation. <span>[More...]</span></summary>
  <p>Since volunteering with disadvantaged young people in Moss Side Manchester in the late 1960s and then in a South African charity, I held leadership positions including at Save the Children and the British Red Cross.</p>
  <p>In 2014 I swam from Alcatraz to San Francisco to raise money for prisoners education, and three year later cycled 100 miles for struggling families. I have managed not to come last in six triathlons, enjoy pottering in my garden, and am the proud owner of a 1968 BSA Bantam D14/4 motorbike.</p>
</details>

If there any way to remove the bullet?

Thanks

Hi there gandalf458,

Firefox 65.0, Chrome 71.0 and Vivaldi 2.1
all show the “little bullet” on pc: :winky:

coothead

1 Like

Ah… so it disappeared with Chrome 72 then.

Hi there gandalf458,

Firefox uses this…

summary {
   display: block;
 }

…and Chrome uses this…

summary::-webkit-details-marker {
    display: none;
}

…to remove the “little buttons”

[edit]
I made a typo in my previous post :eek:
I was testing with Chrome 72, not 71 as stated.
[/edit]

coothead

1 Like

Looks like I’m snookered without a -moz-details-marker option.

Curses Moriarty.

Hi there gandalf458,

The problem is not with Firefox. :unhappy:

Per the HTML specification, the default style for <summary> elements includes
display: list-item . This makes it possible to change or remove the icon
displayed as the disclosure widget next to the label from the default, which is
typically a triangle.
 
You can also change the style to display: block to remove the disclosure
triangle.

Source :-

Summary - Default Style

It is Chrome that needs get up to date on this one. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
summary {
   display: block;
 }

summary::-webkit-details-marker {
    display: none;
}

</style>

</head>
<body> 
<details>
  <summary title="More...">I have been facilitating international gatherings since my first assignment with the UN in 2002. I draw on a deep understanding of personal and group dynamics and am in demand as a facilitator of group processes large and small and as crisis coach for leaders worldwide. I am accredited by the International Association of Facilitators (IAF) as a Certified&#8482; Professional Facilitation. <span>[More...]</span></summary>
  <p>Since volunteering with disadvantaged young people in Moss Side Manchester in the late 1960s and then in a South African charity, I held leadership positions including at Save the Children and the British Red Cross.</p>
  <p>In 2014 I swam from Alcatraz to San Francisco to raise money for prisoners education, and three year later cycled 100 miles for struggling families. I have managed not to come last in six triathlons, enjoy pottering in my garden, and am the proud owner of a 1968 BSA Bantam D14/4 motorbike.</p>
</details>
<script>
( function() {
  'use strict';

 }());
</script>  

</body>
</html>

coothead

4 Likes

Gotcha, squire!

I misunderstood - there’s a surprise! :nono:

Thanks!

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.