?

Log in

No account? Create an account

Previous Entry | Next Entry

This is a little trick for overlaying text in LJ comments and messages (depending on the style used!).


Back
Front



It's fairly simple to do, too...

The HTML I used uses inline CSS to manage the layout.

<lj-raw>
<DIV style="line-height:0px">
<P>
<BR>
<FONT STYLE="color: red; font-family: 'Tahoma', sans-serif; font-size: 42pt">Back</FONT>
<BR>
<FONT STYLE="color: blue; font-family: 'Tahoma', sans-serif; font-size: 78pt">Front</FONT>
</DIV>
<BR>
</P>
</lj-raw>


It helps to put a few lines of padding white space around the code to make sure you don't get nasty layout effects...

(Update 1: Probably best if you look at this in a comment view to see the full effect.)

(Update 2: The LJ autoformat system mangled the DIV style I was using. So I have used <lj-raw> tags to fix it. See the code sample for the latest changes...)

Comments

( 18 comments — Leave a comment )
the_magician
Jun. 25th, 2003 09:20 am (UTC)
Er, what's it supposed to show?
Here on IE5.5 it shows the word "back" in red at one size, leaves a blank about the same size below, and then shows the word "Front" bigger in blue further down the page ... that's not a particularly neat trick ...
the_magician
Jun. 25th, 2003 09:23 am (UTC)
oh
Seems to be working now, did you fix it or was it something transitory in my browser?
sbisson
Jun. 25th, 2003 09:24 am (UTC)
Re: oh
It depends on the style used in a main friends view. It will look fine in a standard comment page...
sbisson
Jun. 25th, 2003 09:35 am (UTC)
Re: oh
So I have used <lj-raw> tags to fix it...
kevinwmoor
Jun. 25th, 2003 09:20 am (UTC)
Are you missing some code? I just have a red "back" above a blue "front".
sbisson
Jun. 25th, 2003 09:23 am (UTC)
It's a CSS problem - it'll look fine in a comments page but not on a main view. I'm looking at what I need to be overiding...
sbisson
Jun. 25th, 2003 09:37 am (UTC)
LJ's autoformat is overriding the DIV

So I have used <lj-raw> tags to fix it...
kevinwmoor
Jun. 25th, 2003 09:23 am (UTC)
Well, guess what - it only works when I log in!
kevinwmoor
Jun. 25th, 2003 09:25 am (UTC)
That is, now I've logged in, it works on my friends page.
akicif
Jun. 25th, 2003 09:28 am (UTC)
Sort of....
Under Windows XP:

IE6, Opera7.11 - the <DIV> is ignored,
NN6.2 - the <CENTER> is ignored,
Moz1.3 - just right.

Sorry mate, barely qualifies as a trick of minor neatness.
sbisson
Jun. 25th, 2003 09:29 am (UTC)
Re: Sort of....
Ah well. Trust me to throw IE away :-)

It works in Firebird, though!
sbisson
Jun. 25th, 2003 09:30 am (UTC)
Re: Sort of....
And it's the DIV that's the key.. Which is annoying... But then that's CSS hackery for you!

I killed the CENTERs now...
kevinwmoor
Jun. 25th, 2003 09:38 am (UTC)
Re: Sort of....
I take it it's the very short line height that is the key? Did you change it from 1px to 0?
sbisson
Jun. 25th, 2003 09:40 am (UTC)
Re: Sort of....
Yes. It doesn't really matter what it is, I have chaged it to 0 for now, though!
sbisson
Jun. 25th, 2003 09:37 am (UTC)
Re: Sort of....
I realised what the problem was - the LJ style autoformats are overriding the DIV.

So I have used <lj-raw> tags to fix it...
akicif
Jun. 25th, 2003 09:41 am (UTC)
Re: Sort of....
Maybe worse - it's doing the overlap thing now, but:

IE6, Opera - overlapping before
NN6.2 - overlapping lines before and after
Moz1.3 - overlapping lines after

Did you change the line-height to 0 this time?

Oh, and logging in and out again make no difference from here.
sbisson
Jun. 25th, 2003 09:46 am (UTC)
Re: Sort of....
Hmm. Works in my view in Firebird 0.6 16th June nightly, Mozilla 1.3RC2 and IE6.

Am wondering if your friends view is doing something else.

(Checks)

Seems OK when I look at it in your friends view...

(Damn CSS incompatibilities!)

pickledginger
Jun. 25th, 2003 12:23 pm (UTC)
Cute - thanks!
(working fine in IE now ...)
( 18 comments — Leave a comment )