Hanging Indents with CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Hanging Indents with CSS

cross-browser woes

tedster

3:46 pm on Dec 12, 2002 (gmt 0)

I'm working on a site where hanging indents look just great, especially with the first phrase of the paragraph in bold and a different color - as a "run in head".

But here's what I've run into -- in Explorer, text-indent:-20px; just chops off the part of the first sentence that is supposed to hang. It looks good in Opera.

So I added padding-left:20px; (or margin-left) and Explorer looks great. But then Opera looses the hanging indent and is back to squared off paragraphs. Obviously if I MUST choose, I'll take Explorer for the effect, given its market penetration.

But I don't want to choose. Has anyone found a good cross-browser way to create this effect?

Nick_W

4:34 pm on Dec 12, 2002 (gmt 0)

Hi Tedster, do you mean like this:


Hanging text 
  liks this?


  Hanging text 
like this?

Nick

tedster

9:19 am on Dec 13, 2002 (gmt 0)

First one, Nick.

It's "supposed to be" easy with a negative text-indent, or so says the O'Reilly CSS book.

Nick_W

9:57 am on Dec 13, 2002 (gmt 0)

Well, I've never done it so I certainly can't help there but, I have a possible workaround for you...


[pre]
<dl>
 <dt>Some Text</dt>
 <dd>Rest of text here...</dd>
</dl>
[/pre]

That will give you the effect you want I think...

Sorry it's not quite what you were after ;) Maybe the other CSS regulars have something to add?

Nick

tedster

10:30 am on Dec 13, 2002 (gmt 0)

Yes - I never thought of definitions. It's a bit kludgy, and I am fond of having "true" paragraphs. But any port in a storm, right?

I would have to test pretty well. The last time I used definition lists the support for them was also inconsistent cross-browser. I don't think the W3c has any strong user agent guidelines for rendering them.

I will still hold out hope for some insight that I'm missing.

SuzyUK

10:51 am on Dec 13, 2002 (gmt 0)

Hi Tedster

you're on the right track and the solution can be found
here [webreview.com] under the section on "Creating Outdents".

their paragraphs don't show the formatting, but I've tested it to check and it works across IE6 NN6.2 and Opera6.05

Suzy

tedster

11:01 am on Dec 13, 2002 (gmt 0)

Thanks Suzy. I'm leaving my code as is - that page you offered doesn't display properly in my Opera 6.03 either.

Time to upgrade Opera, I guess.

Nick_W

11:11 am on Dec 13, 2002 (gmt 0)

Didn't display for me in Opera or Moz.... shame..

Nick

SuzyUK

1:55 pm on Dec 13, 2002 (gmt 0)

Hang on a minute guys..

That Page didn't display correctly in my browsers either, but when I took the code and wrote a test page it did work..

so I can only presume that have some other styling in their page which is over-riding their examples..

Or are you saying you tested the code separately and it didn't work in previous versions of Opera?

Suzy

Nick_W

2:26 pm on Dec 13, 2002 (gmt 0)

No, I just looked at the page... any chance you could post the code here suzy? (just fro clarity...)

Nick

SuzyUK

4:52 pm on Dec 13, 2002 (gmt 0)

here's the code I used to test:
<html><head>
<style type="text/css"><!--
body{
margin: 2em;
text-align: justify;
font-family: verdana;
font-size: 1em;
}

.wrong { text-indent: -3em; }
.hang { text-indent: -3em; margin-left: 3em; }
.large { text-indent: -3em; margin-left: 6em; }
--></style>
</head>

<body>
<p class="wrong">
wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph
</p>

<p class="hang">
hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph
</p>

<p class="large">
large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph
</p>
</body></html>

Suzy

Nick_W

5:19 pm on Dec 13, 2002 (gmt 0)

Fantastic Suzy!

Even works in NN4 ;)

Thanks for posting...

Nick