CODEWITHSUNDEEP
cssbrowserfontscross-browserhtml-rendering
Philip Daubmeier
Philip Daubmeier

Reputation: 14934

Is a bulleted list item always indented exactly 1.8em?

I made a css-only dropdown menu. The requirement was to have a horizontal bar of items that can each drop down a vertical menu. Furthermore, those items should not drop a tertiary menu, but instead just show bulleted lists. My html has three nested ul and the menu is working perfectly in all modern browsers. It looks like this:

original

However, I did not like how the darker box behind the link is starting right of the bullet and does not stretch over the whole menu width, so I played around a bit and finally came to this tweak:

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

Now the bulleted menu item looks just like I wanted:

working

And due to the nature of em beeing relative to the font size, it works independently of the font size, like shown with a larger font size here:

working (larger font)

I tested this on Internet Explorer 8+9+10(developer preview), Firefox 3+7, latest Chrome, Opera and Safari and it works like a charm.

However, I just dont understand why it is exactly 1.8em that does the job. How come every browser indents the bullet items exactly this far? I searched the internet on this topic, but I did not find anything helpful. Can I be sure this works on future browsers? Are those 1.8em specified in the HTML standard?

Thanks in advance for any hint!

Edit:

To DisgruntledGoat's answer: It would not work if I used 1em/-1em or 20px/-20px. With this style:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

I get this (obviously not scaling with the font size) result for different font sizes:

pixel based

Similarly, 1em/-1em is also off and looks like on the right in the picture above but scaling with the font size. It still looks like 1.8em is the magic distance for some reason...

Upvotes: 7

Views: 2061

Answers (4)

Taryn East
Taryn East

Reputation: 27747

Based on many years of inconsistent browsers - I'd say you can't trust them to ever be consistent. The best option is to forcibly control it yourself.

You can use that by simultaneously setting the padding-left and margin-left of an li. eg:

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

Apparently some (mainly older) browsers use padding and some margin - so be sure to set both.

Upvotes: 4

Ryan Kinal
Ryan Kinal

Reputation: 17732

Given your code, you've set up your ul such that it has no margin or padding. However, you've set up your li's such that they have margin-left: 1.8em:

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

And there it is.

Upvotes: 5

DisgruntledGoat
DisgruntledGoat

Reputation: 72510

To answer the question and your comment: your solution works because you negate the padding with the exact same size margin. But the spacing to the left of the list is larger with the larger font size. You would get the same result with 1em padding and -1em margin or 20px and -20px.

As I mentioned in the comment, the actual default padding for lists is 40px. To make things even more confusing, on checking the user agent stylesheets (in Chrome Dev Tool and Firebug for Firefox) they report unique CSS properties: -webkit-padding-start or -moz-padding-start respectively.

I assume that these special properties are used in place of regular padding due to lists being a special case in HTML - they have hanging bullets/numbers that don't count in the padding.

Upvotes: 2

user661497
user661497

Reputation:

You should definitely do a CSS reset and then set the properties the way you need them. Never trust browsers to be consistent. It adds a bit of coding but at the same time future proofs your code.

Upvotes: 4

Related Questions