Re: Center one span inside another

#1

MrBaseball34 wrote:

Quote:

Any tips on doing something like this?

Don't use . Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

--
Mark.
http://tranchant.plus.com/

#2

Mark Tranchant wrote:

Quote:

Positioning is for block elements

Nope: http://www.w3.org/TR/CSS21/visuren.h...opdef-position

--
Spartanicus

#3

On Tue, 19 Oct 2004 08:16:44 +0100, Mark Tranchant
 wrote:

Quote:

MrBaseball34 wrote:

Any tips on doing something like this?

Don't use . Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

Well, more accurately, large-scale positioning is 'easier' with block.

Mr Baseball should use div here, not span.

#4

Mark Tranchant wrote

Quote:

MrBaseball34 wrote:

Any tips on doing something like this?

Don't use . Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

It doesn't work for DIV's either.

#5

In article <opsf4he7fk6v6656 (AT) news (DOT) individual.net>, neal413 (AT) yahoo (DOT) com
says...

Quote:

On Tue, 19 Oct 2004 08:16:44 +0100, Mark Tranchant
mark (AT) tranchant (DOT) plus.com> wrote:

MrBaseball34 wrote:

Any tips on doing something like this?

Don't use . Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

Well, more accurately, large-scale positioning is 'easier' with block.

Mr Baseball should use div here, not span.

How 'bout an example as I haven't been able to get div to
work either.

#6

On Tue, 19 Oct 2004 11:34:03 -0500, Mr.Clean <mrclean@p&g.com> wrote:

Quote:

Mr Baseball should use div here, not span.

How 'bout an example as I haven't been able to get div to
work either.

I've seen a site which went into it, but I can't turn it up at the
moment...

#7

It is the line-height property that makes it work.



Panel

#8

It is the line-height property that makes it work.



Panel

#9

in comp.infosystems.www.authoring.stylesheets, Mr.Clean wrote:

Quote:

It is the line-height property that makes it work.
Maybe. Unless someone uses bigger than 53px font. Not impossible...

If possible, use em unit.

Quote:

span style=

inline styles are not good idea.

Quote:

"text-align: center;

Does nothing, as it only aplies to block elements.

Quote:

border:thin inset;

I really think it is ugly to have bordered multiline span, so hopefully
you don't have much text in it.

Quote:

height:53px;
width:185px;

Neither should do anything, and don't on modern browsers or IE6 in
standards mode. Why aren't you using div instead of span.

Quote:

background-color:#F9DFB2;"

You forgot to use color with your background color.

Quote:

span style="font-family:'MS Sans Serif';

That is bitmap font, at least in my systems. So user might get ugly font
if he overrides your size, which he most likely do.

Quote:

font-size:8px;

Too small and using px unit is bad when setting font. In my version of MS
Sans Serif, there is no 8px version, I think that yours haven't have that
either - so you are actually seeing 8pt version which size 11px. (easily
tested, remove font-family rule)

If users font is true type or similar (very likely if he don't have MS
Sans Serif, which is about 99% certain if he is not using MS OS), he
don't get 8pt font like you, but he will get 8px font, and that is not
readable on any resolution, unless special fonts are used.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

#10

In article <MPG.1c15b27643f6f12798a1ee (AT) news (DOT) individual.net>,
lauri (AT) raittila (DOT) cjb.net says...

Quote:

in comp.infosystems.www.authoring.stylesheets, Mr.Clean wrote:
It is the line-height property that makes it work.
Maybe. Unless someone uses bigger than 53px font. Not impossible...

If possible, use em unit.

span style=

inline styles are not good idea.

"text-align: center;

Does nothing, as it only aplies to block elements.

border:thin inset;

I really think it is ugly to have bordered multiline span, so hopefully
you don't have much text in it.

height:53px;
width:185px;

Neither should do anything, and don't on modern browsers or IE6 in
standards mode. Why aren't you using div instead of span.

background-color:#F9DFB2;"

You forgot to use color with your background color.

span style="font-family:'MS Sans Serif';

That is bitmap font, at least in my systems. So user might get ugly font
if he overrides your size, which he most likely do.

font-size:8px;

Too small and using px unit is bad when setting font. In my version of MS
Sans Serif, there is no 8px version, I think that yours haven't have that
either - so you are actually seeing 8pt version which size 11px. (easily
tested, remove font-family rule)

If users font is true type or similar (very likely if he don't have MS
Sans Serif, which is about 99% certain if he is not using MS OS), he
don't get 8pt font like you, but he will get 8px font, and that is not
readable on any resolution, unless special fonts are used.

If you'd followed the entire thread, you would have know that I was
working on producing an HTML form that mimics a form from my Delphi
application. Essentially I am creating a DFM (Delphi Form File) to HMTL
converter. I want the HTML to match the Delphi form as close as
possible. I don't want to screw with em's and funky placements. I use
the measurements off the form itself to dynamically create the CSS from
the DFM file.

So far, I've gotten pretty good results.

The "ugly...bordered multiline span" is the same as a GroupBox control
in a Windows application. This control can is a container for radio
buttons or checkboxes but other controls can be placed inside it as
well, in case you are ignorant of Windows application programming.