SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    <ul> -- bullet larger font-size?

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Here's one way you could approach it:

    Code:
    <!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. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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
    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
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,546
    Mentioned
    956 Post(s)
    Tagged
    14 Thread(s)
    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. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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>
    Code:
    <div id="lineHeightTest">
    	<div class="test1">Test</div>
    	<div class="test2">Test</div>
    </div>
    <b>CSS/b>
    Code:
    #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:

    Code:
    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!

    Code:
    <ul class="test">
    	<li>Test<span></span></li>
    	<li>Test<span></span></li>
    	<li>Test<span></span></li>
    	<li>Test<span></span></li>
    </ul>
    Code:
    /* 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)...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •