New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Definition list loses margins in firefox #210

Closed
azorath opened this Issue Jul 7, 2013 · 6 comments

Comments

4 participants
@azorath

azorath commented Jul 7, 2013

In Firefox a definition list loses its margins when you put it in another list.
Reset them all or is there a way to fix this issue for firefox alone?

Tested in Firefox 23 Beta, Opera 12.57, IE 10, Chrome 27 on Win7 64Bit.

@drublic

This comment has been minimized.

Show comment
Hide comment
@drublic

drublic Jul 12, 2013

Can you please add a reduced test case for this?

drublic commented Jul 12, 2013

Can you please add a reduced test case for this?

@azorath

This comment has been minimized.

Show comment
Hide comment
@azorath

azorath Jul 12, 2013

all list types lose margins when wrapped in another list

Testcase:

<ol>
  <li>
    <dl>
      <dt>Term1</dt>
      <dd>Definition1</dd>
    </dl>
  </li>
</ul>

Codepen Snippet:
http://codepen.io/andreas_pr/pen/qICnF

azorath commented Jul 12, 2013

all list types lose margins when wrapped in another list

Testcase:

<ol>
  <li>
    <dl>
      <dt>Term1</dt>
      <dd>Definition1</dd>
    </dl>
  </li>
</ul>

Codepen Snippet:
http://codepen.io/andreas_pr/pen/qICnF

@robwierzbowski

This comment has been minimized.

Show comment
Hide comment
@robwierzbowski

robwierzbowski Jul 27, 2013

Your codepen is working correctly for me in Firefox 22, OSX 10.8.

screen shot 2013-07-27 at 2 52 58 pm

robwierzbowski commented Jul 27, 2013

Your codepen is working correctly for me in Firefox 22, OSX 10.8.

screen shot 2013-07-27 at 2 52 58 pm

@azorath

This comment has been minimized.

Show comment
Hide comment
@azorath

azorath Jul 28, 2013

Difference between Chrome and Firefox – the red bar (see chrome screenshot) indicates the margin-top of the unsorted list

chrome
firefox

After applying normalize it should be the same.

azorath commented Jul 28, 2013

Difference between Chrome and Firefox – the red bar (see chrome screenshot) indicates the margin-top of the unsorted list

chrome
firefox

After applying normalize it should be the same.

@robwierzbowski

This comment has been minimized.

Show comment
Hide comment
@robwierzbowski

robwierzbowski Jul 28, 2013

Ah, totally. I was looking at the left margins.

robwierzbowski commented Jul 28, 2013

Ah, totally. I was looking at the left margins.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Jan 15, 2014

Owner

This is one of those things that's pretty hard to address with normalize.

You'd need something like:

li > dl,
li > ol,
l> ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

But the specificity of that rule means that if someone building on top of normalize includes a rule like this:

ol {
  margin: 0;
}

Then it won't apply when the ol is nested, whereas it would if the browser defaults hadn't been overridden by normalize.css.

So I think this has to be "wontfix" unless someone can show me a way of doing this without causing problems higher up the chain.

Owner

necolas commented Jan 15, 2014

This is one of those things that's pretty hard to address with normalize.

You'd need something like:

li > dl,
li > ol,
l> ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

But the specificity of that rule means that if someone building on top of normalize includes a rule like this:

ol {
  margin: 0;
}

Then it won't apply when the ol is nested, whereas it would if the browser defaults hadn't been overridden by normalize.css.

So I think this has to be "wontfix" unless someone can show me a way of doing this without causing problems higher up the chain.

@necolas necolas closed this Jan 15, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment