[css-d] USING RELATIVE AND ABSOLUTE POSITIONING

[Jason Chan]

When do you use relative, absolute, and/or fix positioning ? I mean I 
understand the concepts but I am mainly floating div containers to construct 
a layout for a site. The only time that I see myself using relative or 
absolute is in this case:



HTML:




 

 

CSS:

#header { position: relative; }

#logo { position: absolute;
  top: 10px;
  left: 10px; }

where the positioning of the logo is absolutely positioned inside the header 
bc the position is labeled as relative.



This is the one and only thing i learned about these two properties, 
relative and positioning. are there any other things that you can do with 
them?


_
Like the way Microsoft Office Outlook works? You’ll love Windows Live 
Hotmail. 
http://imagine-windowslive.com/hotmail/?locale=en-us&ocid=TXT_TAGHM_migration_HM_mini_outlook_0507


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS instead of a table

[Jukka K. Korpela]

On Tue, 22 May 2007, Paul Hanson wrote:

> I think you have a misconception. Tables are "supposed to [be]
> despise[d]" when they are used to control layout. When they are being
> used to present actual tabular data, in my mind, a table is the way to
> go.

I'd like to add two points. Well, maybe three.

Although CSS can, in principle, be used to display data in a tabular 
manner even though it has no table markup, this does not work well in 
practice. For one, IE ignores display values related to tables, such as 
display: table and display: table-cell. Thus, if pages need to work on IE, 
the only practical way to present tabular data is to use table markup in 
HTML. The reason why layout tables can be replaced by the use of CSS - 
though not without problems - is that layout tables are different from 
data tables and can be converted to the use of other markup and 
positioning or floating. Thus, the principle of using table markup for 
tabular data is more or less a necessity, not just a matter of being 
logical.

Even though we use table markup, there is much use for CSS in formatting 
tabular data. In the example presented, there were several cells with the 
attribute width="20". The attributes could be replaced by a single CSS 
rule that sets width: 20px for those cells. Moreover, in CSS you have more 
flexibility than in presentational HTML attributes; you could e.g. use the 
em unit instead of the px unit.

I'm not sure about the nature of the data in the example given. To me, it 
looks like a table that logically consists of several tables, written as 
one table element to get all rows equally wide. It might imitate some 
printed publication. Anyway, such use of a table is somewhat illogical and 
results in rather artificial markup, line colspan="3" and colspan="32" on 
the last row. If the cells of that row do not logically correspond to 
columns on previous lines in the manner suggested by the colspan 
attributes, then the principle of separating presentation from structure 
would require that more than one table be used. In that point, you might 
consider using CSS to set the column widths in the two tables in order to 
make them match in some desired way, even though there is no logical 
correspondence. However, this means that you would need to set the column 
widths explicitly (perhaps with table-layout: fixed), since there is no 
way in CSS to say that a column of a table be as wide as a column in a 
previous table, except by explicitly setting both to a particular value.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] hover technique

[Paul Novitski]

At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote:
>I hosted a test case showing a possible solution:
>Please, look at:  http://www.maujor.com/temp/css-d/hover-effect.html


Mauricio, this technique as you've used it here doesn't survive 
text-resizing, but it looks like that can probably be corrected by 
setting block heights in ems to prevent them from colliding.

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Empty Inline elements and backgrounds

[Philippe Wittenbergh]

On May 23, 2007, at 2:49 AM, Aaron Cohen wrote:

> so, I would still like to know if it's possible to
> somehow make the empty span behave like a block
> element, so that the bg shows thru, but not render on
> a new line. Thanks.

Try giving the offending element 'layout' [1]
.x {zoom:1;} or
span.x {display:inline-block}

[1] 

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[david]

Blake Haswell wrote:
> david wrote:
>> Update: after posting that, I saw someone else mention song lyrics or
>> poetry. Being a writer of both, all I can say is - that each line is
>> easily handled as a separate paragraph, with CSS controlling line
>> spacing and left/right margins.
> 
> But each line is *not* a paragraph. Each line is a line of a stanza
> (in my mind, marked up pretty appropriately with the  tag). Or, in
> other words, and the end of each line is a line-break.

Someone needs to propose a new XML tag - ! - that is like a
paragraph but respects line breaks in the HTML source itself.

> I think there are only two really appropriate ways to mark-up poetry.
> Using  tags, or using paragraphs to mark-up the stanza's and the
>  tag to show line-breaks.

I can agree with that.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[david]

Jukka K. Korpela wrote:
> On Mon, 21 May 2007, david wrote:
> 
>> Update: after posting that, I saw someone else mention song lyrics or
>> poetry. Being a writer of both, all I can say is - that each line is
>> easily handled as a separate paragraph, with CSS controlling line
>> spacing and left/right margins.
> 
> I don't think it's adequate to make each line a paragraph. When CSS is 
> off, it will look bad. It will _sound_ bad, since speech browsers 
> typically pause between paragraphs.
> 
> But using  for each line works well, and lets you add left margin 
> easily if desired. And it requires no CSS if simple rendering is OK.

Good point.

> There's also the option of using , which is convenient if you now 
> have poems in plain text format, possibly with spaces at the start of 
> lines to be preserved. The drawback is that the font is monospace by 
> default, but this can easily be fixed in CSS. (The opposite approach, 
> using ... with white-space: pre might be theoretically better, but 
> it doesn't work on some old browsers and causes a mess when CSS is off.)

Styling  would cause problems with many of my poems, many of which
have lines that start beneath specific individual characters in the line
above. If I put in the proper amount of spaces to line things up in a
 restyled to use a non-monospace font, someone viewing it with CSS
off will have the words landing at the wrong place.

I do wish CSS had the idea of a  character! ;-)

Anyway, are we too far off topic to get back on topic? Does anyone know
of any poetry sites where we could see how they're doing it?

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[david]

Jukka K. Korpela wrote:
> On Mon, 21 May 2007, david wrote:
> 
>> Why would you need to do all that? You just put your inline quotation or
>> program code in its own paragraph and adjust your margins that way. Why
>> would you need to use :before or :after pseudo-elements at all?
> 
> If I have, say, a text paragraph that mentions a program command inside 
> the text, just as it could mention a name, should I switch to completely 
> different markup when the command is so long that it should appear on a 
> line of its own? I don't think so.

If you're only mentioning a single command, sure, that's that span could
be for. But a single command wouldn't be an entire line ... but if you
were to mention a multi-line snippet of code, that WOULD be a paragraph.
At least to me.

Sometimes I think the entire  tag doesn't really fit with CSS.
It's conceptually just a  that's set to display:inline ... you
could do the same things by simply styling the  or  tags
appropriately and (to me) much more semantically. Or using the 
tag ...

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] AlphaImageLoader

[Kirsten Rourke]

Hi -
 I've gotten myself twisted up a bit. I'm trying to get the  png's in my main 
navigation to work in IE6Win and I can't figure out  how to apply the 
conditional statement. I think I overdid the google  searching, as I found too 
many things and tried  them with little  success. I'm halfway through cleaning 
up the rest of the css so that  might look odd too, but this is what I'm really 
in over my head with at  the moment.
   I tried the a variation I found in the archives and another version after 
that but I'm sure I'm missing things.
  
  The basic pieces look the way I want in everything (including !E 5 for mac) 
except IE 6 Win.
  If you feel like looking at the page and giving me a shout please,  please 
don't yell at me about the tables -I'm not happy about them  either.
  
  The test page is here
  http://www.kirstenrourke.com/qbs/qbi_pages/
  
  Any help would be appreciated. Thank you.
  
   - Kirsten
  
  [EMAIL PROTECTED]



This painting is for you. It's partly an expression of teenage angst, but 
mostly a moo-cow.

- Chris Griffin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE7 and ems

[Rick Pasotto]

If I have two columns, the left given a width in ems and positioned
absolute and the right simply given a margin-left leaving width at auto
then in Seamonkey increasing the font size changes the left column width
and decreases the right column width so that the screen size remains the
same. IE7 increases the left column but leaves the right column the same
width so the screen is wider and there is now horizontal scrolling.

Which is the correct behavior?

-- 
"Man is the only animal that contemplates death, and also the only animal
 that shows any sign of doubt of its finality." -- William Ernest Hocking
Rick Pasotto[EMAIL PROTECTED]http://www.niof.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS instead of a table

[Paul Hanson]

I am the worst offender for tables in HTML. In my documentation, it is
laid out in a two column table. The left column has headings, like
"Purpose," "Navigation," and "Authority." The right column contains the
"information" about the heading in the left column. Because it is
tabular information that I need to convey, in my opinion, a table is
apporpriate.

Don't feel guilty - just use common sense when trying to decide the best
way to present your information. If you have a calendar or a table, use
a table on your web page. If you are trying to make the page line up in
a specific way and determine that you could do the page in a two column
table to get the layout you want - I think, if I understand the
pro-CSS/anti-table group correctly - that is when to think about using
CSS.

Paul

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
[EMAIL PROTECTED]
Sent: Tuesday, May 22, 2007 6:00 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] CSS instead of a table

"Paul Hanson" <[EMAIL PROTECTED]>
Re: [css-d] CSS instead of a table

> I think you have a misconception. Tables are "supposed to [be] 
> despise[d]" when they are used to control layout. When they are being 
> used to present actual tabular data, in my mind, a table is the way to

> go. As far as the "simpler and more readily maintainable" element of 
> your post, I would use a WYSIWYG view of the HTML to make it easier to

> work with. I would probably not venture into the true code unless I 
> was troubleshooting something.

Aha! Have I been too dramatically impressed by books such as
"HTMLUtopia: Designing without Tables using CSS"  from Sitepoint?

I have "felt guilty" in using tables.

Bruce


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org
-- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS instead of a table

[bruce . somers]

"Paul Hanson" <[EMAIL PROTECTED]>
Re: [css-d] CSS instead of a table

> I think you have a misconception. Tables are "supposed to [be]
> despise[d]" when they are used to control layout. When they are being
> used to present actual tabular data, in my mind, a table is the way to
> go. As far as the "simpler and more readily maintainable" element of
> your post, I would use a WYSIWYG view of the HTML to make it easier to
> work with. I would probably not venture into the true code unless I was
> troubleshooting something.

Aha! Have I been too dramatically impressed by books such as "HTMLUtopia: 
Designing without Tables using CSS"  from Sitepoint?

I have "felt guilty" in using tables.

Bruce


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS instead of a table

[christianz]

 



I would like to make it simpler and more readily maintainable, but I don't know 
where to start in duplicating it with CSS, avoiding the use of a table, which 
we 
are supposed to despise.


 Don't throw the baby out with the bathwater. Tables are still supposed to be 
used for presenting tabular data and it looks like tabular data is what you 
have here. In fact, there are many instances on the web when tabular data is 
being presented and the developer doesn't even realize it.


  


Check Out the new free AIM(R) Mail -- 2 GB of storage and industry-leading spam 
and email virus protection.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS instead of a table

[Paul Hanson]

I think you have a misconception. Tables are "supposed to [be]
despise[d]" when they are used to control layout. When they are being
used to present actual tabular data, in my mind, a table is the way to
go. As far as the "simpler and more readily maintainable" element of
your post, I would use a WYSIWYG view of the HTML to make it easier to
work with. I would probably not venture into the true code unless I was
troubleshooting something.

I don't remember if it was on this list or another one where someone
wanted to take a calendar and make it CSS. The general consensus was
that a calendar was a suitable 'thing' to present as a table. I pasted
your code into Dreamweaver and viewed it in IE 6. I think, in my
opinion, your code is suitable for a table as well.

Paul Hanson
Technical Writer
RoboHelp ACE -
http://www.adobe.com/support/forums/team_macromedia/robohelp.html
Quintrex Data Systems http://www.quintrex.com
email: phanson at quintrex.com 

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
[EMAIL PROTECTED]
Sent: Tuesday, May 22, 2007 3:59 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] CSS instead of a table

Here is the code for an extremely simple web page constructed with the
use of a table.

I would like to make it simpler and more readily maintainable, but I
don't know where to start in duplicating it with CSS, avoiding the use
of a table, which we are supposed to despise.

Does anyone feel inclined to play the instructor and show me how to make
it more reliable and easier to maintain?

Many thanks for any help.

Bruce

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS instead of a table

[bruce . somers]

Here is the code for an extremely simple web page constructed with the use of a 
table.

I would like to make it simpler and more readily maintainable, but I don't know 
where to start in duplicating it with CSS, avoiding the use of a table, which 
we are supposed to despise.

Does anyone feel inclined to play the instructor and show me how to make it 
more reliable and easier to maintain?

Many thanks for any help.

Bruce

The page is also found at http://www.celticmanner.com/August.html

http://www.w3.org/rt/rec-html40/loose.dtd";>




 JulyAugust

 
FrSaSuMoTu
WeThFrSaSu
MoTuWeThFr
SaSuMoTuWe
ThFrSaSuMo
TuWeThFrSa
SuMoTuWeTh
Fr


 
2728293031
01020304050607080910
11121314151617181920
2122232425262718293031


Dublin Airport
   
   
   
   
   
   
   
   


LOTD - Dublin
 8 3/83/8 8  8 
 8  8  8 3/8   
   
   
   
   
   
   


Ballyshannon Festival
   
 :Y 
   
   
   
   
   
   


World Fleadh, Portlaoise
   
   
 :x  :Y  :Y  :Y  :Y  :Y 
 :Y 

   
   
   


E - Liscannor
   
   
   
   
   
   
   
   


Trad on the Prom, Galway
   
   
   
:x :Y  :Y 
 :x:x
   
   
   


Brú Ború Show, Cashel
 :x  :x  :x  :x  :x 
 :x  :x  :x  :x  :x  :Y  :x  :x  :x  :x 
 :x  :x  :x  :x  :x  :x  :x  :x  :x  :x 
 :x  :x  :x  :x  :x  :x  :x  :x  :x  :x  :x 


M
   
   
   
   
   
   
   
   

 
Dublin Airport -- Ballyshannon2h 
45m 
Dublin Airport -- Portlaoise1h 
05m 
Ballyshannon -- Cashel4h 19m 
Cashel --Portlaoise1h 06m 
Portlaoise -- Galway2h 18m 
Galway -- Greystones3h 07m 
Greystones -- Portlaoise1h 19m 
Portlaoise -- Liscannor2h 38m 
Liscannor -- Galway1h 23m 
Liscannor -- Greystones3h 45m 





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Empty Inline elements and backgrounds

[James Gadrow]

Aaron Cohen wrote:
> Thanks for the suggestion. Unforunately adding a nbsp
> is not possible, due to the fact that I sometimes use
> that span to contain text instead of a bg image,
> depending on certain conditions.
>
> so, I would still like to know if it's possible to
> somehow make the empty span behave like a block
> element, so that the bg shows thru, but not render on
>   
Well, if there's content in the span it should display correctly (thus, 
you're only add the nbsp where you don't add content and this is usually 
as easy as adding an 'else' condition if scripting).

However, in the interest of staying on topic. Try wrapping the 
bothersome span as well as any following text inside another span and 
then wrap just the following text in another span that's on the same 
document level as the empty span. Then set each 2nd span to display: 
block; float: left; and then use absolute positioning on their parent 
span to place it back where it belongs. This distance could be more 
easily calculated if you set the line-height of the  element. So it 
would look like:

span span {display: block; float: left;}
ul li {line-height: 1em; position: relative;}
.textWrap {position: absolute; left: 100%;}

Text Here  Some More 
Text.

That's pretty ugly but it sounds like your script is preventing a lot of 
easier solutions. Now, you'd want to test that cross-browser because 
something is tickling my brain about using position: absolute inside 
position: relative but I don't remember off hand what it could be...

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Empty Inline elements and backgrounds

[Aaron Cohen]

Thanks for the suggestion. Unforunately adding a nbsp
is not possible, due to the fact that I sometimes use
that span to contain text instead of a bg image,
depending on certain conditions.

so, I would still like to know if it's possible to
somehow make the empty span behave like a block
element, so that the bg shows thru, but not render on
a new line. Thanks.

--- James Gadrow <[EMAIL PROTECTED]> wrote:

> Aaron Cohen wrote:
> > Hi, I've seen this discussed in the archives once,
> but
> > couldn't quite follow the solution.
> >
> > Apparently IE doesn't render the background of
> empty
> > inline elements. I need to display an empty span
> with
> > a background image. I can't just use an img tag in
> its
> > place because of some requirements for a DOM
> script I
> > am writing.
> >
> > Anyway, as a simple test, in FF the bg color of
> the
> > empty span shows through on this test file, but
> not in
> > IE7. I thought of relatively positioning a
> container
> > span and then adding a width and height but this
> does
> > not work. Any suggestions? Here's the simple test
> file
> > that illustrates the problem:
> >
> > http://www.cohencentral.com/test.html
> >
> > I assume the problem is because the span is empty
> and
> > is inline. Can someone please offer a solution? 
> >
> > Thanks.
> >
> > Thanks,
> > -Aaron
> >   
> have you tried   ?
> 
> This should take care of the issue at the expense of
> adding a 
> non-semantic space. (WARNING! Off Topic suggestion!)
> However, if you're 
> DOM scripting anyway... perhaps you could add the
>   if the client is 
> using IE? That way you don't need to clutter up your
> page with the 
> non-semantic space and it would only come into play
> when it needs. I 
> think doing it this way will even hide the  
> from being displayed 
> in your source which means no one will even know
> it's there who doesn't 
> read the script. Problem is it wouldn't work if the
> user has JS 
> disabled, but it sounds like your page is kinda
> dependant upon it 
> anyways so it may not be a big issue...(/WARNING)
> 
> If you have a question about my off-topic portion of
> the suggestion, 
> respond off-list so as not to stray.
> 
> -- 
> Thanks,
> 
> Jim
> 
> 


Thanks,
-Aaron


 

The fish are biting. 
Get more visitors on your site using Yahoo! Search Marketing.
http://searchmarketing.yahoo.com/arp/sponsoredsearch_v2.php
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] hover technique

[David Hucklesby]

On Tue, 22 May 2007 11:37:49 +0100, Terry O'Leary wrote:
> Hi all
>
> I have an  acting as a menu (so each  in the list is wrapped in 
> anachor), next
> to that I have a div containing a jumble of words.
>
> What i'd like to do is when I hover of the list item some text in the jumble 
> words
> change color so they stand out of the jumble, any body got a pure css 
> solution for
> this, i've included some example code below, i'm thinking some spans in the 
> jumbled
> words and some way of changing color on a:hover ?
>
>
Not with that markup, Terry. To use CSS you would need to put the
text to highlight inside the "A" element and use positioning on it -
the H4 element would make it invalid markup, and it would not degrade
gracefully, and likely be meaningless to screen readers.

A JavaScript solution seems possible. Try asking on a JavaScript
list, such as 

Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] hover technique

[Mauricio Samy Silva]

From: "Terry O'Leary" <[EMAIL PROTECTED]>
> I have an  acting as a menu (so each  in the list is wrapped in
> anachor), next to that I have a div containing a jumble of words.
>
> What i'd like to do is when I hover of the list item some text in the 
> jumble
> words change color so they stand out of the jumble, any body got a pure 
> css
> solution for this, i've included some example code below, i'm thinking 
> some
> spans in the jumbled words and some way of changing color on a:hover ?

-
Hi Terry,
I hosted a test case showing a possible solution:
Please, look at:  http://www.maujor.com/temp/css-d/hover-effect.html

Hi all,
Comments on my solution will be appreciate.
Regards,

Maurício Samy Silva
http://www.maujor.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[Andrew Gaffney]

James Gadrow wrote:
> Andrew Gaffney wrote:
>> James Gadrow wrote:
>>> Andrew Gaffney wrote:
 Now that the biggest problems are out of the way, there's a 
 rendering oddity with the page in IE6 (and 5, but I don't really 
 care about that). The content DIV ("CenterBox") is lined up on the 
 left with the header image, but it extends ~10px too far on the 
 right side. There also seems to be ~10px extra padding/margin on the 
 left side of the navigation box. It looks correct in IE7 and FF. I 
 have absolutely no idea what's going on there.

 However, looking at it now, it appears that the "ase" from the last 
 word in the 3rd column are repeated to the left of the navigation 
 column. This is probably what's pushing it out. Why does IE have to 
 suck so much? Anyone have any idea why it's repeating those letters 
 and how to get rid of them?
>>> Sounds like the IE duplicate characters bug. It's caused by comments 
>>> between floats (which, I think I remember your code is heavily 
>>> commented...).
>>> Read about it here ( 
>>> http://www.positioniseverything.net/explorer/dup-characters.html ) 
>>> and see if that doesn't fix the problem.
>> That fixes the character duplication, but that apparently wasn't the 
>> cause of the extra spacing on the left. Any ideas for the extra spacing?
>>
> IE double margin float bug maybe?
> 
> http://positioniseverything.net/explorer/doubled-margin.html

It doesn't appear so. The 'display:inline' trick didn't do anything, and I'm 
using padding on the DIV since I'm already using a negative margin for the 
positioning of the float'd DIV.

-- 
Andrew Gaffney
agaffney.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[James Gadrow]

Andrew Gaffney wrote:
> James Gadrow wrote:
>> Andrew Gaffney wrote:
>>> Yeah, that's what happens when I type the URL by hand :)
>>>
>>> Now that the biggest problems are out of the way, there's a 
>>> rendering oddity with the page in IE6 (and 5, but I don't really 
>>> care about that). The content DIV ("CenterBox") is lined up on the 
>>> left with the header image, but it extends ~10px too far on the 
>>> right side. There also seems to be ~10px extra padding/margin on the 
>>> left side of the navigation box. It looks correct in IE7 and FF. I 
>>> have absolutely no idea what's going on there.
>>>
>>> However, looking at it now, it appears that the "ase" from the last 
>>> word in the 3rd column are repeated to the left of the navigation 
>>> column. This is probably what's pushing it out. Why does IE have to 
>>> suck so much? Anyone have any idea why it's repeating those letters 
>>> and how to get rid of them?
>> Sounds like the IE duplicate characters bug. It's caused by comments 
>> between floats (which, I think I remember your code is heavily 
>> commented...).
>> Read about it here ( 
>> http://www.positioniseverything.net/explorer/dup-characters.html ) 
>> and see if that doesn't fix the problem.
>
> That fixes the character duplication, but that apparently wasn't the 
> cause of the extra spacing on the left. Any ideas for the extra spacing?
>
IE double margin float bug maybe?

http://positioniseverything.net/explorer/doubled-margin.html

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[Andrew Gaffney]

James Gadrow wrote:
> Andrew Gaffney wrote:
>> Yeah, that's what happens when I type the URL by hand :)
>>
>> Now that the biggest problems are out of the way, there's a rendering 
>> oddity with the page in IE6 (and 5, but I don't really care about 
>> that). The content DIV ("CenterBox") is lined up on the left with the 
>> header image, but it extends ~10px too far on the right side. There 
>> also seems to be ~10px extra padding/margin on the left side of the 
>> navigation box. It looks correct in IE7 and FF. I have absolutely no 
>> idea what's going on there.
>>
>> However, looking at it now, it appears that the "ase" from the last 
>> word in the 3rd column are repeated to the left of the navigation 
>> column. This is probably what's pushing it out. Why does IE have to 
>> suck so much? Anyone have any idea why it's repeating those letters 
>> and how to get rid of them?
> Sounds like the IE duplicate characters bug. It's caused by comments 
> between floats (which, I think I remember your code is heavily 
> commented...).
> Read about it here ( 
> http://www.positioniseverything.net/explorer/dup-characters.html ) and 
> see if that doesn't fix the problem.

That fixes the character duplication, but that apparently wasn't the cause of 
the extra spacing on the left. Any ideas for the extra spacing?

-- 
Andrew Gaffney
agaffney.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Empty Inline elements and backgrounds

[James Gadrow]

Aaron Cohen wrote:
> Hi, I've seen this discussed in the archives once, but
> couldn't quite follow the solution.
>
> Apparently IE doesn't render the background of empty
> inline elements. I need to display an empty span with
> a background image. I can't just use an img tag in its
> place because of some requirements for a DOM script I
> am writing.
>
> Anyway, as a simple test, in FF the bg color of the
> empty span shows through on this test file, but not in
> IE7. I thought of relatively positioning a container
> span and then adding a width and height but this does
> not work. Any suggestions? Here's the simple test file
> that illustrates the problem:
>
> http://www.cohencentral.com/test.html
>
> I assume the problem is because the span is empty and
> is inline. Can someone please offer a solution? 
>
> Thanks.
>
> Thanks,
> -Aaron
>   
have you tried   ?

This should take care of the issue at the expense of adding a 
non-semantic space. (WARNING! Off Topic suggestion!) However, if you're 
DOM scripting anyway... perhaps you could add the   if the client is 
using IE? That way you don't need to clutter up your page with the 
non-semantic space and it would only come into play when it needs. I 
think doing it this way will even hide the   from being displayed 
in your source which means no one will even know it's there who doesn't 
read the script. Problem is it wouldn't work if the user has JS 
disabled, but it sounds like your page is kinda dependant upon it 
anyways so it may not be a big issue...(/WARNING)

If you have a question about my off-topic portion of the suggestion, 
respond off-list so as not to stray.

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[Andrew Gaffney]

James Gadrow wrote:
> The good news for you? By changing your position to relative, you've 
> just told your box to not contain elements with position: absolute / 
> float applied (such as your 3 columns). This means that if you insert a 
> clearing div () after your 3 columns your 
> box will expand to once again contain the columns. However, now that 
> you've told the page to reserve space for that element, to re-position 
> it where it belongs you need to add "top: 123px; left: 96px;" and remove 
> your margin settings. This should make the page look exactly the same as 
> it does with position: absolute. No idea if that's what you want or not, 
> but there you have it.

This is perfect. I figured it would be something insanely simple, but I just 
didn't know what :)

> Oh, and the link to your stylesheet didn't work because your server is 
> case-sensitive so you forgot to capitalize the 's' in 'sheet.' ;)

Yeah, that's what happens when I type the URL by hand :)

Now that the biggest problems are out of the way, there's a rendering oddity 
with the page in IE6 (and 5, but I don't really care about that). The content 
DIV ("CenterBox") is lined up on the left with the header image, but it extends 
~10px too far on the right side. There also seems to be ~10px extra 
padding/margin on the left side of the navigation box. It looks correct in IE7 
and FF. I have absolutely no idea what's going on there.

However, looking at it now, it appears that the "ase" from the last word in the 
3rd column are repeated to the left of the navigation column. This is probably 
what's pushing it out. Why does IE have to suck so much? Anyone have any idea 
why it's repeating those letters and how to get rid of them?

-- 
Andrew Gaffney
agaffney.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Empty Inline elements and backgrounds

[Aaron Cohen]

Hi, I've seen this discussed in the archives once, but
couldn't quite follow the solution.

Apparently IE doesn't render the background of empty
inline elements. I need to display an empty span with
a background image. I can't just use an img tag in its
place because of some requirements for a DOM script I
am writing.

Anyway, as a simple test, in FF the bg color of the
empty span shows through on this test file, but not in
IE7. I thought of relatively positioning a container
span and then adding a width and height but this does
not work. Any suggestions? Here's the simple test file
that illustrates the problem:

http://www.cohencentral.com/test.html

I assume the problem is because the span is empty and
is inline. Can someone please offer a solution? 

Thanks.

Thanks,
-Aaron


   
Be
 a better Globetrotter. Get better travel answers from someone who knows. 
Yahoo! Answers - Check it out.
http://answers.yahoo.com/dir/?link=list&sid=396545469
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Aligning Text within a Div

[Stephan Schindler]

I had no luck aligning text using a table within a div. (FF 2.0). The 
table would always extend to 100% of the div despite my setting the 
width to 200px inline (about 30% of the div width). I eventually tackled 
the problem (at least in FF) by adding a right margin to to the text and 
not using a table.

Is this the best way to handle alignment of text within a div?

Any ideas why the table would not accept the width I tired to set?

Thanks!

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[James Gadrow]

Andrew Gaffney wrote:
> It appears both the one that matches what I want from the first set and the 
> 2nd 
> link use float and negative margins, which is already what I'm using for 
> layout 
> of the 3 columns inside of "CenterBox".
>
> The problem I'm having is that if I make "CenterBox" use anything other than 
> position:absolute, that 3 column layout no longer stays *within* the 
> "CenterBox" 
> DIV (it becomes zero height).
There are a few ways to make a 3 col layout (in order of personal pref):

1. Using floats
2. Using absolute positioning
3. Using display: table
4. Using 

Ok... let's examine the options from the bottom up.

Option #4... do I even need to say why not to use this one unless 
unavoidable? Thought not.
Option #3 is pretty decent, it makes the row display exactly as the 
designer would like, including making the height of each section equal! 
However, the good folks over at Mickeysoft can't read a specification to 
save their lives and have still not implemented display: table (even in 
IE7, talk about out of date!), so good luck with that option.
Option #2 is a solid option but I try and avoid positioning things 
absolutely unless I *ahem* absolutely must (pardon the pun). But, you've 
specified that you don't wish to use position: absolute so this isn't 
really an option for you.
Option #1 is my preferred method but if you're doing a 3 col section 
within a 3 col layout that's already using floats clearing an element 
can have unexpected results.

The good news for you? By changing your position to relative, you've 
just told your box to not contain elements with position: absolute / 
float applied (such as your 3 columns). This means that if you insert a 
clearing div () after your 3 columns your 
box will expand to once again contain the columns. However, now that 
you've told the page to reserve space for that element, to re-position 
it where it belongs you need to add "top: 123px; left: 96px;" and remove 
your margin settings. This should make the page look exactly the same as 
it does with position: absolute. No idea if that's what you want or not, 
but there you have it.

Oh, and the link to your stylesheet didn't work because your server is 
case-sensitive so you forgot to capitalize the 's' in 'sheet.' ;)

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] hover technique

[Paul Novitski]

At 5/22/2007 03:37 AM, Terry O'Leary wrote:
>I have an  acting as a menu (so each  in the list is wrapped in
>anachor), next to that I have a div containing a jumble of words.
>
>What i'd like to do is when I hover of the list item some text in the jumble
>words change color so they stand out of the jumble, any body got a pure css
>solution for this, i've included some example code below, i'm thinking some
>spans in the jumbled words and some way of changing color on a:hover ?


Terry,

CSS :hover exerts its effect 'inward' in the DOM, that is, it's only 
the children and other descendants of the anchor element that can be 
affected by the event.

It's certainly possible to affect blocks of text that *look like* 
they're outside the anchor by way of absolute positioning -- see Eric 
Meyers' demo 'Pure CSS Popups' 
.

Here's an example from my own portfolio : 
hover over the images in the navigation menu and the corresponding 
sub-menu text brightens.  (If I reproduced this today I'd make it 
resizable, but it does illustrate the basic technique.)

Similarly in your case, I see all the 'popup' text as visible at all 
times and then change on hover, however if those words were 
positioned absolutely they wouldn't be part of one another's flow, therefore:

1) you'd have to pre-position each word as you would an image, 
planning in advance their respective sizes and positions;
2) if the words grew in size in response to hover, the word-wrap of 
the whole cluster wouldn't naturally change; and
3) to make it work with text-resizing you'd need to size the 
container for the word cloud in ems so that the wrap didn't need to 
change with text-resizing.

So I'm seeing this sort of markup:


 ANNUAL REPORTS
 DEDICATED TEAM FOR EACH PROJECT
 TYPESETTING
 

 NEW MEDIA
 CREATIVE
 CONCEPTS AND DESIGN DEVELOPMENT
 
 ...


Then position each of the text blobs absolutely (or relatively?) 
somewhere beneath or beside the list.

You could definitely pull it off if you could control the environment 
in which the word cloud sat.  It would be a little picky if you had 
to pre-measure each phrase in ems, but if the word cloud doesn't have 
to change frequently, that solution doesn't sound impractical.

Of course, using javascript you can make an event affect unrelated 
elements anywhere on the page, but personally I think it's cooler 
when we can pull this off without scripting.  One advantage of 
scripting it is that the markup would be more intuitively obvious -- 
the word cloud would be separate from the menu, each phrase in the 
cloud wrapped in a span linked by id or class with the menu item to 
which it belongs.

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[Andrew Gaffney]

David Laakso wrote:
> Andrew Gaffney wrote:
>> Previously, I asked about doing a 3 column layout without using absolute 
>> positioning. At someone's suggestion, I used the method from 
>> 
>>  
>> to accomplish what I wanted. Now, I'm having another issue related to that 
>> one.
>>
>> Before I get too far, the page I'm talking about is at 
>>  and the stylesheet is at 
>> .
>>
>> It appears that this method (float:left and negative left margins) doesn't 
>> work 
>> when the containing DIV uses position:relative instead of position:absolute. 
>> The 
>> containing DIV becomes zero height. I need to use position:relative (or 
>> something else that works) so that "CenterBox" is actually within 
>> "BodyContainer", so that the height of "BodyContainer" gets expanded as 
>> "CenterBox" expands.
>>
>> I just can't seem to figure out where to go next. Does anyone have any 
>> suggestions?
> 
> Same as last time you wrote:
> 
> Use a 3 col layout from this set that meets your requirement:
> 
> or follow the 3 col tutorial on this page:
> 
> Make believe you never heard of absolute positioning and you'll get a 
> lot further faster.

It appears both the one that matches what I want from the first set and the 2nd 
link use float and negative margins, which is already what I'm using for layout 
of the 3 columns inside of "CenterBox".

The problem I'm having is that if I make "CenterBox" use anything other than 
position:absolute, that 3 column layout no longer stays *within* the 
"CenterBox" 
DIV (it becomes zero height).

-- 
Andrew Gaffney
agaffney.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] position:absolute and 3 column layout using float:left and negative margins

[David Laakso]

Andrew Gaffney wrote:
> Previously, I asked about doing a 3 column layout without using absolute 
> positioning. At someone's suggestion, I used the method from 
> 
>  
> to accomplish what I wanted. Now, I'm having another issue related to that 
> one.
>
> Before I get too far, the page I'm talking about is at 
>  and the stylesheet is at 
> .
>
> It appears that this method (float:left and negative left margins) doesn't 
> work 
> when the containing DIV uses position:relative instead of position:absolute. 
> The 
> containing DIV becomes zero height. I need to use position:relative (or 
> something else that works) so that "CenterBox" is actually within 
> "BodyContainer", so that the height of "BodyContainer" gets expanded as 
> "CenterBox" expands.
>
> I just can't seem to figure out where to go next. Does anyone have any 
> suggestions?
>
>   



Same as last time you wrote:

Use a 3 col layout from this set that meets your requirement:

or follow the 3 col tutorial on this page:

Make believe you never heard of absolute positioning and you'll get a 
lot further faster.
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Francesco Rizzi]

On 5/22/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> > On Tue, 22 May 2007, Blake Haswell wrote:
> >
> Of course, in XHTML 2.0, they will be doing away with the  tag.
>
> Don't count this as a victory.  They're replacing it with the The
> quick brown ... syntax.  So, clearly, the W3C believes that
> paragraphs should be broken down somewhat.
>
> Just something to consider.


This is interesting stuff, although we left the original topic somewhere
behind us by now.
I was styling  blocks last night, and really hit the line length
problem.
Whitespace rules didn't seem to help:
~ white-space: auto; this makes the user agent ignore any whitespace you
actually put in the preformatted block;
~ white-space: nowrap: this is the standard behavior in  blocks, and a
long line will extend to the right as much as it wants/needs (depending on
your browser, the surrounding  block will be extended accordingly or
not, making the line bleed out);
~ white-space: pre; this tells the user agent that you preformatted the
content with the spaces where you want.
After a while, I realized that this is ok: if you are in a  block, you
are telling the user agent you preformatted the content, so the user agent
really shouldn't mess with it. Of course, it'd be nice if there was a way to
constrain the content in a given width, specifying maybe an indent space for
lines that are too long...

So, looking at future versions of the specs,  is probably ok (the added
rules I mentioned in the previous paragraph would be nice additions though).

Definitely, right now, it feels like  and  are potential overlaps.
In other words, if we had a bit more control over  presentation, then
would we need a  tag at all ?

And as long as we have , I guess we need a  or  to break
subsections of paragraphs.
Granted, if we were willing to throw  away, we could use a new  tag
in its place. - and then we could define what  means from scratch (I
leave it up to you to determine whether a  would be a single-chunk of
copy or a grouping of 1 or more chunks, in which case you need a 
equivalent).

F.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] position:absolute and 3 column layout using float:left and negative margins

[Andrew Gaffney]

Previously, I asked about doing a 3 column layout without using absolute 
positioning. At someone's suggestion, I used the method from 

 
to accomplish what I wanted. Now, I'm having another issue related to that one.

Before I get too far, the page I'm talking about is at 
 and the stylesheet is at 
.

It appears that this method (float:left and negative left margins) doesn't work 
when the containing DIV uses position:relative instead of position:absolute. 
The 
containing DIV becomes zero height. I need to use position:relative (or 
something else that works) so that "CenterBox" is actually within 
"BodyContainer", so that the height of "BodyContainer" gets expanded as 
"CenterBox" expands.

I just can't seem to figure out where to go next. Does anyone have any 
suggestions?

-- 
Andrew Gaffney
agaffney.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[ianm]

> On Tue, 22 May 2007, Blake Haswell wrote:
>
>> I think there are only two really appropriate ways to mark-up poetry.
>> Using  tags, or using paragraphs to mark-up the stanza's and the
>>  tag to show line-breaks. Possibly using an OL to mark it up as an
>> ordered list, but that's only an option if you need to have the line
>> numbers written, and even then I think it's pretty messy.
>
> Using OL or UL is quite acceptable as far as styled presentation is
> considered, since you can set list-style-type: none and margin: 0 and
> padding: 0. You can also set
>
> li { margin-left: 1em;
>   text-indent: -1em; }
>
> so that if a line is longer than fits into the canvas, it is wrapped but
> so that the second line is indented, letting the user infer the
> intended division into lines. (Similar styling can be used in the DIV
> approach that I mentioned earlier.)
>
> What's problematic in using OL or UL is the unstyled presentation.
>
> --
> Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

Of course, in XHTML 2.0, they will be doing away with the  tag.

Don't count this as a victory.  They're replacing it with the The
quick brown ... syntax.  So, clearly, the W3C believes that
paragraphs should be broken down somewhat.

Just something to consider.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] hover technique

[Terry O'Leary]

Hi all

I have an  acting as a menu (so each  in the list is wrapped in
anachor), next to that I have a div containing a jumble of words.

What i'd like to do is when I hover of the list item some text in the jumble
words change color so they stand out of the jumble, any body got a pure css
solution for this, i've included some example code below, i'm thinking some
spans in the jumbled words and some way of changing color on a:hover ?




ANNUAL REPORTS
NEW MEDIA
BRANDING
CORPORATE COMMUNICATIONS




DEDICATED TEAM FOR EACH PROJECT // CREATIVE
CONCEPTS AND DESIGN DEVELOPMENT // TYPESETTING //
PROOFREADING // PROJECT, TIME AND COST MANAGEMENT
// PRINT MANAGEMENT, INCLUDING PASSING ON
PRESS // PHOTOGRAPHY, BOTH COMMISSIONED AND 
LIBRARY // ART DIRECTION //COPY WRITING //ARTWORK
// SOURCING AND IMPLEMENTING PHOTOGRAPHY
// WEB SITE BUILD AND MANAGEMENT WEB SITE
MAINTENANCE // WEB SITE HOSTING //CUSTOM-BUILT
CONTENT MANAGEMENT SYSTEMS IMAGE LIBRARIES
// SERVER STATISTICS // PDF AND HTML CONVERSION
FOR THE WEB // CORPORATE IDENTITY GUIDLINES
// IMPLEMENTATION THROUGHOUT CORPORATE
COMMUNICATIONS //ANIMATION AND INTERACTION

-- 
Regards

Terry O'Leary
Senior Web Developer @ Design Portfolio Marketing Services

~ Online Communities - www.unofficialfan.com
~Online dating community ? www.d8-m8.com
~ Widen your music www.hayseeddixies.com :: www.lil-chris.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Jukka K. Korpela]

On Tue, 22 May 2007, Blake Haswell wrote:

> I think there are only two really appropriate ways to mark-up poetry.
> Using  tags, or using paragraphs to mark-up the stanza's and the
>  tag to show line-breaks. Possibly using an OL to mark it up as an
> ordered list, but that's only an option if you need to have the line
> numbers written, and even then I think it's pretty messy.

Using OL or UL is quite acceptable as far as styled presentation is 
considered, since you can set list-style-type: none and margin: 0 and 
padding: 0. You can also set

li { margin-left: 1em;
  text-indent: -1em; }

so that if a line is longer than fits into the canvas, it is wrapped but 
so that the second line is indented, letting the user infer the 
intended division into lines. (Similar styling can be used in the DIV 
approach that I mentioned earlier.)

What's problematic in using OL or UL is the unstyled presentation.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Blake Haswell]

david wrote:
> Update: after posting that, I saw someone else mention song lyrics or
> poetry. Being a writer of both, all I can say is - that each line is
> easily handled as a separate paragraph, with CSS controlling line
> spacing and left/right margins.

But each line is *not* a paragraph. Each line is a line of a stanza
(in my mind, marked up pretty appropriately with the  tag). Or, in
other words, and the end of each line is a line-break.

I think there are only two really appropriate ways to mark-up poetry.
Using  tags, or using paragraphs to mark-up the stanza's and the
 tag to show line-breaks. Possibly using an OL to mark it up as an
ordered list, but that's only an option if you need to have the line
numbers written, and even then I think it's pretty messy.

-- 
Australian Web Designer - http://www.blakehaswell.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Jukka K. Korpela]

On Mon, 21 May 2007, david wrote:

> Update: after posting that, I saw someone else mention song lyrics or
> poetry. Being a writer of both, all I can say is - that each line is
> easily handled as a separate paragraph, with CSS controlling line
> spacing and left/right margins.

I don't think it's adequate to make each line a paragraph. When CSS is 
off, it will look bad. It will _sound_ bad, since speech browsers 
typically pause between paragraphs.

But using  for each line works well, and lets you add left margin 
easily if desired. And it requires no CSS if simple rendering is OK.

There's also the option of using , which is convenient if you now 
have poems in plain text format, possibly with spaces at the start of 
lines to be preserved. The drawback is that the font is monospace by 
default, but this can easily be fixed in CSS. (The opposite approach, 
using ... with white-space: pre might be theoretically better, but 
it doesn't work on some old browsers and causes a mess when CSS is off.)

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Jukka K. Korpela]

On Mon, 21 May 2007, david wrote:

> Why would you need to do all that? You just put your inline quotation or
> program code in its own paragraph and adjust your margins that way. Why
> would you need to use :before or :after pseudo-elements at all?

If I have, say, a text paragraph that mentions a program command inside 
the text, just as it could mention a name, should I switch to completely 
different markup when the command is so long that it should appear on a 
line of its own? I don't think so.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[david]

Philippe Wittenbergh wrote:

> On May 22, 2007, at 3:32 PM, david wrote:
> 
>>> I would be interested in seeing your pure css solution for inserting a
>>> carriage return in the middle of a paragraph (or similar block element
>>> which is semantically a single unit, but nevertheless needs a newline)
>>> without adding other extraneous markup?
>>
>> Why would you need to start a new line in the middle of a paragraph? I
>> think that if you think about it, you'll find you're doing it to put a
>> different item inside it, like a list?
> 
> It is quite common in non-roman languages (CJK comes to mind).
> (to remain on topic)

OK, I'll have to keep that in mind, since my non-English-language 
experience consists of only Roman languages (German, French, Spanish).

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Philippe Wittenbergh]

On May 22, 2007, at 3:32 PM, david wrote:

>> I would be interested in seeing your pure css solution for  
>> inserting a
>> carriage return in the middle of a paragraph (or similar block  
>> element
>> which is semantically a single unit, but nevertheless needs a  
>> newline)
>> without adding other extraneous markup?
>
> Why would you need to start a new line in the middle of a paragraph? I
> think that if you think about it, you'll find you're doing it to put a
> different item inside it, like a list?

It is quite common in non-roman languages (CJK comes to mind).
(to remain on topic)
The alternative markup is wrapping each individual line in  and  
start applying classes to each  for different margins till you go  
mad. And semantically, each unit remains one paragraph

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/