• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5343
  • 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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone 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