Text outside of div visible

[Rudi Hausmann]

Hi!

I want to make a text that goes out of a div under another div visible.
This example illustrates it:

<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">
<b>Hello</b>
</div>
<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">&nbsp;</div>

I want to see the whole "Hello" including both border lines.

Currently I just see something like: "H| |llo"

Any idea how to achieve that?

Best regards,

Rudi

[Ben C]

On 2007-04-17, Rudi Hausmann <ru*****@nospam.comwrote:

Hi!

I want to make a text that goes out of a div under another div visible.
This example illustrates it:

<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">
<b>Hello</b>
</div>
<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">&nbsp;</div>

I want to see the whole "Hello" including both border lines.

Currently I just see something like: "H| |llo"

Any idea how to achieve that?

Change

<b>Hello</b>

to

<b style="position: relative; z-index: 1">Hello</b>

[Jukka K. Korpela]

Scripsit Rudi Hausmann:

I want to make a text that goes out of a div under another div
visible.

That's about styling, not HTML. I'm not moving the discussion to
c.i.w.a.stylesheets, though, since it's not clear at all what you really
want.

This example illustrates it:

<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">
<b>Hello</b>
</div>
<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">&nbsp;</div>

Not really. You are not saying anything about any meaning or content, which
would be HTML related, and you are not describing the desired visual
appearance either. You just give some hints. The code works differently in
Quirks Mode vs. Standards Mode - is that what you want? Which mode do your
pages trigger?

I want to see the whole "Hello" including both border lines.

That's not a very exact description, and it is not consistent with your
actual code. It sounds like you might want the second <divto have
transparent background, as it would have by default - but you're explicitly
setting it to a specific color.

Currently I just see something like: "H| |llo"

Sounds like Standards Mode. In Quirks Mode on IE 7, I see (very roughly
speaking)
"Hello| |". Normally you should author new pages to trigger Standards Mode,
but Quirks Mode gives an idea of what might happen on IE 5, which isn't used
much but isn't quite ignorable either.

In Standards Mode, the appearance naturally depends on the font size. If I
increase the size, different parts of the word "Hello" are masked out, as
expected.

Why don't you describe a real-life use case and illustrate it with a URL?
Preferably as an HTML document that works without CSS, too. Then you can
explain how you would like it to be styled when possible.

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

[Rudi Hausmann]

Ben C wrote:

On 2007-04-17, Rudi Hausmann <ru*****@nospam.comwrote:

>Hi!

I want to make a text that goes out of a div under another div visible.
This example illustrates it:

<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">
<b>Hello</b>
</div>
<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">&nbsp;</div>

I want to see the whole "Hello" including both border lines.

Currently I just see something like: "H| |llo"

Any idea how to achieve that?

Change

<b>Hello</b>

to

<b style="position: relative; z-index: 1">Hello</b>

Thanks. That worked exactly as needed.

[Rudi Hausmann]

Jukka K. Korpela wrote:

Scripsit Rudi Hausmann:

>I want to make a text that goes out of a div under another div
visible.

That's about styling, not HTML. I'm not moving the discussion to
c.i.w.a.stylesheets, though, since it's not clear at all what you really
want.

>This example illustrates it:

<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">
<b>Hello</b>
</div>
<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">&nbsp;</div>

Not really. You are not saying anything about any meaning or content,
which would be HTML related, and you are not describing the desired
visual appearance either. You just give some hints. The code works
differently in Quirks Mode vs. Standards Mode - is that what you want?
Which mode do your pages trigger?

>I want to see the whole "Hello" including both border lines.

That's not a very exact description, and it is not consistent with your
actual code. It sounds like you might want the second <divto have
transparent background, as it would have by default - but you're
explicitly setting it to a specific color.

>Currently I just see something like: "H| |llo"

Sounds like Standards Mode. In Quirks Mode on IE 7, I see (very roughly
speaking)
"Hello| |". Normally you should author new pages to trigger Standards
Mode, but Quirks Mode gives an idea of what might happen on IE 5, which
isn't used much but isn't quite ignorable either.

In Standards Mode, the appearance naturally depends on the font size. If
I increase the size, different parts of the word "Hello" are masked out,
as expected.

Why don't you describe a real-life use case and illustrate it with a
URL? Preferably as an HTML document that works without CSS, too. Then
you can explain how you would like it to be styled when possible.

Thanks for your input! Of course I trigger the Standard Mode. And next
time I gonna put such questions into c.i.w.a.stylesheets.

My use-case (test use case, but not real life use case) was to make a
text which comes out of a div into another div visible. Ben's solution
to change the z-index of the text worked fine. (Your mentioned solution
to leave away the background color would work too.)