Nabble - Cold Fusion - CSS

RE: border question

2006-11-02T08:24:52Z

Standards Rendering Mode

Left Margin + Left Border + left padding + width + right padding + right
border + right margin = parent content width

Make sure that you initially zero out all margins and paddings in your style
sheet before you start setting them.
All browsers have internal stylesheets that have default values. These
values are not the same across browsers

For all browsers but IE5/6
html * {margin:0; padding:0}

For IE5/6, create a comma delimited list of all block level elements (div,
hx, p, ul, li, etc) and then apply the same margin and padding as above.

That way margin and paddings are zero'd out across browsers and you attain a
much higher level of consistency.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Thursday, November 02, 2006 11:14 AM
To: CSS
Subject: Re: border question

I'm using HTML 4.01 strict and there is always a perceivable difference in
spacing from IE to Mozilla. I've been able to combat it in some cases using
absolute positioning, but that only works for the heading area which has
undergone some SEO alterations. My goal is to be very precise in my page
layout. The left hand bar has 130px. The center has 728px and the right hand
bar has 150px. The result of this is 108px, which is exactly the browser
screen size when resolution is set to 1024 and the page has a scroll bar. I
can make it 1010 without any major loss which gives me 2px for a border
around the content.
If the border is part of the content area, then 730px is 728 content and 2px
border, right? If it's seperate from the content area, then the area is 728
and the border is 2.

> IE7 still has a quirks mode, so if you are not using a doctype of HTML
> 4.01
> strict or xHTML 1.0 strict (which are the only ones that render
> standards mode across browsers, then it will probably use the broken box
type.

>
> Using the xml prolog in IE6 throws it into quirks mode. IE7 will
> render both those doctypes in standards mode regardless of the xml prolog.
>
>
> Sandra Clark
> ==============================
> http://www.shayna.com
> Training in Cascading Style Sheets and Accessibility
>
>
> -----Original Message-----
> From: Rick Root [mailto:rick.root@...]
> Sent: Thursday, November 02, 2006 8:51 AM
> To: CSS
> Subject: Re: border question
>
> Sandra Clark wrote:
>> Rule of thumb is that the borders + margin + padding + content width
>> must equal 100% of the parent's content width.
>>
>> That is the standard box model.
>>
>> IE 5 and IE6 in quirks mode, do it differently. In these browsers,
>> borders and padding are in addition to the content width.
>
> Sandra - have you done any testing of this in IE7? I suppose it's
> exactly the same as it was before.
>
> Rick
>
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3294
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: border question

2006-11-02T08:14:23Z

I'm using HTML 4.01 strict and there is always a perceivable difference in
spacing from IE to Mozilla. I've been able to combat it in some cases using
absolute positioning, but that only works for the heading area which has
undergone some SEO alterations. My goal is to be very precise in my page
layout. The left hand bar has 130px. The center has 728px and the right hand
bar has 150px. The result of this is 108px, which is exactly the browser
screen size when resolution is set to 1024 and the page has a scroll bar. I
can make it 1010 without any major loss which gives me 2px for a border
around the content.
If the border is part of the content area, then 730px is 728 content and 2px
border, right? If it's seperate from the content area, then the area is 728
and the border is 2.

> IE7 still has a quirks mode, so if you are not using a doctype of HTML
> 4.01
> strict or xHTML 1.0 strict (which are the only ones that render standards
> mode across browsers, then it will probably use the broken box type.
>
> Using the xml prolog in IE6 throws it into quirks mode. IE7 will render
> both those doctypes in standards mode regardless of the xml prolog.
>
>
> Sandra Clark
> ==============================
> http://www.shayna.com
> Training in Cascading Style Sheets and Accessibility
>
>
> -----Original Message-----
> From: Rick Root [mailto:rick.root@...]
> Sent: Thursday, November 02, 2006 8:51 AM
> To: CSS
> Subject: Re: border question
>
> Sandra Clark wrote:
>> Rule of thumb is that the borders + margin + padding + content width
>> must equal 100% of the parent's content width.
>>
>> That is the standard box model.
>>
>> IE 5 and IE6 in quirks mode, do it differently. In these browsers,
>> borders and padding are in addition to the content width.
>
> Sandra - have you done any testing of this in IE7? I suppose it's exactly
> the same as it was before.
>
> Rick
>
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3293
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

RE: border question

2006-11-02T06:21:22Z

IE7 still has a quirks mode, so if you are not using a doctype of HTML 4.01
strict or xHTML 1.0 strict (which are the only ones that render standards
mode across browsers, then it will probably use the broken box type.

Using the xml prolog in IE6 throws it into quirks mode. IE7 will render
both those doctypes in standards mode regardless of the xml prolog.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

-----Original Message-----
From: Rick Root [mailto:rick.root@...]
Sent: Thursday, November 02, 2006 8:51 AM
To: CSS
Subject: Re: border question

Sandra Clark wrote:
> Rule of thumb is that the borders + margin + padding + content width
> must equal 100% of the parent's content width.
>
> That is the standard box model.
>
> IE 5 and IE6 in quirks mode, do it differently. In these browsers,
> borders and padding are in addition to the content width.

Sandra - have you done any testing of this in IE7? I suppose it's exactly
the same as it was before.

Rick

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3292
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: border question

2006-11-02T06:07:02Z

Specify a (valid) DOCTYPE and IE6 will work render borders in
accordance with the standard box model.
If IE7 is different to that I'd be very surprised.

On 11/2/06, Rick Root <rick.root@...> wrote:

> Sandra Clark wrote:
> > Rule of thumb is that the borders + margin + padding + content width must
> > equal 100% of the parent's content width.
> >
> > That is the standard box model.
> >
> > IE 5 and IE6 in quirks mode, do it differently. In these browsers, borders
> > and padding are in addition to the content width.
>
> Sandra - have you done any testing of this in IE7? I suppose it's
> exactly the same as it was before.
>
> Rick
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3291
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: border question

2006-11-02T05:50:18Z

Sandra Clark wrote:
> Rule of thumb is that the borders + margin + padding + content width must
> equal 100% of the parent's content width.
>
> That is the standard box model.
>
> IE 5 and IE6 in quirks mode, do it differently. In these browsers, borders
> and padding are in addition to the content width.

Sandra - have you done any testing of this in IE7? I suppose it's
exactly the same as it was before.

Rick

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3290
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

RE: border question

2006-11-02T05:35:39Z

Rule of thumb is that the borders + margin + padding + content width must
equal 100% of the parent's content width.

That is the standard box model.

IE 5 and IE6 in quirks mode, do it differently. In these browsers, borders
and padding are in addition to the content width.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Thursday, November 02, 2006 6:59 AM
To: CSS
Subject: border question

This is puzzling me a little. Lets say I have a page with a content area of
728px wide. This area is inside a table (kill me later) and the table width
is set to 730. Could I set a border of 1px around the whole text area and
still be within the table defined 730?

Bottom line question is: Will a border be part of the content 'box' or in
addition to it?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3289
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

border question

2006-11-02T03:59:25Z

This is puzzling me a little. Lets say I have a page with a content area of 728px wide. This area is inside a table (kill me later) and the table width is set to 730. Could I set a border of 1px around the whole text area and still be within the table defined 730?

Bottom line question is: Will a border be part of the content 'box' or in addition to it?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3288
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: CSS UL IE help

2006-09-26T04:58:59Z

(Ooops, sorry for raising the dead - I just noticed the date on this thread is six months old.)

> Using * works fine with IE6. (In standard mode; haven't bothered
> testing in Quirks mode - anyone who doesn't supply a DOCTYPE deserves
> any incompatibilities they get.)
>
> And I frequently do * {margin: 0px; border-width: 0px; padding: 0px;},
>
> and then set anything that I want edges on (ie: input {border-width:
> 1px;})
> and it doesn't get over-written by the *.
>
>
> --
> Peter
>
> >The problem with that is twofold
> >
> >1) Its universal. I'm not sure if it would overwrite other items
> >2) IE6 and below doesnt support *
> >
> >-----Original Message-----
> >From: Michael T. Tangorre [mailto:mtangorre@...]
> >Sent: Friday, March 03, 2006 11:38 AM
> >To: CSS
> >Subject: RE: CSS UL IE help
> >
> >
> >Just out of curiosity, does this work as well:
> >
> >* {
> > margin: 0;
> > padding: 0;
> >}
> >
>?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3221
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: CSS UL IE help

2006-09-26T04:57:08Z

Using * works fine with IE6. (In standard mode; haven't bothered testing in Quirks mode - anyone who doesn't supply a DOCTYPE deserves any incompatibilities they get.)

And I frequently do * {margin: 0px; border-width: 0px; padding: 0px;},
and then set anything that I want edges on (ie: input {border-width: 1px;})
and it doesn't get over-written by the *.

--
Peter

>The problem with that is twofold
>
>1) Its universal. I'm not sure if it would overwrite other items
>2) IE6 and below doesnt support *
>
>-----Original Message-----
>From: Michael T. Tangorre [mailto:mtangorre@...]
>Sent: Friday, March 03, 2006 11:38 AM
>To: CSS
>Subject: RE: CSS UL IE help
>
>
>Just out of curiosity, does this work as well:
>
>* {
> margin: 0;
> padding: 0;
>}
>
>?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3220
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

RE: Please review - Good CSS?

2006-07-26T09:10:05Z

The CSS doesn't validate.

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http
%3A%2F%2Fwww.fusionauthority.com%2F_%2Fcsslayout.htm

Its okay code, but you shouldn't be using the inline styles. All styles
should be in your external style sheet. Inline styles are deprecated and
they take away from the ease of changing things in your HTML without
worrying about presentation. Content and Presentation should be separate.

Also, way too many classes for my taste. Put ids in your divs and descend
from there.

Example

You currently have.
div style="width: 138px; padding-top: 18px;float:right;">
<div class="shoutbox">
<a href="/quarterly" STYLE="text-decoration: none;">
<h2 class="shouthead">
Fusion Authority Quarterly Update
<img src="/_/faqu1.jpg" alt="Fusion Authority Quarterly Update image"
border="0" align="middle">
</h2>
<p class="shoutbody">
Order the Fusion Authority Quarterly Update and keep your ColdFusion skills
and knowledge up to date.
</p>
</a>
</div>

Better structure would be
<div id="rightside">
<div class="shoutbox">
<h2><a href="/quarterly">Fusion Authority Quarterly
Update></a></h2>
<p>Order the Fusion Authority Quarterly Update and keep your
ColdFusion skills and knowledge up to date.</p>
</div>
</div>

Styling can then be done as
div#rightside{
float: right;
padding-top: 18px;
width: 138px;
}

div#rightside .shoutbox{
background-color: #CCCCFF;
border: 1px solid #000000;
font-size: 100%;
margin: 2px 2px 6px 2px;
overflow: hidden;
width: 130px;
}

div#rightside .shoutbox h2{
background-color: #333366;
background-image: background-image: url(/_/faqu1.jpg);
background-position: // Set it correctly and don't be afraid to
change padding to accommodate it.;
background-repeat: none;
color: #FFFFFF;
display: block;
font-size: 100%;
font-weight: bold;
margin: 2px;
text-align: center;
}

div#rightside .shoutbox p{
color: #000000;
margin: 2px;
}

Your anchor is an inline body element, it should be surrounded by your h2,
not surrounding it. The image can be set via CSS rather than in the HTML,
since it doesn't really add that much to the content.

Descendant Selectors are your friend.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_display&id=1

-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Wednesday, July 26, 2006 10:47 AM
To: CSS
Subject: Re: Please review - Good CSS?

This is what happens with no sleep, you forget to post an url with a
request. :)

http://www.fusionauthority.com/_/csslayout.htm

> I think I've just finished the rewrite of the Fusion Authority site in
> CSS. Actually, it's like 95% done with a single table in the middle of
> the front page to go. Before I go deal with that, I wanted to know
> what people thought of the layout. Is it legal CSS? Does it break on
> some browser I'm not familiar with? What do you think?
>
> I went for a 3 column display and treated the whole thing as blocks on
> a light blue background. The only thing that worries me is if the
> floats are wrong. In order to get each block working will with its
> neighbor, I used a number of floats to the left with the far right
> column being a right float. When I add in the 4th column, I'll be
> doing so by making the far right into a div and having 2 columns in
> the div. It 'feels' like it'll work, but I'm not 100% convinced.
>
> As for why a 4th column, I've seen that 39%+ of my visitors are on a
> 1024 wide monitor or better so I might as well give them some extra
> content.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3044
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: Please review - Good CSS?

2006-07-26T08:47:08Z

This is what happens with no sleep, you forget to post an url with a request. :)

http://www.fusionauthority.com/_/csslayout.htm

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3043
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Please review - Good CSS?

2006-07-26T03:18:05Z

I think I've just finished the rewrite of the Fusion Authority site in CSS. Actually, it's like 95% done with a single table in the middle of the front page to go. Before I go deal with that, I wanted to know what people thought of the layout. Is it legal CSS? Does it break on some browser I'm not familiar with? What do you think?

I went for a 3 column display and treated the whole thing as blocks on a light blue background. The only thing that worries me is if the floats are wrong. In order to get each block working will with its neighbor, I used a number of floats to the left with the far right column being a right float. When I add in the 4th column, I'll be doing so by making the far right into a div and having 2 columns in the div. It 'feels' like it'll work, but I'm not 100% convinced.

As for why a 4th column, I've seen that 39%+ of my visitors are on a 1024 wide monitor or better so I might as well give them some extra content.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3042
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: quote inside or outside anchor

2006-07-24T07:56:55Z

That was my thought too - I'd prefer to specify a special a for all q
tags, rather than the other way around.

On 7/24/06, Sandra Clark <sllists@...> wrote:

> True, unfortunately, the <q> element is not supported by most browsers.
> http://www.aaronsw.com/2002/htmlquotes
>
> I still think structurally, that the anchor should go inside both. But for
> inline elements, it really doesn't matter structurally, do what you think
> will work best with the CSS you are trying to write (do you want the anchor
> to inherit from the quote, or do you want the quote to inherit from the
> anchor?
>
> When I ask myself that question, I still opt to have the anchor inside the
> quote.
>
>
> Sandra Clark
> ==============================
> http://www.shayna.com
> Training in Cascading Style Sheets and Accessibility
>
> CSS HANDS ON
> New York City, October 10-13, 2006.
> http://www.shayna.com/index.cfm?fuseaction=training.syllabus_display&id=1
>
>
>
>
> -----Original Message-----
> From: James Holmes [mailto:james.holmes@...]
> Sent: Monday, July 24, 2006 8:20 AM
> To: CSS
> Subject: Re: quote inside or outside anchor
>
> q is an inline element, not block-level; blockquote is the block-level
> element.
>
> On 7/24/06, Sandra Clark <sllists@...> wrote:
> > Anchor should go inside the <q> or <blockquote> tags. Since an anchor
> > (<a>) tag is an inline layout item, it can be contained by, but cannot
> > contain a block level element (quotes)
>
> --
> CFAJAX docs and other useful articles:
> http://www.bifrost.com.au/blog/
>
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3032
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

RE: quote inside or outside anchor

2006-07-24T07:01:18Z

True, unfortunately, the <q> element is not supported by most browsers.
http://www.aaronsw.com/2002/htmlquotes

I still think structurally, that the anchor should go inside both. But for
inline elements, it really doesn't matter structurally, do what you think
will work best with the CSS you are trying to write (do you want the anchor
to inherit from the quote, or do you want the quote to inherit from the
anchor?

When I ask myself that question, I still opt to have the anchor inside the
quote.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_display&id=1

-----Original Message-----
From: James Holmes [mailto:james.holmes@...]
Sent: Monday, July 24, 2006 8:20 AM
To: CSS
Subject: Re: quote inside or outside anchor

q is an inline element, not block-level; blockquote is the block-level
element.

On 7/24/06, Sandra Clark <sllists@...> wrote:
> Anchor should go inside the <q> or <blockquote> tags. Since an anchor
> (<a>) tag is an inline layout item, it can be contained by, but cannot
> contain a block level element (quotes)

--
CFAJAX docs and other useful articles:
http://www.bifrost.com.au/blog/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3031
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: quote inside or outside anchor

2006-07-24T06:20:11Z

q is an inline element, not block-level; blockquote is the block-level element.

On 7/24/06, Sandra Clark <sllists@...> wrote:
> Anchor should go inside the <q> or <blockquote> tags. Since an anchor (<a>)
> tag is an inline layout item, it can be contained by, but cannot contain a
> block level element (quotes)

--
CFAJAX docs and other useful articles:
http://www.bifrost.com.au/blog/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com//groups/CSS/message.cfm/messageid:3030
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

RE: quote inside or outside anchor

2006-07-24T05:39:41Z

Anchor should go inside the <q> or <blockquote> tags. Since an anchor (<a>)
tag is an inline layout item, it can be contained by, but cannot contain a
block level element (quotes)

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_display&id=1

-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Sunday, July 23, 2006 8:55 PM
To: CSS
Subject: quote inside or outside anchor

Lets say I have a piece of text that is both a quote and an anchor using the
Q and A tags. Should the anchor go inside the Q or should the Q go inside
the anchor? It's a strange and simple question that might just be style, but
it's kind of important for a piece of a redesign in CSS.
Thanks

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/cf_lists/message.cfm/forumid:41/messageid:3029
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Re: quote inside or outside anchor

2006-07-23T21:20:33Z

Since Q and A are both inline elements, it really is just a choice.
Implement it that way that works best with your chosen CSS.

On 7/24/06, Michael Dinowitz <mdinowit@...> wrote:
> Lets say I have a piece of text that is both a quote and an anchor using the Q and A tags. Should the anchor go inside the Q or should the Q go inside the anchor? It's a strange and simple question that might just be style, but it's kind of important for a piece of a redesign in CSS.

--
CFAJAX docs and other useful articles:
http://www.bifrost.com.au/blog/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/cf_lists/message.cfm/forumid:41/messageid:3028
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

quote inside or outside anchor

2006-07-23T18:54:32Z

Lets say I have a piece of text that is both a quote and an anchor using the Q and A tags. Should the anchor go inside the Q or should the Q go inside the anchor? It's a strange and simple question that might just be style, but it's kind of important for a piece of a redesign in CSS.
Thanks

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/cf_lists/message.cfm/forumid:41/messageid:3027
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

CSS Class in NYC!

2006-07-20T14:34:23Z

Registration is now open for my 4 day, Hands On CSS Class October 10-13,
2006 in New York, NY (midtown). Currently there are only 11 seats open, so
register soon to be guaranteed a place.

The Hands on Cascading Style Sheets class is an intensive 4 day workshop
that is aimed at both the beginner and advanced CSS user. For beginners, the
class starts with the basics such as HTML and CSS values and works up to
positioning and table less layouts. Advanced CSS users, will find plenty to
interest them in the first few days as I take them through the proper use of
CSS selectors, quirks vs. standards mode and a through grounding in web
typography. From there, they learn about the box model, which leads them
into positioning and layouts.

Check out the syllabus at http://tinyurl.com/fsv3v

I plan to run a DC class in February of next year. But thought I would post
this here in case anyone is interested in traveling up to New York for the
class, or if you know of someone in the New York area that you think would
be interested, please feel free to forward.

I also run on-site classes in Accessibility and Cascading Style Sheets. If
you are interested in having a class at your company, please contact me.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_display&id=1

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/cf_lists/message.cfm/forumid:41/messageid:3025
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

Matching the text in this image.

2006-06-23T12:11:33Z

http://www.bloodsource.org/images/AboutUs/ServicesPrograms/marrow_registry_image_1.gif

Can anybody help me match the characteristics of the text in this image using CSS? I thing I can get everything except the weight. In the original image work file (PSD) the text is "Strong Anti-Alias" which gives it a bit of extra weight, but not a full bold.

The other characteristics are Arial 11pt #163C63 136.3% line height and 2px|pt kerning.

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2846
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

Re: position:fixed, bottom:0px broken in IE6?

2006-06-07T13:20:01Z

Knowing that it was the position:fixed part causing the problem, I
got it working beautifully using:
http://www.doxdesk.com/software/js/fixed.html

--
Damien McKenna - Web Developer - dmckenna@...
The Limu Company - http://www.thelimucompany.com/ - 407-804-1014
#include <stdjoke.h>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2654
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

Re: position:fixed, bottom:0px broken in IE6?

2006-06-07T13:08:55Z

On Jun 7, 2006, at 2:51 PM, Sandra Clark wrote:
> Position:fixed does not work in IE6. It is one of the items that
> has been
> added to IE7 (not that it helps you right now). There are no
> workarounds
> for it.

Well don't that just suck. Any ideas on alternative techniques to
reach the same conclusion - Javascript, et al? Thanks.

--
Damien McKenna - Web Developer - dmckenna@...
The Limu Company - http://www.thelimucompany.com/ - 407-804-1014
#include <stdjoke.h>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2653
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

Re: position:fixed, bottom:0px broken in IE6?

2006-06-07T13:05:06Z

well, IE7 from dean edwards will make IE6 support it. Sometimes
though, his program can cause more problems than it fixes.

http://dean.edwards.name/IE7/

On 6/7/06, Sandra Clark <sllists@...> wrote:

> Position:fixed does not work in IE6. It is one of the items that has been
> added to IE7 (not that it helps you right now). There are no workarounds
> for it.
>
>
> Sandra Clark
> ==============================
> http://www.shayna.com
> Training in Cascading Style Sheets and Accessibility
> -----Original Message-----
> From: Damien McKenna [mailto:dmckenna@...]
> Sent: Wednesday, June 07, 2006 2:40 PM
> To: CSS
> Subject: position:fixed, bottom:0px broken in IE6?
>
> I'm trying to do a static footer (id="total") in my web page that should be
> on the very bottom of the screen with the rest of the content scrolling
> above it. Right now it works just great in Firefox
> 1.5 and Safari, but IE6 only displays it at the bottom of the other content.
> Any ideas on what I might need to do to get it working? My CSS code is as
> follows:
>
> body {
> margin: 0;
> padding: 0;
> }
>
> /* the static footer */
> #total {
> position: fixed;
> left: 0px;
> bottom: 0px;
> width: 100%;
> padding: 3px 0px 3px 0px;
> height: 25px;
> background-color: #E2ECC6;
> border-top: 1px solid #7B9632;
> font-size: 20px;
> text-align: center;
> }
>
> /* this contains the rest of the page */ #container {
> position: relative;
> width: 770px;
> border-left: 1px solid black;
> border-right: 1px solid black;
> border-bottom: 1px solid black;
> margin: 0 auto;
> padding: 5px;
> background-color: white;
> }
>
> Any ideas folks? Thanks.
>
> --
> Damien McKenna - Web Developer - dmckenna@... The Limu
> Company - http://www.thelimucompany.com/ - 407-804-1014 #include <stdjoke.h>
>
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2652
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: position:fixed, bottom:0px broken in IE6?

2006-06-07T12:51:20Z

Position:fixed does not work in IE6. It is one of the items that has been
added to IE7 (not that it helps you right now). There are no workarounds
for it.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Damien McKenna [mailto:dmckenna@...]
Sent: Wednesday, June 07, 2006 2:40 PM
To: CSS
Subject: position:fixed, bottom:0px broken in IE6?

I'm trying to do a static footer (id="total") in my web page that should be
on the very bottom of the screen with the rest of the content scrolling
above it. Right now it works just great in Firefox
1.5 and Safari, but IE6 only displays it at the bottom of the other content.
Any ideas on what I might need to do to get it working? My CSS code is as
follows:

body {
margin: 0;
padding: 0;
}

/* the static footer */
#total {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
padding: 3px 0px 3px 0px;
height: 25px;
background-color: #E2ECC6;
border-top: 1px solid #7B9632;
font-size: 20px;
text-align: center;
}

/* this contains the rest of the page */ #container {
position: relative;
width: 770px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
margin: 0 auto;
padding: 5px;
background-color: white;
}

Any ideas folks? Thanks.

--
Damien McKenna - Web Developer - dmckenna@... The Limu
Company - http://www.thelimucompany.com/ - 407-804-1014 #include <stdjoke.h>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2651
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

position:fixed, bottom:0px broken in IE6?

2006-06-07T12:40:26Z

I'm trying to do a static footer (id="total") in my web page that
should be on the very bottom of the screen with the rest of the
content scrolling above it. Right now it works just great in Firefox
1.5 and Safari, but IE6 only displays it at the bottom of the other
content. Any ideas on what I might need to do to get it working? My
CSS code is as follows:

body {
margin: 0;
padding: 0;
}

/* the static footer */
#total {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
padding: 3px 0px 3px 0px;
height: 25px;
background-color: #E2ECC6;
border-top: 1px solid #7B9632;
font-size: 20px;
text-align: center;
}

/* this contains the rest of the page */
#container {
position: relative;
width: 770px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
margin: 0 auto;
padding: 5px;
background-color: white;
}

Any ideas folks? Thanks.

--
Damien McKenna - Web Developer - dmckenna@...
The Limu Company - http://www.thelimucompany.com/ - 407-804-1014
#include <stdjoke.h>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2650
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Vertical alignment weirdness?

2006-05-26T14:34:14Z

Doctype is used by browsers to determine rendering mode. No Doctype or Doctypes other than HTML 4.01 Strict, HTML 4.01 Transitional, xHTML 1.0 Transitional or xHTML 1.0 Strict will trigger quirks mode in some browsers. The above referenced doctypes trigger standards mode.

http://hsivonen.iki.fi/doctype/

I ran across that link in my googling on this problem, but it did not answer my question as best as I can tell.

I am using doctypes in all my documents. But I am getting different behavior when I use transitional doctypes versus strict doctypes and I do not understand why.

These doctypes provide the behavior I expect, where the generated images line up with the bottom of the inline box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

These doctypes do not provide the behavior I expect. The generated images only line up with the base line of the inline box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I would like to understand this difference if at all possible.

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2611
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Vertical alignment weirdness?

2006-05-26T13:38:09Z

Doctype is used by browsers to determine rendering mode. No Doctype or
Doctypes other than HTML 4.01 Strict, HTML 4.01 Transitional, xHTML 1.0
Transitional or xHTML 1.0 Strict will trigger quirks mode in some browsers.
The above referenced doctypes trigger standards mode.

http://hsivonen.iki.fi/doctype/

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Ian Skinner [mailto:ian.skinner@...]
Sent: Friday, May 26, 2006 2:52 PM
To: CSS
Subject: Vertical alignment weirdness?

Any idea why the doctype would matter concerning the following CSS?

div#sideNav a:before
{
content: url(left_curve.gif);
vertical-align: bottom;
}

When used with a HTML transitional doctype it works as expected with the
included image aligned to the bottom of the inline a element.

When used with a XHTML strict doctype it does not line up with the bottom of
the inline a element, but rather only lines up with the baseline.

I have not tried other doctypes yet. This has been tested in Firefox; it
obviously does not apply in IE since IE currently does not know how to
handle generated CSS content.

TIA

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any attachments is for the
sole use of the intended
recipient(s) and may contain confidential and privileged information. Any
unauthorized review, use, disclosure or distribution is prohibited. If you
are not the intended recipient, please contact the sender and delete any
copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2610
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

Vertical alignment weirdness?

2006-05-26T12:51:59Z

Any idea why the doctype would matter concerning the following CSS?

div#sideNav a:before
{
content: url(left_curve.gif);
vertical-align: bottom;
}

I have now tried this with other doctypes, it seems to be a matter of strict vs. transitional. The output displays as I would expect in HTML and XHTML transitional, but does not display as I would expect, with the generated content staying on the baseline, in HTML and XHTML strict.

Is there some deference in the behavior of vertical-align in strict mode?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2608
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

Vertical alignment weirdness?

2006-05-26T12:51:32Z

Any idea why the doctype would matter concerning the following CSS?

div#sideNav a:before
{
content: url(left_curve.gif);
vertical-align: bottom;
}

When used with a HTML transitional doctype it works as expected with the included image aligned to the bottom of the inline a element.

When used with a XHTML strict doctype it does not line up with the bottom of the inline a element, but rather only lines up with the baseline.

I have not tried other doctypes yet. This has been tested in Firefox; it obviously does not apply in IE since IE currently does not know how to handle generated CSS content.

TIA

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2609
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Generated content and width

2006-05-25T14:37:50Z

Not one that would be available on all browsers. Frankly since you can't
guarantee what fonts your users have, stick with the common ones. You have
better luck having it display the way you want that way.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Ian Skinner [mailto:ian.skinner@...]
Sent: Thursday, May 25, 2006 4:21 PM
To: CSS
Subject: RE: Generated content and width

Ahh inline.

Then the answer is "No". Inline can be given padding, but not width.

Sandra Clark

I thought so. Looks like I'm off to a CF solution to make sure the content
is always the same number of characters.

Do you have any recommendations on a good monospace font that looks better
then the standard courier?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any attachments is for the
sole use of the intended
recipient(s) and may contain confidential and privileged information. Any
unauthorized review, use, disclosure or distribution is prohibited. If you
are not the intended recipient, please contact the sender and delete any
copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2603
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Generated content and width

2006-05-25T14:20:54Z

Ahh inline.

Then the answer is "No". Inline can be given padding, but not width.

Sandra Clark

I thought so. Looks like I'm off to a CF solution to make sure the content is always the same number of characters.

Do you have any recommendations on a good monospace font that looks better then the standard courier?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2602
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Generated content and width

2006-05-25T14:16:44Z

Ahh inline.

Then the answer is "No". Inline can be given padding, but not width.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Ian Skinner [mailto:ian.skinner@...]
Sent: Thursday, May 25, 2006 4:03 PM
To: CSS
Subject: RE: Generated content and width

You could try setting min-width: width and max-width to the same thing, but
IE doesn't know what min-width or max-width are (hopefully IE7 will)

Sandra Clark

Well since IE doesn't know what to do with :before and :after pseudo class
generated content either, I'm not too worried about it. This is just "what
if" type of experimenting.

Would min-width and max-width have any different effect then a basic width
property on an inline element? I thought inline elements could not be given
dimensions? That seems to be my main problem. I need the elements to be
inline so the generated content is on the same line, but inline elements can
not be given dimension.

Is this true, and if so, is there any kind of work around?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any attachments is for the
sole use of the intended
recipient(s) and may contain confidential and privileged information. Any
unauthorized review, use, disclosure or distribution is prohibited. If you
are not the intended recipient, please contact the sender and delete any
copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2601
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Generated content and width

2006-05-25T14:02:54Z

You could try setting min-width: width and max-width to the same thing, but IE doesn't know what min-width or max-width are (hopefully IE7 will)

Sandra Clark

Well since IE doesn't know what to do with :before and :after pseudo class generated content either, I'm not too worried about it. This is just "what if" type of experimenting.

Would min-width and max-width have any different effect then a basic width property on an inline element? I thought inline elements could not be given dimensions? That seems to be my main problem. I need the elements to be inline so the generated content is on the same line, but inline elements can not be given dimension.

Is this true, and if so, is there any kind of work around?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2600
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

RE: Generated content and width

2006-05-25T13:48:54Z

You could try setting min-width: width and max-width to the same thing, but
IE doesn't know what min-width or max-width are (hopefully IE7 will)

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Ian Skinner [mailto:ian.skinner@...]
Sent: Thursday, May 25, 2006 2:02 PM
To: CSS
Subject: Generated content and width

I'm pretty sure the answer is no, but before I give up I thought I would ask
HOF.

Is there any possible way to use the generated content pseudo classes
:before and :after on a series of inline elements at the same time providing
a consistent, defined width for these elements regardless of their content?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any attachments is for the
sole use of the intended
recipient(s) and may contain confidential and privileged information. Any
unauthorized review, use, disclosure or distribution is prohibited. If you
are not the intended recipient, please contact the sender and delete any
copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2599
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

Generated content and width

2006-05-25T12:02:12Z

I'm pretty sure the answer is no, but before I give up I thought I would ask HOF.

Is there any possible way to use the generated content pseudo classes :before and :after on a series of inline elements at the same time providing a consistent, defined width for these elements regardless of their content?

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

---------
| 1 | |
--------- Binary Soduko
| | |
---------

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2598
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54