homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Hanging Indents with CSS
cross-browser woes
tedster

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 4:34 pm on Dec 12, 2002 (gmt 0)

Hi Tedster, do you mean like this:

Hanging text
liks this?

or

Hanging text
like this?

Nick

tedster

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 11:11 am on Dec 13, 2002 (gmt 0)

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

Nick

SuzyUK

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 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

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



 
Msg#: 448 posted 5:19 pm on Dec 13, 2002 (gmt 0)

Fantastic Suzy!

Even works in NN4 ;)

Thanks for posting...

Nick

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved