• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5585
  • Last Modified:

Defining the size of the list-style square

Can't seem to find this - and would prefer not to use a graphic.. I wish to increase the size of the bullet in the list css.  Basically I want the "square" attribute to be bigger than the size it shows. I have been unable to locate how to properly do that.
0
Quetysis
Asked:
Quetysis
  • 2
  • 2
2 Solutions
 
GrandSchtroumpfCommented:
The size of the bullet depends on the font size.
The trick is to increase the font-size on the <li> and use a nested element to decrease the font-size of the <li>'s content.  To get the best result, you'll need to play with line-height or negative margins on the <li> to reduce the additional spacing created by the large font.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">

body {
  background: #EEE;
  color: black;
}

ul {
  list-style: square;
}

li {
  font-size: 200%;
}

li span {
  font-size: 50%;
}

</style>
</head>
<body>

<ul>
<li><span>lorem</span></li>
<li><span>ipsum</span></li>
<li><span>dolor</span></li>
</ul>

</body>
</html>
0
 
KennyTMCommented:
>> The size of the bullet depends on the font size.

No it isn't -- At least not for Firefox and IE 6. (I haven't checked the W3C doc yet)

In IE you can use the non-standard property "zoom:" instead, e.g.,

<div id="ul_container"><ul>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul></div>

<style type="text/css">
#ul_container {   zoom: 2; }
ul {   list-style-type: square; }
li { zoom: 0.5; }
</style>
0
 
GrandSchtroumpfCommented:
>>  No it isn't
Yes it is...  well... except in IE6 (the code from my post works fine in FF and Opera).

IE6 is very strange with markers, the size of the marker depends on the text-size (in the 'view' menu) but does not depend on the font-size.  That is completely illogical.

So, for IE6, using the 'zoom' is a possible solution, but i guess the marker size will still depend on the text-size.
0
 
KennyTMCommented:
Strange, the code works in Fx when it is in an independent file, but not in generated content.

Anyway, the code posted by GrandSchtroumpf *works for Firefox*, and I made some mistakes during the test.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now