PDA

View Full Version : Space between bullet and text in li tag (unordered list)



knkk
Aug 18th, 2007, 04:28 PM
Hi,

I need to be able to reduce the default space between a bullet and the text that follows it. After searching all and sundry, I came up with the following CSS, that unfortunately does not work in FireFox:

My UL tag looks like this:


<UL STYLE=\"padding: 0; margin: 2 0 0 0\">

My CSS looks like this:


ul li {
list-style-type: none;
padding: 2 0 0 0;
_padding: 2 0 0 10;
#padding: 2 0 0 10;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px 0 0;
}

(All those paddings were to get additional left margins in IE because I was able to get the bullets there, and so the text needs to move right. Only IE reads those rogue characters - _ for IE 6 and # for IE 7.)

Does anyone know how to get this to work in FireFox? Or any alternate solution? Thank you very much for your time!

srule_
Aug 18th, 2007, 07:53 PM
_padding: 2 0 0 10;
#padding: 2 0 0 10;


This is not correct. Is it some sort of hack cuz i have never seen anyone do this.... Usualy when stuff does not display in ie the same as firefox it is because of bad code. if not u can use the ie hack
*html ul li {...;} you can also make a style sheet that will only be viewed in IE.



background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px 0 0;


this is correct, simple play around with the positioning part of it (the 0 7px 0 0)

however, yo dont need all those zeros. Simple set a position for how man px from the top, and then a postion for how many px from the left. (7px 0)

knkk
Aug 19th, 2007, 07:52 AM
srule_, you were right - in fact, a little less emphatic than you needed to be, I guess :). it was the two zeroes at the end that were causing the problem.

yes, turns out that the mistake was in the two extra zeros at the end that I put in my background (image) definition. This is my current stype definition, and it works for both IE and FF:



ul li {
list-style-type: none;
padding: 2 0 0 10;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px; /*originally this was 0 7px 0 0, which was the mistake*/
}


Thanks a bunch!

koyama
Aug 19th, 2007, 11:21 AM
ul li {
list-style-type: none;
padding: 2 0 0 10;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px; /*originally this was 0 7px 0 0, which was the mistake*/
}
Not related to your issue, but remember to specify the unit for length values. (Only for zero length is the unit not required.)

The only reason why it works (I presume it works) must be because your page is being rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html) which is not too good. It may give you problems later on. In quirks mode the pixel unit is implied when the length unit is left out.

I figure that you have omitted the document type declaration (or using a partial document type declaration). To avoid quirks mode you may use this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Then correct the above to this:

ul li {
list-style-type: none;
padding: 2px 0 0 10px;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px;
}

Jutlander
Aug 19th, 2007, 06:18 PM
_padding: 2 0 0 10;
#padding: 2 0 0 10;This is not correct. Is it some sort of hack cuz i have never seen anyone do this....

The _property is a hack, yes. It is only recognised by IE 5 and 6, but is invalid CSS. I suggest using the star hack instead, because it is valid:


* html

srule_
Aug 19th, 2007, 08:21 PM
aww, cool never knew about that hack, and will never be using but i still think it;s kool that i learnt somthing new :thumbsup: haha

knkk
Aug 20th, 2007, 06:27 AM
Koyama, thanks for the tip. Yes, I am indeed coding in quirks mode (I had no clue I was), and I have realized it is not very safe. I am correcting all my style definitions. And Jutlander, thanks for that - I am starting to use the * html hack.

srule_, I hope you don't need to :).

srule_
Aug 20th, 2007, 07:09 AM
just cuz there is a hack does not mean u should use it. Try to avoid it as much as possible. Also IE7 does not read the *html hack so don't go crazy with it thinking it will solve all your ie problems :thumbsup:

VIPStephan
Aug 20th, 2007, 10:56 AM
And srule, just so you know: Itís not *html but * html (with whitespace between the asterisk and html). Basically what IE 6 seems to think is that there is a secret hidden element which is the parent of the html element and we address this element with the universal selector. This is also the reason why this hack is kinda valid CSS.

knkk
Aug 20th, 2007, 06:24 PM
just cuz there is a hack does not mean u should use it. Try to avoid it as much as possible. Also IE7 does not read the *html hack so don't go crazy with it thinking it will solve all your ie problems :thumbsup:

Awww, so how do we manage for IE7? I am using the * html in a couple of places...

Arbitrator
Aug 20th, 2007, 08:58 PM
Awww, so how do we manage for IE7? I am using the * html in a couple of places...You can serve code specific to Internet Explorer via conditional comments. [1] Below is one example that serves an embedded style sheet only to Internet Explorer 7 and above.


<!--[if gte IE 7]>
<style type="text/css" media="all">
/* CSS rules */
</style>
<![endif]-->


http://www.quirksmode.org/css/condcom.html

knkk
Aug 22nd, 2007, 06:31 AM
That was pretty helpful. However, would you know if there is some way we could do this in a style sheet (i. e. an attached .css file)?

Arbitrator
Aug 22nd, 2007, 08:22 AM
However, would you know if there is some way we could do this in a style sheet (i. e. an attached .css file)?Thereís no such thing as a conditional comment (CC) for CSS. The closest that you can get is by using CCs in the HTML and having two style sheets or by using CSS exploits. Iíd avoid use of CSS exploits, but if you decide to use them anyway, you can exploit a certain bug to your advantage.


html { background: white; ?background: red; _background: white; }The first declaration is accepted by all browsers. The second is accepted by Internet Explorer and overrides the first while being ignored by other browsers. The third is accepted by versions of Internet Explorer prior to 7, overrides the second in those browsers, and, again, is ignored by all of the other browsers. Thus, only Internet Explorer 7 should see red while everyone else, including prior versions of Internet Explorer, see white.

You can use characters other than the question mark as shown in the article Internet Explorer 7 CSS hacks [1].


http://annevankesteren.nl/2007/02/ie7-css-hacks

knkk
Aug 26th, 2007, 02:28 PM
That was quite helpful - thanks, Arbitrator!