homepage Welcome to WebmasterWorld Guest from 54.226.173.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Hanging Indents with CSS
cross-browser woes
tedster




msg:1215327
 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




msg:1215328
 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




msg:1215329
 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




msg:1215330
 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




msg:1215331
 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




msg:1215332
 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




msg:1215333
 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




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

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

Nick

SuzyUK




msg:1215335
 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




msg:1215336
 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




msg:1215337
 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




msg:1215338
 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