CSS bullet image that works???

[Nikolaos Giannopoulos]

I have a paragraph and simply want a bullet image to appear at the start
of the paragraph text. I tried the following html:

<p><span class="dot"></span>some text</p>
as seen here: http://solmar.ca/temp8/test1.html

Observed: IE5 and Moz 1.3 works - IE 6.0 and Opera 6.05 does not work

I then assumed that maybe because there is nothing in the span that this
problem appears for IE6 and Opera 6.05, so I tried a kludge as an
expirement:

<p><span class="dot">&nb sp;</span>some text</p>
as seen here: http://solmar.ca/temp8/test2.html

Observed: IE5, Moz 1.3, IE 6.0 works - Opera 6.05 does not work

Any idea what it would take for this to work in Opera 6.05 and if
possible to work without the &nbsp; in IE6?

<img src="img/dot.gif" width="9" height="9" alt="" class="dot">
(i.e. HTML only) works on all browsers but is not a good idea for
multiple reasons.

BTW I also tried lists but found that on some browsers bullet images
where positioned inside the text block and on others they were
positioned outside the text block.

Thanks,

--Nikolaos

P.S. All observations made on Win NT 4 Sp6a

[Kris]

In article <PB************ ********@magma. ca>,
Nikolaos Giannopoulos <ni******@solma r.ca> wrote:

I have a paragraph and simply want a bullet image to appear at the start
of the paragraph text.

p { display: list-item; list-style: bull inside; }

--
Kris
kr*******@xs4al l.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Nikolaos Giannopoulos]

Kris wrote:

In article <PB************ ********@magma. ca>,
Nikolaos Giannopoulos <ni******@solma r.ca> wrote:

p { display: list-item; list-style: bull inside; }

I tried this and it works fine in Moz 1.3 and Opera 6.05 however it
doesn't work in IE5 at all (I can live with this) all on NT4.

Great - except....

The real problem I found was with IE 6 - even with using unordered lists
I would get something like:

Osome text
and wrapped text like so

but what I want and got from Mozilla and Opera was:

O some text
and wrapped text like so

Do you know how to get IE6 win to behave properly (yes, I know - it
sounds like an oxymoron ;-)?

Thanks again,

--Nikolaos

[Kris]

In article <eK************ ********@magma. ca>,
Nikolaos Giannopoulos <ni******@solma r.ca> wrote:

p { display: list-item; list-style: bull inside; }

I tried this and it works fine in Moz 1.3 and Opera 6.05 however it
doesn't work in IE5 at all (I can live with this) all on NT4.

Great - except....

The real problem I found was with IE 6 - even with using unordered lists
I would get something like:

Osome text
and wrapped text like so

but what I want and got from Mozilla and Opera was:

O some text
and wrapped text like so

Do you know how to get IE6 win to behave properly (yes, I know - it
sounds like an oxymoron ;-)?

No idea. Play with padding/margin perhaps? Maybe those values are
different by default (pretty often are), whcih would mean no browser is
at fault.

But maybe IE6 is wrong. I had not yet to use this particular CSS, so I
have no exp with how it behaves in IE6. Furthermore, I don't even have
IE.

--
Kris
kr*******@xs4al l.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Salagir]

On Sun, 28 Sep 2003 12:02:18 -0400, in comp.infosystem s.www.authoring.stylesheets,
Nikolaos Giannopoulos wrote:

I have a paragraph and simply want a bullet image to appear at the start
of the paragraph text. I tried the following html:
<p><span class="dot"></span>some text</p>
as seen here: http://solmar.ca/temp8/test1.html
Observed: IE5 and Moz 1.3 works - IE 6.0 and Opera 6.05 does not work

What about saying the span but be displayed like a div, so:

span.dot {display: block; float: left; [and all the others things] }

--
++++++++ Zelda, Dragon Ball, Mana and my (art)work at www.salagir.com ++++++++

[Nikolaos Giannopoulos]

Salagir wrote:

On Sun, 28 Sep 2003 12:02:18 -0400, in comp.infosystem s.www.authoring.stylesheets,
Nikolaos Giannopoulos wrote:

What about saying the span but be displayed like a div, so:

span.dot {display: block; float: left; [and all the others things] }

I tried:

..dot {float: left; padding-right: 10px;
background: url(/img/dot.gif) 0% 50% no-repeat;
width: 9px; height: 9px}

and on IE5 and IE6 it works fine. On Mozilla 1.3 and Opera 6.05 the 50%
has no effect i.e. the bullet is not centered vertically with the first
line of text, rather it is in the upper corner.

I imagine that Mozilla and Opera are doing things right as the
background is being floated and at that point horizontal and vertical
offsets don't make any sense.

I could add some whitespace to the top of the bullet image and eliminate
any CSS vertical positioning except that this won't work well with
different font sizes.

Any other thoughts? Anyone?

Thanks,

--Nikolaos

[Nikolaos Giannopoulos]

Kris wrote:

In article <eK************ ********@magma. ca>,
Nikolaos Giannopoulos <ni******@solma r.ca> wrote:

p { display: list-item; list-style: bull inside; }
Great - except....

The real problem I found was with IE 6 - even with using unordered lists

No idea. Play with padding/margin perhaps? Maybe those values are
different by default (pretty often are), whcih would mean no browser is
at fault.

Doesn't make a difference - looks like IE6 is to blame (so far).

But maybe IE6 is wrong. I had not yet to use this particular CSS, so I
have no exp with how it behaves in IE6. Furthermore, I don't even have
IE.

I do like your suggestion as it means no empty span tags but can't seem
to get IE6 to at the very least align to the left margin and provide
even a pixel between the image and the text.

Does anyone else have any ideas?

Thanks again Kris.

--Nikolaos

[SantaKlauss]

Nikolaos Giannopoulos wrote:

[..cut...]

| Does anyone else have any ideas?

Hi Nikolaos,
if only ie supported :before pseudo-class and content property, in my opinion
this would be a good solution because no extra markup would be needed.
A thing as the following would suffice in browsers gecko-based and in Opera7:

p:before{ content: url("dot.gif") }

But it will not work in ie...
So, here's the solution I found. Tested in ie5.5, Opera7 and Mozilla 1.4.

***css***

p span.dot{
padding-left: 9px;
background: url("dot.gif") no-repeat center left
}

p>span.dot{ /*style rule for not-ie browsers*/
height: 0;
padding-bottom: 5px
}

***html***

<p>
<span class="dot">&nb sp;</span>
This is only a test for the emergency broadcast system.
</p>

Hope it helps.
Greetings,
SantaKlauss