Line and text baseline alignment

[Christophe]

Hello,

I try to align the baseline of my title with a white line using CSS. The
code does work with Safari Mac, Explorer Mac and PC, Firefox PC. But on
Firefox 1.5 Mac and Opera 6.03, the text shifts from the line. I don't
understand where these pixels come from (all units are in pixels):

<div style="color: #ffffff; font-size: 22px; font-weight: bold; position:
absolute; top: 188px; z-index: default;
margin-top:2px">Presentation</div><div style="position: absolute; z-index:
default; top: 210px; padding:0; width: 100%; border-style: solid none none;
border-width: 1px 0 0 0; border-color: #fff;"></div>

Thanks for any help,

Christophe

[Jukka K. Korpela]

Christophe <cm****@hotmail.comscripsit:

I try to align the baseline of my title with a white line using CSS.

This group is about HTML, not CSS.

<div style="color: #ffffff; font-size: 22px; font-weight: bold;
position: absolute; top: 188px; z-index: default;
margin-top:2px">Presentation</div><div style="position: absolute;
z-index: default; top: 210px; padding:0; width: 100%; border-style:
solid none none; border-width: 1px 0 0 0; border-color: #fff;"></div>

I would suggest that you learn HTML before considering stylistic issues.
Apparently the intention is to write a heading of some kind; in that case,
use a suitable heading element, such as <h1or <h2>. Later, consider how to
style it.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[PTM]

"Jukka K. Korpela" <jk******@cs.tut.fiwrote in message
news:_F*******************@reader1.news.jippii.net ...

Christophe <cm****@hotmail.comscripsit:

>I try to align the baseline of my title with a white line using CSS.

This group is about HTML, not CSS.

><div style="color: #ffffff; font-size: 22px; font-weight: bold;
position: absolute; top: 188px; z-index: default;
margin-top:2px">Presentation</div><div style="position: absolute;
z-index: default; top: 210px; padding:0; width: 100%; border-style:
solid none none; border-width: 1px 0 0 0; border-color: #fff;"></div>

I would suggest that you learn HTML before considering stylistic issues.
Apparently the intention is to write a heading of some kind; in that case,
use a suitable heading element, such as <h1or <h2>. Later, consider how
to style it.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

you could also try merging your two divs into one, as below:
<div style='color:#fff; font-size:22px; font-weight:bold; position:absolute;
top:188px; margin-top:2px; border-bottom:1px solid #000; width:100%;
padding-bottom:0px:'>Presentation</div>

hope this helps.

Phil

[Christophe]

Le 25.7.2006 23:54, dans vq******************@newsfe1-gui.ntli.net, «*PTM*»
<p.********@vodafone.neta écrit*:

you could also try merging your two divs into one, as below:
<div style='color:#fff; font-size:22px; font-weight:bold; position:absolute;
top:188px; margin-top:2px; border-bottom:1px solid #000; width:100%;
padding-bottom:0px:'>Presentation</div>

Thanks Phil for taking the time to help me and for your nice answer. I will
try your solution.

Christophe

[Christophe]

Le 25.7.2006 23:03, dans _F*******************@reader1.news.jippii.net,
«*Jukka K. Korpela*» <jk******@cs.tut.fia écrit*:

>I try to align the baseline of my title with a white line using CSS.

This group is about HTML, not CSS.

Sorry, I didn't think it is so strange to ask questions about CSS in a HTML
USENET group.

>

><div style="color: #ffffff; font-size: 22px; font-weight: bold;
position: absolute; top: 188px; z-index: default;
margin-top:2px">Presentation</div><div style="position: absolute;
z-index: default; top: 210px; padding:0; width: 100%; border-style:
solid none none; border-width: 1px 0 0 0; border-color: #fff;"></div>

I would suggest that you learn HTML before considering stylistic issues.
Apparently the intention is to write a heading of some kind; in that case,
use a suitable heading element, such as <h1or <h2>. Later, consider how to
style it.

I'm taking your advice. And sorry not to be as smart as you.

Christophe

[PTM]

"Christophe" <cm****@hotmail.comwrote in message
news:C0******************@hotmail.com...

>
Le 25.7.2006 23:54, dans vq******************@newsfe1-gui.ntli.net, «
PTM »
<p.********@vodafone.neta écrit :

>you could also try merging your two divs into one, as below:
<div style='color:#fff; font-size:22px; font-weight:bold;
position:absolute;
top:188px; margin-top:2px; border-bottom:1px solid #000; width:100%;
padding-bottom:0px:'>Presentation</div>

Thanks Phil for taking the time to help me and for your nice answer. I
will
try your solution.

Christophe

my pleasure, any time