Re: [css-d] Alternative format for definitions?
On Mon, 26 Apr 2010 21:33:16 -0700, Thierry Koblentz
n...@tjkdesign.com wrote:
Sample text:
_Technicians_ are those individuals who perform ...
I see a problem with your markup though:
DL class=inline-definition
DTTechnicians/DT
DDare those individuals who perform.../DD
/DL
I don't think there is room for are those in there.
Imho it should be:
DTTechnicians/DT
DDIndividuals who perform.../DD
NO! The Sample text represents what is in the original paper
(actually PDF) document; it is /specifically/ that style of definition
that I wish to reproduce in the HTML.
Anyway, I'd start playing with something like the following: first
reset all
relevant margin and padding values (as DL and its children are known to
have
nonzero default values for them), then make the DT a left-floated
element
and apply the desired styling to it, e.g.
dl, dt, dd { margin: 0; padding: 0; }
dt { float: left; font-style: italic; }
[...]
dt { padding-right: 0.3em; }
Because float is used to style the DTs I'd say it may be a good idea to
use them to clear too.
And to be safe, applying overflow:hidden;zoom:1 (or your favorite block
formatting context/hasLayout trigger) on the DL would also prevent potential
issues related to these floats.
Why overflow: hidden, and why do I need to 'trigger HasLayout'?
--
Jeff Zeitlin, Editor
Freelance Traveller
The Electronic Fan-Supported
Traveller® Fanzine and Resource
edi...@freelancetraveller.com
http://www.freelancetraveller.com
http://come.to/freelancetraveller
http://freelancetraveller.downport.com/
®Traveller is a registered trademark of
Far Future Enterprises, 1977-2009. Use of
the trademark in this notice and in the
referenced materials is not intended to
infringe or devalue the trademark.
Freelance Traveller extends its thanks to the following
enterprises for hosting services:
CyberNET Web Hosting (http://www.cyberwebhosting.net)
The Traveller Downport (http://www.downport.com)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative format for definitions?
Freelance Traveller wrote:
On Mon, 26 Apr 2010 21:33:16 -0700, Thierry Koblentz
n...@tjkdesign.com wrote:
[...]
I don't think there is room for are those in there.
Imho it should be:
DTTechnicians/DT
DDIndividuals who perform.../DD
NO! The Sample text represents what is in the original paper
(actually PDF) document; it is /specifically/ that style of definition
that I wish to reproduce in the HTML.
Anyway, I'd start playing with something like the following: first
reset all
relevant margin and padding values (as DL and its children are known to
have
nonzero default values for them), then make the DT a left-floated
element
and apply the desired styling to it, e.g.
dl, dt, dd { margin: 0; padding: 0; }
dt { float: left; font-style: italic; }
[...]
dt { padding-right: 0.3em; }
Because float is used to style the DTs I'd say it may be a good idea to
use them to clear too.
And to be safe, applying overflow:hidden;zoom:1 (or your favorite block
formatting context/hasLayout trigger) on the DL would also prevent potential
issues related to these floats.
Why overflow: hidden, and why do I need to 'trigger HasLayout'?
Overflow hidden creates a block formatting context (BFC). The same as
hasLayout does. Overflow hidden triggers hasLayout in IE7 but you
would need to trigger hasLayout in IE6 by another method (height: 1%
or zoom: 1). The BFC method will only work if there is only one set of
dt and dd in a definition list.
I would suggest something like this if there are more than one set of
dt and dd within a list.
#wrapper2 dl {
margin:1em 0 0;
}
#wrapper2 dl dt {
width:36%;
margin:0 5px 1em 0;
padding:0;
float:left;
clear:both;
}
#wrapper2 dl dd {
width:62%;
margin:0 0 1em;
padding:0;
float:left;
}
#wrapper2 dl dt a {
display:block;
margin:0;
padding:5px 10px;
}
#wrapper2 dl p {
padding:5px 0;
margin:0;
}
This is the reverse (floated left instead of right) of the definition
list that appear on this page and other similar pages.
http://css-class.com/test/css/index.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jpg image resizing
Tested in IE 7 and 8, FF 3.6, Opera, Chrome, Safari Win on Win XP sp3 PC. Any suggested fixes greatly appreciated. Chrome 5.02, Firefox 3.6, Opera 10.5, IE 7, Safari 4.05 all on MAC - the image stays with fixed dimensions. No issues here. If the intended is to have the image to resize along with the text, then, em dimensions on the image will do it and, amazingly enough (at least on my test cases) it doesn't seem to give the distortion expected. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jpg image resizing
MEM wrote: Tested in IE 7 and 8, FF 3.6, Opera, Chrome, Safari Win on Win XP sp3 PC. Any suggested fixes greatly appreciated. Chrome 5.02, Firefox 3.6, Opera 10.5, IE 7, Safari 4.05 all on MAC - the image stays with fixed dimensions. No issues here. Regards, Márcio Go to Safari and SeaMonkey 1024 and bang the + key until you can't bang it any more. ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jpg image resizing
2010/4/27 David Laakso da...@chelseacreekstudio.com: MEM wrote: Tested in IE 7 and 8, FF 3.6, Opera, Chrome, Safari Win on Win XP sp3 PC. Any suggested fixes greatly appreciated. Chrome 5.02, Firefox 3.6, Opera 10.5, IE 7, Safari 4.05 all on MAC - the image stays with fixed dimensions. No issues here. Regards, Márcio Go to Safari and SeaMonkey 1024 and bang the + key until you can't bang it any more. ~d Ups. :s You right. Again. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative format for definitions?
Sample text: _Technicians_ are those individuals who perform ... I see a problem with your markup though: DL class=inline-definition DTTechnicians/DT DDare those individuals who perform.../DD /DL I don't think there is room for are those in there. Imho it should be: DTTechnicians/DT DDIndividuals who perform.../DD NO! The Sample text represents what is in the original paper (actually PDF) document; it is /specifically/ that style of definition that I wish to reproduce in the HTML. I understand what you want to use, I'm just saying that I'm not sure about the semantics. DD stands for Definition Description so I don't think these descriptions should start with are those. I think it should be a standalone sentence. You are creating a bridge between DTs and DDs that should not exist (imho). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative format for definitions?
On Tue, 27 Apr 2010, Thierry Koblentz wrote: Sample text: _Technicians_ are those individuals who perform ... I see a problem with your markup though: DL class=inline-definition DTTechnicians/DT DDare those individuals who perform.../DD /DL I don't think there is room for are those in there. Imho it should be: DTTechnicians/DT DDIndividuals who perform.../DD NO! The Sample text represents what is in the original paper (actually PDF) document; it is /specifically/ that style of definition that I wish to reproduce in the HTML. I understand what you want to use, I'm just saying that I'm not sure about the semantics. DD stands for Definition Description so I don't think these descriptions should start with are those. I think it should be a standalone sentence. You are creating a bridge between DTs and DDs that should not exist (imho). Or, to put it another way, what the OP really wants is not a DL. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jpg image resizing
Morning All I wrote Morning all At www.oldcurmudgeon.net I'm having a small problem with an image ( the old curmudgeon ) expanding into the main content at ctrl + 4 font sizing and larger on a 1024 x 768 canvas. snipped a bit David L replied There are several ways to do it. Simplest of them is to make the left-column a fixed width (wide enough to contain the fixed width/height image), and leave the right column to expand/contract in width depending on user screen resolution. This layout will accomplish that: http://blog.html.it/layoutgala/LayoutGala24.html More difficult methods might include keeping both columns a percent width with an overall min/max width; and, assigning max-width: 96% to the image, but not hard coding its width or height in the source file. Done correctly the image will reduce in size retaining its relative proportions in narrower windows such as 640 and 800 and the columns will not overlap each other. Best, ~d Thanks David ... I'll play with both suggestions and see what fits best for this client. Both sound workable. As always, thanks for taking the time to look and offer workable suggestions. Jim Nannery __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jpg image resizing
Morning All Yesterday I wrote At www.oldcurmudgeon.net I'm having a small problem with an image ( the old curmudgeon ) expanding into the main content at ctrl + 4 font sizing and larger on a 1024 x 768 canvas. Is there a CSS way to contain the image. snipped a bit here for brevity Any suggested fixes greatly appreciated. David H wrote back Do you mean page zoom rather than font (text) sizing? I don't see a problem with the image on increased text size. Anyway, testing in IE 8 (including compatibility mode), Safari (Mac), and Firefox 3.5 (Mac) I find this works fairly well: 1. Take out the explicit width and height from the IMG tag 2. Make the max-width: 100%; in the #image img rule Hope this helps. Cordially, David -- Thanks David H for taking time to test this. Yes, page zoom is probably the more correct context for what I was testing. Your suggestions parallel David L's. Will work on the page later this afternoon and see what happens. Again, thanks for the suggestions. Jim Nannery www.oldcurmudgeon.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] testing keyboard accessibility
jeffrey morin wrote: Hi, I want to test more keyboard accessibilty and I am trying to do this in Firefox 3.6. For Safari using the tab key will at least cycle through all the links and form elements but Firefox only goes to forms and skips everything else. I tried the cursor to navigate the page option but it isn't really good. Is there something that anyone can recommend for testing keyboard navigation with CSS in Firefox? Thanks, Jeff These may help... http://support.mozilla.com/en-US/kb/Accessibility http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/ ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] testing keyboard accessibility
On Tue, Apr 27, 2010 at 12:36 PM, David Laakso da...@chelseacreekstudio.com wrote: jeffrey morin wrote: Hi, I want to test more keyboard accessibilty and I am trying to do this in Firefox 3.6. For Safari using the tab key will at least cycle through all the links and form elements but Firefox only goes to forms and skips everything else. I tried the cursor to navigate the page option but it isn't really good. Is there something that anyone can recommend for testing keyboard navigation with CSS in Firefox? Thanks, Jeff These may help... http://support.mozilla.com/en-US/kb/Accessibility http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/ ~d Thanks David, I couldn't get the 456bereastreet method to work for some reason but i'll check out the mozilla page you sent. Thanks for the links. Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative format for definitions?
snipped: _Technicians_ are those individuals who perform ... I see a problem with your markup though: DL class=inline-definition DTTechnicians/DT DDare those individuals who perform.../DD /DL I don't think there is room for are those in there. Imho it should be: DTTechnicians/DT DDIndividuals who perform.../DD I understand what you want to use, I'm just saying that I'm not sure about the semantics. DD stands for Definition Description so I don't think these descriptions should start with are those. I think it should be a standalone sentence. You are creating a bridge between DTs and DDs that should not exist (imho). Or, to put it another way, what the OP really wants is not a DL. Can you find any support for this assertion in the spec? http://www.w3.org/TR/html4/struct/lists.html#h-10.3 I'm seeing neither normative nor informative specifications for the linguistic grammar of a description. The HTML spec says nothing about standalone sentences or fragments in this context, probably because that would be outside its purview. If you check I think you'll find that most dictionary definitions are not complete sentences, e.g. http://google.com/search?q=define%3Atechnician. The OP's semantic content is clearly that of a definition list: terms and descriptions. What constructive goal do we achieve by attempting to constrain the grammar (in any given human language) of document content? Curiously, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative format for definitions?
_Technicians_ are those individuals who perform ... I see a problem with your markup though: DL class=inline-definition DTTechnicians/DT DDare those individuals who perform.../DD /DL I don't think there is room for are those in there. Imho it should be: DTTechnicians/DT DDIndividuals who perform.../DD NO! The Sample text represents what is in the original paper (actually PDF) document; it is /specifically/ that style of definition that I wish to reproduce in the HTML. I understand what you want to use, I'm just saying that I'm not sure about the semantics. DD stands for Definition Description so I don't think these descriptions should start with are those. I think it should be a standalone sentence. You are creating a bridge between DTs and DDs that should not exist (imho). Or, to put it another way, what the OP really wants is not a DL. I agree, I believe a better approach would be to use dfn pdfnTechnicians/dfn are those individuals who perform.../p I'm sorry for this OT post, but DLs are already so misused... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative format for definitions?
Hi Paul, I understand what you want to use, I'm just saying that I'm not sure about the semantics. DD stands for Definition Description so I don't think these descriptions should start with are those. I think it should be a standalone sentence. You are creating a bridge between DTs and DDs that should not exist (imho). Or, to put it another way, what the OP really wants is not a DL. Can you find any support for this assertion in the spec? http://www.w3.org/TR/html4/struct/lists.html#h-10.3 I'm seeing neither normative nor informative specifications for the linguistic grammar of a description. The HTML spec says nothing about standalone sentences or fragments in this context, probably because that would be outside its purview. If you check I think you'll find that most dictionary definitions are not complete sentences, e.g. http://google.com/search?q=define%3Atechnician. The OP's semantic content is clearly that of a definition list: terms and descriptions. What constructive goal do we achieve by attempting to constrain the grammar (in any given human language) of document content? I think the distinction to make is that DDs are not definitions, but *descriptions*. Also, as I mention in my previous post, I do not agree that the OP's semantic content is clearly that of a definition list, I'd say dfn would be a better choice. Anyways, I think we should move this discussion to the WSG list... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
