<ul> -- bullet larger font-size?

HTML & CSS
1

I think you probably can’t do this, but before going the image-route I wanted to ask, is it possible to make just the bullet a larger font-size than the text in the list? I just ran a search, all results were about doing it with an image…

2

Here’s one way you could approach it:


<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
    ul {font-size: 3em; line-height: 0.5em;}
    ul span {font-size: 0.25em; vertical-align: middle;}
</style>
	
</head>

<body>
<ul>
    <li><span>List item</span></li>
    <li><span>List item</span></li>
    <li><span>List item</span></li>
    <li><span>List item</span></li>
</ul>

</body>

</html>
3

An easier way would be to just create an image of larger bullets (that would save the markup from having to have unnecessary markup :).

Though no bullets would display with images off (assuming you set list-style:none on the <ul> to hide the original bullet that gets added) so it’s your call :slight_smile:

4

I’d definitely recommend ralph.m’s method over that.

First of all, I don’t know how you perceive it to be ‘easier’ to use images for this. The few lines of markup/CSS required for ralph.m’s technique will likely result in less code than the CSS required to properly apply and position the images as bullets. That’s not counting the time required to create the image of a bullet.

In addition, the time required for the image’s client/server “handshaking”, image download, CSS download and rendering of your technique would likely be longer than the time required to download and rendering of what you’re calling “unnecessary markup.”

On top of that, you’ve already noted the degradation issues that come along with using an image as a bullet.

I’m not saying you should never use images as bullets. What I am saying is that in this situation it is obviously best the OP goes with the technique provided by ralph.m.

I should note that if the OP happens to be using an anchor on these list items in order to link them somewhere - the span’s could likely be removed altogether and the CSS applied to the anchors. That would then remove the issue of what I’m going to call “necessary markup.”

Cheers

5

Depends on what you call easier :). I find that the image would take seconds to make, and writing a background property thingymajiggy would take seconds as well.

Granted I know my solution isn’t best (I only said it was easiest) :slight_smile:

6

I have removed several posts from this thread as they were of no benefit to the OP and had degraded into personal attacks.

Stay on topic please.

7

I like Ralph M’s approach of the extra nested span, as it takes a quirk (some consider it a bug) in the implementation of line-height and use it to our advantage. The quirk in question can be illustrated quite easily:

Take this example:
<b>HTML:</b>


<div id="lineHeightTest">
	<div class="test1">Test</div>
	<div class="test2">Test</div>
</div>

<b>CSS:</b>


#lineHeightTest {
	font-size:20px;
	line-height:200&#37;;
}

#lineHeightTest div {
	font-size:14px;
	background:#CCC;
}

#lineHeightText .test2 {
	line-height:200%;
	background:#EEE;
}

The second div will be smaller than the first. This is because when line-height is inherited, the CALCULATED value is inherited and not the property value… If your on a 96dpi system at the typical default font size of 16px, and you declare line-height:200%; if all you do is change font-size on a child element, the line-height will remain 32px until you re-declare it. In the above example the first div ends up ith a 40px line-height even though we changed the font-size and even though the line-height is declared in %. (Same applies to EM). USUALLY I say “never trust the default or inherited line-height” because of this - in this case Ralph.m has taken what’s usually a negative and made it a positive.

That said, I would suggest adding inline-block to the span - trips an alignment fix in IE 6. I’d probably also work in even multiples so that the original font-size is preserved… so something like:


ul {
	font-size:2em;
	line-height: 0.7em; /* 140% original font-size */
}

ul span {
	display:inline-block;
	font-size:0.5em;
	vertical-align:middle;
}

That should double the size of the bullets.

The image approach DOES have some merits apart from not needing extra elements to work - the biggest being consistency cross-browser and cross-font renderer. Not all browsers display the same size bullet in the same size font - many of them don’t even use the character from the font to do it. I’d had a lot of clients in the past complain about how Netscape heritage browsers (like FF) and IE don’t display bullets the same even when the font is declared the same - using an image gets around that… BUT

As mentioned you have the problem of images off… But who says that’s a problem? You can use a construct very much like gilder-levin image replacement to just replace the BULLET!


<ul class="test">
	<li>Test<span></span></li>
	<li>Test<span></span></li>
	<li>Test<span></span></li>
	<li>Test<span></span></li>
</ul>



/* assumes UL and LI have margins and paddings nulled */
.test {
	overflow:hidden;
	padding-left:24px;
	line-height:1.4em;
}

.test li {
	position:relative;
}

.test span {
	position:absolute;
	top:0;
	left:-24px;
	width:24px;
	height:1.4em; /* == line-height */
	background:url(images/newBullet.png) center left no-repeat;
}

If your image is not transparent it should show over the bullet. Solves the images off dilemna. Of course when CSS3 becomes real world usable, we can ditch the span. The overflow:hidden is there so that if the system metric (default font size) pushes the bullet width larger than our image it will get chopped off on the left (in theory)…