Welcome to WebmasterWorld Guest from 54.205.60.49

Forum Moderators: not2easy

Message Too Old, No Replies

Hanging Indents with CSS

cross-browser woes

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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?

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Tedster, do you mean like this:

Hanging text
liks this?

or

Hanging text
like this?

Nick

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First one, Nick.

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

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

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

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

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

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Fantastic Suzy!

Even works in NN4 ;)

Thanks for posting...

Nick