Re: [css-d] Where do I make a suggestion for the Policies page?

2009-08-05 Thread Benjamin Hawkes-Lewis
On 05/08/2009 08:32, Michael Adams wrote:
 In fact the subscription page insists the archives are only available to
 members. Either policy has changed or some member is pushing the mails
 to a google list?

Looks like someone subscribed using mail-archive.com in February this year:

http://www.mail-archive.com/css-d@lists.css-discuss.org/mail15.html

--
Benjamin Hawkes-Lewis

__
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] Where do I make a suggestion for the Policies page?

2009-08-05 Thread Benjamin Hawkes-Lewis
On 05/08/2009 08:43, Benjamin Hawkes-Lewis wrote:
 Looks like someone subscribed using mail-archive.com in February this year:

 http://www.mail-archive.com/css-d@lists.css-discuss.org/mail15.html

Also looks like the list admin could request deletion of their archive:

http://www.mail-archive.com/faq.html#delete

--
Benjamin Hawkes-Lewis
__
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] The future of CSS: create markup for presentational purposes?

2009-06-24 Thread Benjamin Hawkes-Lewis
On 24/6/09 16:19, Cristian Palmas wrote:
 So, I was wondering if there is someone working on CSS implementation in
 order to avoid the usage of extra markup. For example, a CSS way of creating
 on the fly markup elements ONLY for presentational purposes.
 Have any of you ever heard about something like that?

In combination with CSS 2's :before and :after, the proposed CSS3 
selector ::outside would provide you most of the hooks you need without 
polluting the DOM:

http://www.w3.org/TR/css3-content/

I'm unaware of implementations of ::outside.

Meanwhile while proposed improvements to background-image (allowing 
multiple images) and borders (rounded borders, border images) would 
reduce the need for hooks. There are already experimental 
implementations of these (e.g. -webkit-border-radius).

--
Benjamin Hawkes-ewis





__
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] [OT] CSS Problem with a tags on IE 6\7

2009-04-04 Thread Benjamin Hawkes-Lewis
On 4/4/09 00:48, Christopher R wrote:
 I understand but I have the exact same code on another page and it validates 
 so although
 reading up is beneficial, there has to be something minor that would remove 
 all errors !

Surely consulting the HTML validator output tells you what errors have 
crept into the first page? But anyhow …

What's the URL of the other page?

What's the diff between the two HTML documents?

http://en.wikipedia.org/wiki/Diff

--
Benjamin Hawkes-Lewis
__
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] styling a legend

2009-02-14 Thread Benjamin Hawkes-Lewis
On 14/2/09 03:44, Rick Pasotto wrote:
 Do you mean put the image in the html instead of in the css?

If you don't put it in the HTML, there will be no indication that fields 
are required to end users whose user-agent-applied styles enforce 
differing background colors or users browsing with publisher CSS applied 
but images off.

Yes, it is a regrettable breach of separation of concerns.

--
Benjamin Hawkes-Lewis

__
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] Is there a way to get lists to use decimal points?

2009-02-08 Thread Benjamin Hawkes-Lewis
On 5/2/09 23:17, Sandy wrote:
 Do screen readers not read generated list counters?

JAWS and Window-Eyes do not currently read text inserted with the 
content property, although they do reflect list-style-type values.

 How would you let a screen reader know that you are in a list if you are 
 using real numbers?

[snip]

 Is there another reason than accessibility that numbers as real text are
 what we need?

Well, if the numbers are part of the content (e.g. certain legal 
documents), then they belong in the content layer (HTML) not the 
skinning layer (CSS).

Remember a user isn't necessarily seeing your skin; they might be 
applying their own CSS or viewing with a user agent that doesn't support 
CSS.

There's no satisfying way of doing this, but the following are all 
viable approaches:

ul
 li1. foo/li
 li2. bar/li
/ul

p1. foo/p
p2. bar/p

dl
dt1./dt
ddfoo/dd
dt2./dt
ddbar/dd
/dl

h21./h2
pfoo/p
h22./h2
pbaz/p

Personally, I'd normally go for the first option.

I would avoid:

ol
 li1. foo/li
 li2. bar/li
/ol

since you could end up with the user being presented a confusing 
double-numbering of items (once from the ol and once from the text 
content of the li).

--
Benjamin Hawkes-Lewis

__
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] hover on input tag in IE6

2009-01-23 Thread Benjamin Hawkes-Lewis

On 23/1/09 21:28, Dermot Ward wrote:

I think this is a css problem, but if it's not I apologise in advance.

I'm trying to style a php input tag for hover and it works great in
Firefox and Opera but alas not in IE6 which is
the version I use for testing IE, on the assumption that if it works in
6 it should work in more recent versions.


IE6 only supports the :hover selector on links (a href).

When the client has JS enabled, you can fake :hover support in IE6 by 
adding and removing a hover class on mouseenter and mouseleave 
events and styling .hover as well as :hover:


http://www.quirksmode.org/js/events_mouse.html

http://fn-js.info/snippets/addevent

--
Benjamin Hawkes-Lewis
__
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] hover on input tag in IE6

2009-01-23 Thread Benjamin Hawkes-Lewis

On 23/1/09 22:05, Dermot Ward wrote:

I guess using images is best in the long run so.


Not sure what you mean.

--
Benjamin Hawkes-Lewis
__
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] Pragmatic look at our CSS future - ripped from: The CSS Overlords

2009-01-18 Thread Benjamin Hawkes-Lewis
On 18/1/09 23:32, Gunlaug Sørtun wrote:
 I suggest not using the browser-specific variants for real - only the
 standardized ones, and wait till browsers catches up with and stabilizes
 on the relevant standards - and us.

 If we use browser-specific extensions outside our sandboxes, we may
 create unnecessary splits between browsers that are otherwise more or
 less on the same level, and may in some cases promote inferior browsers
 over superior ones on some pretty unstable grounds. We may also create
 the need to go back and fix things once the standard versions kicks in,
 as test-versions and standard-versions may not give the same results.

Neither using experimental vendor-specific CSS properties or using 
unprefixed proposed CSS3 properties (they're not standardized!) is 
safe. But I'd have thought the former is safer, since vendors try not to 
implement two experimental versions and the proposed property is subject 
to change based on the experience of those implementations.

--
Benjamin Hawkes-Lewis

__
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] Pragmatic look at our CSS future - ripped from: The CSS Overlords

2009-01-18 Thread Benjamin Hawkes-Lewis
On 19/1/09 02:10, Gunlaug Sørtun wrote:
 Vendor-specific CSS properties are for the most part safe to use in that
 they don't end up disturbing other browsers - although I have seen that
 happen too.

I can imagine implementations of vendor-specific CSS properties changing 
between versions (but then this also happens with standardized 
properties). I'd be surprised to find a vendor-specific CSS property 
(that is, a prefixed vendor-specific CSS property) affecting another web 
engine and interested as to how that would even happen - it sounds like 
a parsing bug. Do you have an example of this?

 Note that *nothing in CSS gets standardized* until there are at least
 two interoperable implementations - at least two browsers must have
 pretty identical and flawless support for what's only a suggestion. This
 means we have to use the proposed properties/values if we want them to
 become recommended parts of standards.

Why do you think the two interoperable implementations rule means we 
need to author mainstream CSS based on guesses about how future 
implementations will work?

That could be bad for the development of CSS, because improving the spec 
for those features could break web content that relied on those assumptions.

Readers may wish to review the introductions to -

http://www.w3.org/TR/CSS21/

and

http://www.w3.org/TR/css3-mediaqueries/

- for example statements of the two interoperable implementations rule.

--
Benjamin Hawkes-Lewis
__
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] !important declaration on print.css

2008-12-31 Thread Benjamin Hawkes-Lewis
On 31/12/08 17:50, Angela French wrote:
 I am creating a print style sheet (media=print).  Most of the declarations 
 in the style sheet are requiring !important in order to take effect.
 My print.css style sheet is the last to be loaded by the browser (last in the 
 list of linked style sheets).  Can anyone tell me why it is necessary for me 
 to add the !important declaration in order for the style to take effect?

It sounds like you have targeted the earlier stylesheets at all media 
types. Try setting them to media=screen.

--
Benjamin Hawkes-Lewis
__
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] !important declaration on print.css

2008-12-31 Thread Benjamin Hawkes-Lewis
On 31/12/08 18:07, Angela French wrote:
 Yikes!  Just tried your suggestion, but then I would have to style every 
 element in my print.css file.
 I think I'll just stick with the !important where I need it.

You shouldn't need !important at all. If your print stylesheet comes 
after the screen stylesheet and uses selectors with the same 
specificity, then a later declaration at the same specificity will 
overwrite an earlier one.

Two approaches:

1. Overwrite all media styles as needed in your print stylesheet.
2. Have a base stylesheet for both print and screen, then individual 
additional stylesheets adding further styles for print and screen 
specifically.

--
Benjamin Hawkes-Lewis
__
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] Menu-issue

2008-12-29 Thread Benjamin Hawkes-Lewis
On 29/12/08 09:24, Ib Jensen wrote:
 The menu you have is extremely unusable - even
 in the browsers in which it works. For that type of menu you really should
 be using a scripted one.

 Any suggestions in this direction.

If you want something out of the box:

* Ultimate Drop Down Menu: http://www.udm4.com/
* Yahoo! User Interface menu: http://developer.yahoo.com/yui/menu/

The fundamentals of keyboard accessibility here are reasonably 
straightforward.

If submenus are to be accessible with the keyboard, ensure you can open, 
select, and close menu items with the keyboard. Using standard controls 
(buttons and links) with click handlers is an easy way to achieve 
this. Counter-intuitively any activation of a standard control (e.g. by 
pressing enter with the keyboard, by speaking the control name to speech 
recognition software, by pressing on a iPhone touchscreen) fires a 
'click' event - it doesn't need to be a mouse.

Alternately, you might choose to make top-menu items hub pages. In that 
case, you might choose to make the top-menu items simple links, with 
hover listeners attached to show dropdowns. That way, when used from the 
keyboard, you'd activate the links to go through to the hubpage and 
delve further into the website from there.

Either way, ensure that hidden items either cannot be focused with the 
keyboard or are made visible on focus; it's crucial that users 
understand where focus is and what happens if (for example) they press 
Enter. (You'll likely want to track focus and blur events for this.)

Personally, I'd avoid dropdowns for a content-driven website. I think 
it's better to keep the options presented to the user simple, relevant, 
and visible, rather than arrayed in all their complexity hidden behind 
functionality that varies from site to site.

--
Benjamin Hawkes-Lewis

__
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] Menu-issue

2008-12-28 Thread Benjamin Hawkes-Lewis
On 28/12/08 16:58, Ib Jensen wrote:
 Do I have to write a class or something to get the position or .

You can use descendant selectors to target lists that are descendants of 
other lists:

http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm

That's likely all you need here.

 Walidating the template says a lot of errors. Is't because of the
 Menu-structure or just bad coding.

Verbose validator output: http://tinyurl.com/97gl83

Bad coding, mostly reflecting a failure to always open and close tags 
are required in XHTML:

http://www.w3.org/TR/xhtml1/#h-4.3

(Note also: http://www.w3.org/TR/xhtml1/#C_2 if you try to fix this.)

I'd recommend removing errors from your HTML layer before making any 
further CSS changes.

--
Benjamin Hawkes-Lewis


__
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] How to override CSS hosted elswhere

2008-12-28 Thread Benjamin Hawkes-Lewis
On 28/12/08 21:41, Tim Arnold wrote:
 Making styles either more specific, or adding the !important modifier will
 also help in many of these situations

!important might appear to help, but it has the regrettable side effect 
of overriding user stylesheets:

http://www.w3.org/TR/CSS21/cascade.html#important-rules

--
Benjamin Hawkes-Lewis
__
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] How to override CSS hosted elswhere

2008-12-28 Thread Benjamin Hawkes-Lewis
On 28/12/08 22:21, Felix Miata wrote:
 On 2008/12/28 22:16 (GMT) Benjamin Hawkes-Lewis composed:

 On 28/12/08 21:41, Tim Arnold wrote:

 Making styles either more specific, or adding the !important modifier will
 also help in many of these situations

 !important might appear to help, but it has the regrettable side effect
 of overriding user stylesheets:

 http://www.w3.org/TR/CSS21/cascade.html#important-rules

 Read 2nd paragraph, 2nd sentence, 2nd clause again. If it wasn't for
 !important, user stylesheets would be virtually useless.

Sorry. Looks like I should have been citing CSS1:

http://dbaron.org/css/user/cascade#origin

Another problem with using !important is you end up in arms race with 
people styling widgets who will then use !important themselves.

--
Benjamin Hawkes-Lewis
__
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] Chrome and css

2008-12-20 Thread Benjamin Hawkes-Lewis
On 20/12/08 14:29, Luc wrote:
   Now that Chrome left the beta stage
   (http://googleblog.blogspot.com/2008/12/google-chrome-beta.html)
   i guess we have 1 more beast to tame. At the moment i'm installing
   it but i was wondering if any one here is already using it and if
   so, what major css glitches does it have, i.o.w. does it have some
   IE6 like standard bugs and workarounds?

Its CSS engine is WebKit like Safari, so if you've already tested in 
Safari (which has a significantly larger user base), things shouldn't be 
too bad. It's the JS engine and UI in Chrome which are novelties.

--
Benjamin Hawkes-Lewis
__
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] suckerfish no dropping down in IE6 (and a bonus question)

2008-12-18 Thread Benjamin Hawkes-Lewis
Scott Thigpen wrote:
 So I'm using suckerfish now for this site
 www.sthig.com/unisource
 
 all works well but nothing operates in IE6.  Also, it's pushed my right hand
 column off too...I don't know what gives.  Could someone help please? (I'm
 kind of in a panic, too)

IE6 doesn't support :hover. Hence the sfhover.js script which adds a 
sfhover class as a replacement. Of course, that won't help you if you 
don't target the same CSS at both :hover and .sfhover, and you don't:

 li:hover ul, li.over ul {
   display: block;
 }
 #nav li:hover ul, #nav li.sfhover ul {
   left: auto;
 }



--
Benjamin Hawkes-Lewis
__
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] How to Apply CSS to Title Tag

2008-12-18 Thread Benjamin Hawkes-Lewis
Kevin Doyle wrote:
 Is the HTML title tag not capable of receiving CSS styles?  I'm
 manipulating upper/lower case of some database data to make it more
 readable.

Best to do this serverside rather than in CSS. For example, 
text-to-speech agents will still get the original case version, and may 
confuse uppercase with abbreviations (US with U.S.).

--
Benjamin Hawkes-Lewis
__
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] Ordered List to Right of float?

2008-12-18 Thread Benjamin Hawkes-Lewis
Susan M. Totman wrote:
 How do I get the bullets to respect the margin around the image?

Approaches include using list-style-position: inside; and using 
background-image for the bullet rather than a list-style.

--
Benjamin Hawkes-Lewis
__
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] spry giving me grief

2008-12-17 Thread Benjamin Hawkes-Lewis
Scott Thigpen wrote:
 I rarely use spry but a client is insisting on a drop down menu.  So I'm
 trying to implement one through Dreamweaver's spry.  All is well but I've
 run into a styling issue.
 
 If you go here http://www.sthig.com/unisource/ and then mouse over green
 discussions you'll see that the drop downs all bunch together and won't
 stack.  What do I need to do to make them stack?

Well, they submenu items are floated so when there's room they'll bunch 
together. So try clearing floats to the left of each submenu item. WFM 
in Firefox 3 Mac anyhow.

ul.MenuBarHorizontal li li {
clear: left;
}

If that doesn't fix your problem, please specify what browser(s) the 
problem occurs in.

--
Benjamin Hawkes-Lewis
__
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] alignment question

2008-12-17 Thread Benjamin Hawkes-Lewis
Angela French wrote:
 If I have a container div that is  400px high and I place another div
 inside it that is only 200px high and want the next one to sit at the
 bottom of its parent container, what css property should I use?  I tried
 vertical-alignment:bottom, and vertica;-alignment:baseline in the parent
 container, but I can't get that child div to sit at the bottom.

That entirely depends on what's supposed to go in the 200px above.

.outer {
padding-top: 200px;
}

might work for you.

vertical-align affects vertical alignment within a line (or table cell) 
not within a block box.

--
Benjamin Hawkes-Lewis
__
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] Horizontal nav displays vertically in IE

2008-12-15 Thread Benjamin Hawkes-Lewis
Kim Brooks Wei wrote:
 I've noticed that in a few IE browsers [not sure which version/s] my 
 horizontal menu is displaying as a vertical list. In those browsers, 
 the default style type shows ups too. What's a more reliable way of 
 creating the effect I'm after?

See the (horizontal) list tutorials at http://css.maxdesign.com.au/

--
Benjamin Hawkes-Lewis




__
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] Knotty Little Display Problem

2008-12-14 Thread Benjamin Hawkes-Lewis
robmercer wrote:
 I can't understand why there is green below the sidebar div.  It should be
 blue since sidebar is within container!

But:

1. div#container isn't styled blue. (Check with Firebug.)
2. div#container contains two floated children (div#content and 
div#sidebar). When you float an element, you move it out of normal flow. 
When overflow is visible on a container, its height is determined
by the content in normal flow. Since there's no content in normal flow, 
it's height is 0. To make the container expand to contain the floats, 
you need to use one of the normal methods for containing floats:

http://www.ejeliot.com/blog/59

For example:

div#container {
 background-color: blue;
 overflow: hidden;
}

If you're trying to make equal height columns, the classic faux columns 
article might help you:

http://www.alistapart.com/articles/fauxcolumns/

--
Benjamin Hawkes-Lewis
__
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] can apply style inline but not in style sheet

2008-12-11 Thread Benjamin Hawkes-Lewis
Angela French wrote:
 On this page: http://checkoutacollege.com/  I am trying to apply a
 background color in back of the Ready/Set/Go buttons (of the same color)
 so that if the images are turned off, the text can still be read.  (I'd
 like to just get rid of the beveled images before long!).
 
  
 
 Do accomplish this, I believe I need to create a div and set my h2
 and my background image in this div so that the background color isn't
 applied to the entire column.

Seems to me you don't need a div at all. Negative margins can create the 
box you need:

.home-center h2 {
 margin: 0 -10px .8em -10px;
 padding: 0 10px;
}

 I created the div in my html and I can
 style it inline to get it just how I want it.  But when I try to put the
 div styles in the style sheet instead, none of them render. Since I
 created a unique ID for this new div, I don't believe that anything
 should be overriding it.  I tried referencing it directly and as a child
 selector of its parent div (which I shouldn't have to do since it's
 unique), but nothing worked.
 
  
 
 I'm hoping one of you can tell me what the hold up is.  

As far as I can tell, the pasted link doesn't include this DIV.

Trying showing us the code you're trying to use.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] IE list-style-type bug

2008-12-04 Thread Benjamin Hawkes-Lewis
wlb wrote:
 Greetings!
 
 I had a page with several  ordered lists ol and styled them with
 lower-alpha, which produced lists of all number 1s with no sequential
 numbering. I tried several other possibilities with similar results.

It sounds like your problem might be triggering hasLayout on the list 
items. But if you can produce a simple test case with valid HTML 4.01 
Strict that shows the problem, that would help.

Compare:

* http://www.satzansatz.de/cssd/onhavinglayout.html
* http://www.brunildo.org/test/IEul1.html
* http://www.brunildo.org/test/ul1px.html


 Finally, I gave up and changed the lists to ul tags, but I've read that
 this also can cause problems and that even list-style-type: none; doesn't
 work in IE 5.5, 6.0, and 7.0.

Read where?

 Should I just give up on lists altogether or is there some workaround I'm
 missing.

There are plenty of bugs with lists (as with most other bits of the 
stack). That said, I've not met a bug with lists that ever made me think 
of giving up on them.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Can't put #8220; in a blockquote?

2008-11-23 Thread Benjamin Hawkes-Lewis
Peter Bradley wrote:
 Neither of those seem to work, either.
 
 I've posted the page to:
 
 http://www.apvx95.dsl.pipex.com/SpanishIntensives/feedback.html
 
 You'll see that the first blockquote is contained in a p/p block
 and the second in a div/div block.

You've got this the wrong way round. The other Peter was saying that the 
contents of the blockquote need to be wrapped in one or more block 
elements (such as p or div or ul) in XHTML 1.0 Strict. Your code, on the 
other hand, wraps the blockquote itself in a block element.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Can't put #8220; in a blockquote?

2008-11-23 Thread Benjamin Hawkes-Lewis
wlb wrote:
 The HTML and CSS on my page both validate. i wonder why. I can't see any
 difference between what you are doing and what my HTML does.

Did you read the other replies to Peter's query? I think they answer yours.

--
Benjamin Hawkes-Lewis

__
css-discuss [EMAIL PROTECTED]
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] Can't put #8220; in a blockquote?

2008-11-23 Thread Benjamin Hawkes-Lewis
Peter Hyde-Smith wrote:
 Will someone please enlighten me regarding whether different browsers 
 render the blockquote differently. Do some actually add in the quote 
 marks;

No, none do.

In HTML4 browsers are supposed to add quotation marks for Q (inline 
quotations) not BLOCKQUOTE (quotations containing blocks). Most modern 
browsers, including IE8 Beta 2 but not including IE6 and IE7, add such 
marks to Q. But you'd likely want to adjust which marks with CSS.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Complete Stylesheet for Each IE Version - No Trickle Down

2008-11-09 Thread Benjamin Hawkes-Lewis
Melbeach wrote:
 Each IE version can now be targeted in complete isolation.

Another advantage of this approach is that each IE version only has to 
download one stylesheet, rather than two or three or four, so that's 
fewer HTTP requests.

 So I'm wondering if any of the experts here see a problem with doing this. My 
 main concern is that some obscure low-tech browser might see this !--[if 
 !IE]!-- and go into some sort of infinite loop routine, burning up the old 
 cpu.

That would definitely be a bug in the browser, not your code, and such a 
browser would be unlikely to handle common web content.

 Is there a tool available that would allow me to check that?

Nope. You'd have to test:

http://browsers.evolt.org/

http://en.wikipedia.org/wiki/List_of_web_browsers

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] :active with display: none

2008-10-11 Thread Benjamin Hawkes-Lewis
Jack Blankenships wrote:
 If I press the Enter
 key when the desired 'Option 5' link is selected, the link will fire
 and the display is still set to none properly.

In Firefox 3 Mac, at least, the menu does not disappear when Option 5 is 
activated with the keyboard.

 This does not work in browsers that do not allow for using the tab key
 to move between links (which incidentally seems like an accessibility
 flaw).

All popular browsers allow users to move between links with the 
keyboard. The exact key(s) to press differs between browsers and 
configurations however.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Standrards Compliance -fine-tuning

2008-10-09 Thread Benjamin Hawkes-Lewis
[EMAIL PROTECTED] wrote:
 anything else that be suggested from the css/html (maybe
 SEO if it's not too OT) perspective that would make this page even more
 web standards compliant?

There doesn't seem much seriously wrong here, but here's some best 
practice issues for whatever they're worth:

* Provide textual equivalents for the logo and tag line in the site 
banner. Ensure the information doesn't disappear when the users' color 
choices are enforced and/or background images are not displayed. IMG 
with ALT is generally preferable to using background-image-based text 
replacement for this reason:

http://www.w3.org/TR/WCAG20/#text-equiv

(The tag line should probably just be straight text.)

* Specify color, background-color, and (optionally) background-image all 
together, in order not to conflict with user's chosen color defaults:

http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast

* Indicate language with lang=en on html:

http://www.w3.org/International/questions/qa-lang-why

* Explicitly specify the encoding in your HTTP header (Content-Type: 
text/html; charset=iso-8859-1) to discourage user agents trying to guess 
(HTTP headers take precedence over http-equiv markup, though the later 
is used when a document is loaded locally).

http://www.w3.org/TR/REC-html40/charset.html#h-5.2.2

* Move meta http-equiv=Content-Type content=text/html; 
charset=iso-8859-1 / to be the first child of head, since it could 
affect how later content is interpreted:

http://www.w3.org/TR/REC-html40/charset.html#h-5.2.2

* If this page is meant to attract search traffic, link text beginning 
with Back to seems odd (non-optimal for users and SEO).

* It's a small and debatable point, but I think hyphenated-class-names 
have the slight edge over camelCaseClassNames of matching microformat 
conventions and compressing very slightly better:

http://microformats.org/

http://www.websiteoptimization.com/speed/tweak/lowercase/

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Image replacement? -- link provided

2008-10-08 Thread Benjamin Hawkes-Lewis
Bill Moseley wrote:
 Question:
 
 What's the best way to move text off screen and allow a background
 image to still show?  And done with accessibility in mind?
 

Answer:

Sorry, but from what I've seen there is no _good_ way to do this, with 
current standards and implementations.

Your robust choices are:

1. Just leave the text on-screen.

2. Failing that, use an IMG element with ALT, since this is a widely 
supported technology.

 so I have some text, but move it off screen so only a calendar icon
 shows.  Of course, it would also be best if screen readers would read
 the text.

I wonder if you're conflating accessibility and screen reader access. 
Don't forget people with colorblindness or other visual impairments who 
need to use their own color settings:

http://www.w3.org/TR/WCAG20/#visual-audio-contrast

Using your own colors typically requires background images be 
overridden. But nothing shifts off-screen text back into position. Not 
even overlaying text with an element with a background-image is robust, 
since user background colors may apply to that element.

You can experiment with these sort of scenarios using, for example:

* Windows High Contrast settings and IE7
* Firefox 3 Options (set and enforce your own colors)
* Opera 9.52 View options (try the High Contrast view)

background-image and position hacks don't work, but future CSS standards 
may include features for image replacement:

http://www.w3.org/TR/css3-content/#inserting3

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] validating css to account for accessibilty

2008-10-07 Thread Benjamin Hawkes-Lewis
Jen Strickland wrote:
 Hello!
 
 I've validated my code, and wanted to be tidy and validate my css, so  
 I tried using http://jigsaw.w3.org/css-validator/
 
 ... and it validates, but has warnings.  I understand why, but it's so  
 confusing how all the background-colors need to be accounted for.  Is  
 there some handy-dandy easier way, than to list each and every one  
 with a background???

Setting color every time you set background-color (and vice versa), 
and setting background-color every time you set background-image, is 
the only truly robust approach in the face of unpredictable markup and 
browser configurations.

Also, make sure when you set :link colors you also set :unvisited too.

You might find this less cumbersome if you generate your CSS with 
preprocessed templates, allowing you to define particular colors by name 
or function or even group whole declarations.

Simple example using Perl:

http://dorward.me.uk/www/css/inheritance/

Note also that transparent and inherit are valid background-color 
values, although the later is poorly supported by Internet Explorer 6.

Good ways to test how such CSS works in practice include:

1. Change your default colors to white text on black.

2. Try one of Opera's High Contrast View options.

3. Try IE and Windows XP in High Contrast mode.

4. Disabling images.

In terms of CSS and accessibility, note that Meyer's reset CSS, which 
you're using, unsets the default keyboard focus ring (outline: 0;), 
but you have not explicitly set any keyboard focus outline as a 
replacement. See 
http://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible for Web 
Accessibility Initiative's emerging guidance about ensuring keyboard 
focus is always visible.

For more on CSS and accessibility issues see:

http://24ways.org/2007/css-for-accessibility

and

http://www.w3.org/TR/WCAG10-CSS-TECHS/

and

http://www.w3.org/TR/WCAG20-TECHS/

Hope that helps.
--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Questions regarding how to make selected li red with css

2008-10-07 Thread Benjamin Hawkes-Lewis
Laura wrote:
 Are there any hints for having the script tag elements validate
 or will they always give errors?

Short answer: put the script in question in an external script imported 
with the src attribute rather than inline.

Longer answer, read:

* XHTML 1.0 specification on Script and Style elements:
   http://www.w3.org/TR/xhtml1/#h-4.8

* XHTML 1.0 specification's compatibility suggestions for Embedded 
Style Sheets and Scripts when serving as text/html tag soup:
   http://www.w3.org/TR/xhtml1/#C_4

* HTML Comments in Scripts for a discussion of some of the issues:
   http://lachy.id.au/log/2005/05/script-comments

You might also want to read:

http://www.webdevout.net/articles/beware-of-xhtml

and think about whether XHTML was really the best choice on technical 
grounds for your use-case …

Hope that helps.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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] Visual CSS interpreter

2008-10-02 Thread Benjamin Hawkes-Lewis
Sohail Aboobaker wrote:
 We often need to take exisitng HTML / CSS files from a website and map it to
 a pre-existing (templated) xhmtl format which contains most common elements.
 
 
 Most of work involved is in mapping one HTML div tag names, stylenames etc.
 to another. Is there a tool which would examine the current CSS and HTML for
 a given page and draw boxes around the div tag or visually mark each tag for
 easy mapping?

Probably, but this work sounds like a job for XSLT.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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 css in browsers

2008-09-21 Thread Benjamin Hawkes-Lewis
Gunlaug Sørtun wrote:
 All browsers have user-options, and some users may intentionally or
 unintentionally set/use a few of those, like font-resizing etc. It is
 always good to figure out and optimize what your creations can handle,
 before end-users run into serious problems because your creations break
 when they apply such options.
 See/visit: http://www.w3.org/WAI/, http://www.webaim.org/ and
 http://www.accessifyforum.com/ for a bit more.

Strongly agreed. Also useful for this is the BBC's My Web My Way 
(written as a guide for end-users):

http://www.bbc.co.uk/accessibility/

Where I work we try to follow the Yahoo! Grade Browser Strategy ( 
http://developer.yahoo.com/yui/articles/gbs/ ), test two text sizes up 
and down (matching the main IE6 text sizing interface), test with and 
without JS, and (when complex functionality is involved) test with 
assistive technologies like screen readers. For my part, I also try to 
test with user styles partly or wholly overriding publisher CSS (e.g. 
using the Opera User Accessibility styles, by changing color preferences 
in Internet Explorer, or by turning off CSS in Firefox) but JS enabled.

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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 css in browsers

2008-09-21 Thread Benjamin Hawkes-Lewis
Andy Borka wrote:
 When testing CSS in browsers, what ones should be tested and in what order?
 I need to narrow down the list so I don't end up testing in 30+ different
 ones. Also what OS are these browsers in. I heard that I should test with
 the following in order:
 
 1. Safari 3.x (MAC OSX)
 2. Firefox 3.x (Windows)
 3. Firefox 2.x (Windows)
 4. Opera 9.x (Windows)
 5. IE 8, 7, 6 and optionally 5.5 (Windows).
 
 Let me know if there is a different list or what exactly I need to do here.

It depends what you're trying to accomplish. On different platforms, 
browsers use somewhat different widget sets and fonts, so looking at 
Firefox on Windows isn't a perfect guide to Firefox on Mac or Firefox on 
Ubuntu, for instance. Then there are browsers using completely different 
web engines like Konqueror, NetSurf, Links, ELinks, Lynx, and the 
outdated iCab 3.x (still the best browser for pre-OS X Apple systems).

--
Benjamin Hawkes-Lewis
__
css-discuss [EMAIL PROTECTED]
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/