2 replies [Last post]
lwc
lwc's picture
Offline
newbie
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2010-04-11
Posts: 2
Points: 3

When I say bullet, I mean something like the ascii symbol of bullet. The problem is it creates way too much background. I'd like as minimal background as possible. Can it be done?

<style>
.test {
	background-color: black;
	color: lightgreen;
	font-size: 2 em;
}
</style>
 
<span class="test">&bull;</span>

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The space above and below the

The space above and below the bullet is the rest of the line. Reduce the line-height to reduce that space. To avoid the bullet being outside the reduced line-height you might need to play with vertical-align.

Alternatively, you could look through all the unicode characters to find one that suits.✪ ⦁⦾⦿

lwc
lwc's picture
Offline
newbie
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2010-04-11
Posts: 2
Points: 3

Those Unicode symbols don't

Those Unicode symbols don't work in IE6. But no symbol - whether Ascii or Unicode - allows defining colors for both its inner symbol and outer symbol (i.e. "internal background") without also changing the "external" background.

Anyway, tried many things but non worked. What should I put in X and Y?

<style>
.test {
	line-height:X;
	vertical-align:Y;
	background-color: black;
	color: lightgreen;
	font-size: 2 em;
}
</style>
 
<span class="test">&bull;</span>

And is there a chance to support an extra word:

Status: <span class="test">&bull;</span>

Somehow it works better inside a table:

<style>
.test {
	line-height: 30%;
	vertical-align:?;
	background-color: black;
	color: lightgreen;
	font-size: 2 em;
}
</style>
 
<table><tr><td>Status:</td>
<td class="test">&bull;</td>
</table>

But:
1) Will 30% always equal minimal background + middle vertical alignment?
2) It's a table...