Re: [css-d] nested lists in IE7

[Christian Heilmann]

Dermot Ward wrote:
> Hi Bobby,
>
> Thank you very much for your help.
>
> Please excuse my typo where I inadvertantly put 'class' instead of  'one'.
>
> Your solution below solves the main problem, it stops the bold style 
> being applied to the nested list in IE7.
>
> 
>
> One
> 
> 
> One A
> One B
> One C
> 
> 
> 
>
> However IE7 now inserts a gap between the first li and the second ul.
>
>
>
> * One
> *
>   o One A
>   o One B
>   o One C
>
> I'll play around with this later this evening.
> And thanks for the info on ul and child elements.
>   
Yes and that is totally correct. The right way to nest this is the 
following:



One

One A
One B
One C




The other solution doesn't make the UL a child of "One". You also don't 
need classes on every list item but use descendant selectors instead:



One

One A
One B
One C




ul.one li{
font-weight:bold;
color:#0c0;
}
ul.one li li {
font-weight:normal;
color:#000;
}




__
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 old 'tables vs. divs'

[Christian Heilmann]

Todd Bingham wrote:
> Gentlemen,
>
> This is not my site, but I went there as a result of a tutorial I was  
> taking on Lynda.com.
>
> http://www.nypl.org/
>
> I was studying the CSS and the page structure and I noticed that the  
> designer used a series of table cels to create that design.  Not only  
> will the page not validate but I wondered what you guys have to say  
> about the notion of using tables to affect this design?
>
> I'd appreciate any comments because I have an old site I did for a  
> client who recently heard the phrase 'table-less' and is bugging me  
> about changing it over, and I'm afraid he's thinking it should be on  
> my nickel.
>
> What do you all think..
>   
http://www.shouldiusetablesforlayout.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] Controllling content of div

[Christian Heilmann]

Gunther Van Butsele wrote:
>> Ellen Heitman wrote:
>> 
>>> I don't have a URL yet, I apologize. Hopefully my 
>>>   
>> description will be 
>> 
>>> pretty simple. Here's what I want to do: I have a calendar, 
>>>   
>> and when 
>> 
>>> you click on a particular date, some content associated 
>>>   
>> with that date 
>> 
>>> should appear in a scrollable div elsewhere on the page.
>>>   
>> 
>
> You could use a javascript library like jquery which makes it very easy
> to fill a div somewhere else on the page with dynamic content. Something
> along the lines of:
>
> 
> function show_dateinfo(id) {
>   $('#divInfo').load('dateinfo.php?id=' + id); 
> }
> 
>
> 
>   
> 
>
> Some date
>
>   
^ this doesn't do anything and if you add javascript: to the href you 
haven't understood progressive enhancement. None of this is CSS though, 
so thelist would be a better place to ask this.

__
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] proper use of cite

[Christian Heilmann]

Brian Hazelton wrote:
> If I put in the footer "site by xxx" would that be a proper use of cite
> or should I just use a ?
>
>   
If there is information about who maintains the document the footer is 
in, address is actually the most appropriate. You can even make it more 
useful with a vcard:


  
  http://wait-till-i.com/";>Wait till I 
come! is the blog of Christian Heilmann mailto:onlinetools...@gmail.com";>onlinetools...@gmail.com, a 
developer evangelist living and working in 
London, England. http://feeds.technorati.com/contacts/wait-till-i.com";>Download 
vcard.
  


__
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 CSS Overlords

[Christian Heilmann]

> Seriously? Messy/disastrous coding practices aside (which can apply 
> to CSS layouts just as much as table layouts), but do you mean you 
> can make sense of your code, above, but you can't make sense of this 
> code, below?
>
> 
>  
> 
> 
>  
>  
>  
> 
> 
>  
> 
>
> My code might *look* like there's more work involved in creating it, 
> but what you're not showing in your code is all the countless hacks 
> and fixes that you have to implement "behind the scenes" -- whereas 
> my code requires *none*, *zero*, and in all likelihood never will.
>
> Ron  ;) 
>   
Cool, then show the sidebar on the left. Doesn't require a hack with CSS :)

The Devil does not need an advocate, seriously :)


__
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] Anyone Know of Hover Drop Down Menus?

[Christian Heilmann]

MEM wrote:
>>> -Original Message-
>>> From: [EMAIL PROTECTED] [mailto:css-d-
>>> [EMAIL PROTECTED] On Behalf Of Elli Vizcaino
>>> Sent: terça-feira, 9 de Dezembro de 2008 21:59
>>> To: CSS Discuss
>>> Subject: [css-d] Anyone Know of Hover Drop Down Menus?
>>>
>>> Hello,
>>>
>>> Need resources on hover drop down menus that hopefully work across
>>>   
>> FF,
>> 
>>> Safari, IE so far I have this:
>>> http://elliv.nbcuxd.com/health_article.html - works in IE 7 & FF3,
>>> Safari and IE6  there are problems, haven't tested FF2.
>>>
>>> Any resources, suggestions welcomed.
>>>
>>>   
If you stop chasing a dream and trying to get this to work with CSS only 
(keyboard access anyone?) here's a solution that is free, fully 
styleable, works with screen readers and is in use on probably the 
biggest web sites:

http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup_source.html
http://developer.yahoo.com/yui/menu/


__
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] Fade to black or the standards battle is lost (US election day)

[Christian Heilmann]

Gabriele Romanato wrote:
> I've just finished to validate the markup and the CSS of the sites of 
> Obama and McCain. The results are horrible: thousands errors! While I'm 
> listening to "Fade to black" (Metallica), I'm just wondering why the 
> standard are neglected in such a way.
> do you have an answer that could save my trust in a better web?
>
>   
Standards are there to make our working together easier and handovers or 
working with third parties less painful. They are an agreement between 
developers how to work together.

For web standards it also *should* mean that your development process 
has predictable outcomes as the browser vendors adhere to these standards.

In the past this was not the case, which had positives and negatives (we 
would not have Ajax had Microsoft not violated the ecmascript standard 
and enhanced on it). Now it is more and more and even IE in its 8th 
permutation is a great, standards compliant browser.

Where it goes pear-shaped is that end users (and especially IT 
departments who are the only ones that can upgrade software in a lot of 
companies) do not upgrade browsers as browsers aren't seen as something 
that needs maintenance but comes with the operating system.

This is why to have the largest reach some people consider it needed 
that we don't follow standards but test with all browsers over and over 
again. An election campaign site is not meant to be forever, so I guess 
they wanted to make it work now. For non-temporary sites this is not a 
safe way of thinking as it is short-sighted and you'll have to 
re-evaluate whenever a new browser comes around. A more mature and safer 
way of thinking browser support whilst following standards is a graded 
support, as explained for example here: 
http://developer.yahoo.com/yui/articles/gbs/
__
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] Sliced Images within a question

[Christian Heilmann]

David Hucklesby wrote:
> On Thu, 30 Oct 2008 10:11:36 -0400, Majestic wrote:
>   
>> I have a simple question when you slice a image up, photoshop spits out a 
>> html file
>> with each image slice in  format.  Is this the best method to use by 
>> just
>> cutting and pasting the code from the HTML created and pasting it within a 
>>  or is
>> their a more effective and better way to place a sliced image within a  
>> ?
>> 
>
> Yes. Use CSS to add the images as backgrounds.
>
> You may like to consider using a little less slicing, too:
>
>  
>  
> 
>   
You can also generate them automatically from a bunch of images - 
including the CSS: http://spritegen.website-performance.org/

:)

/Chris

__
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] ALT Attribute not showing up in IE

[Christian Heilmann]

Gunlaug Sørtun wrote:
> Majestic wrote:
>   
>> I'm having a rare instance whereas IE is not showing the attribute 
>> for a ALT tag anyone know the solution?
>> 
>
> To clarify this case a bit for all responders:
>
> The case was presented to me - with link - hours before it ended up here
> on [css-d]. I couldn't solve it, but I've seen it before (somewhere, a
> long time ago) so I suggested the Original Poster should google for such
> cases.
>
> ---
> Facts about the "missing alt-attribute" in _this_ case:
>
> - It is *not* the 'alt-attribute' that's missing in IE - it's the
> *entire* image that is *not* visible.
>
> - Even the image's place-holder is missing in IE, so if one set a
> background-color on the image-element not even that color shows up in IE.
>
> - The image has a '.png' extension. Changing that extension to
> *anything* else, makes the image appear as it should in IE - with
> alt-attribute and all. (Rings a bell..?)
>
> - All versions from IE7 and backwards treat the image in question the
> same way - wrong. Don't know about IE8 betas.
>
> ---
>
> The case is definitely "OffTopic" on [css-d] - not CSS related at all,
> so I will also suggest the Original Poster presents it on one of the
> more appropriate places...
> 
> ...where someone may have a clue and be able to respond.
>
>   
Thanks Gunlaug,

another one for MSIE's bugzilla, oh wait...

I will ask the IE8 team


__
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] ALT Attribute not showing up in IE

[Christian Heilmann]

Lourens Thalen wrote:
> Christian,
>
> Title overrules the alt if both are given... and you can always add an 
> alt and title for extra (!) usability. so if you're a keyboard user, 
> you know you can miss some information, but that's something you 
> choose for.
Ok this is off-topic and I attract the wrath of the Meyer with this one 
again but sentences like these want my quit my job and become a 
goat-herder. Probably you didn't mean this in a wrong manner but things 
like that get quoted and people follow advice like this. I don't know 
anybody who is willingly a keyboard user - this is nothing you choose. 
Alt is not extra usability but mandatory - even to create valid HTML.



__
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] ALT Attribute not showing up in IE

[Christian Heilmann]

Lourens Thalen wrote:
> I hope you're not mixing up the title attribute with the alt(ernative)
> attribute?
>
> If you're sure, could you please send an example?
>   
Well IE does show the alternative text when you roll over an image, 
which is very annoying as it makes people write text for visual display 
instead of text alternatives for when the image is not available or 
cannot be seen.

Both the (wrong) alt display and the title attribute are not safe for 
conveying information, think of keyboard users.

__
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] Cleaning up unused style sheets!

[Christian Heilmann]

Majestic wrote:
> Hello, anyone know a quick method maybe a program or a technique to
> clean up style sheets that have declarations within them that are not
> used ?
>
>   
There's Dust Me Selectors:
http://www.sitepoint.com/blogs/2007/11/26/dust-me-selectors-version-20/

__
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] sliding div in Javascript or CSS

[Christian Heilmann]

Leandro Tracchia wrote:
> without getting into too much debate, i need to know what is the best
> way of creating a sliding div. should i use javascript or css or a
> combination of both. i'm new at css, but i'm learning very quickly. i
> just want to know what is the right way of doing it before i start
> doing something the wrong way. a good simple example would also be
> helpful.
> __
>   
What exactly do you mean by "sliding div"? An animated div that moves 
from a to b?

That'll be a mixture of CSS and JavaScript (unless all your users are on 
the newest Safari/Webkit)

example: http://developer.yahoo.com/yui/examples/animation/motion.html
__
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] Positioning a website in the middle

[Christian Heilmann]

{table example snipped}

Hi Krystian, you don't need a table for that. Here's a well explained 
solution:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html


__
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] google Chrome browser

[Christian Heilmann]

Philippe Wittenbergh wrote:
> On Sep 2, 2008, at 3:14 PM, Brian Cummiskey wrote:
>
>   
>> Chrome is set to drop for download sometime today:
>>
>> http://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html
>>
>>
>> Anyone get a pre-release copy to do some testing?  Any scary things we
>> should be aware of?
>> 
>
> It uses WebKit as rendering engine. That is all we need to know, as  
> far as CSS-D is concerned.
>
>   
But which version? Also I am sure that there will be differences. There 
are differences between Firefox3 on PC and Mac and that is the same 
engine...




__
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] MS abandons IE8 for development for FF3?

[Christian Heilmann]

Alan Gresley wrote:
> Hello list.
>
> Can anyone please confirm that what I read here is correct about 
> Microsoft abandoning IE8 development for Firefox 3.
>
>
> http://www.bbspot.com/News/2008/06/microsoft-abandons-internet-explorer-8.html
>
>
> Is this for real.
>
>   
Yes, it is. I just met the Yeti whilst waiting for some UFOs to land and 
he confirmed the whole story.

* might contain irony/sarcasm, much like the bbspot article
** tip: something that contains "f-ing sucks" as an official Microsoft 
employee statement is good to take with a grain of salt - or a truckload 
in this case

__
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] dropdown menu in firefox is jumping/ jittery

[Christian Heilmann]

Cathy Tibbles wrote:
> I have read about this before, but I can't for the life of me, find the
> source.  The drop down menu works well, but when moving from a LI to a
> LI:hover, it gets jittery.  I'm not using any background images either. 
>
> If this is helpful, the code is pasted here: http://pastebin.com/m152e037e
> Working example (although not aligned properly in IE) is
> http://www.tibbles.net/designs/blog 
>
> Thank you so much!
>   
Have you tested this with other people? I am very confused by the menu. 
A menu is there to guide users to other information, not to randomly 
cover other parts of the main navigation items and work only with a 
mouse.  Click handling or at least relative positioning with shifting of 
the rest of the menu would make things a lot clearer.

As to your problem, my guess is that the absolute positioning is causing 
a pixel gap between active LI and next LI. Try a padding on the parent 
LI and position the child LI with a negative margin to create an overlap.

__
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] UL based Event Calendar CSS

[Christian Heilmann]

Sohail Aboobaker wrote:
> Thanks Luc,
>
> This looks great and exactly what we were looking for. One Quick thing; How
> do we handle events that span multiple days? 
>   
Use a table, that's what they are for?

__
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] Prohibit Font resizing (cross browser)

[Christian Heilmann]

> I'm looking to prohibit the users from resizing font in one div on a page,
> and the solution needs to be cross browser. It's used in a header and pretty
> large, so accessibility isn't a concern, I just don't want the layout
> breaking.
>
> Anybody have any ideas how best to lock a font size to a pre-determined
> size?
>
> Thanks,
>   
Use a graphic?

__
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] trying to fix this without using javascript

[Christian Heilmann]

>>  Long time, no post.
>>
>>  Here's the problem of the day.  I'm working with a web design vendor who 
>> has decided that they need
>>  to use Javascript to fix what should be a CSS problem.  I don't find this 
>> acceptable, but I'm having
>>  a hard time convincing anyone who makes decisions of that.  So instead, 
>> I've got to try to solve the
>>  problem so we don't have a broken page for people with no javascript.
>>
>>  I've had to put this up on my own personal server  to show to you.  Here's 
>> the page:
>>
>>  http://theredsetter.com/test/subpage.html
>>
>>  Visit it without Javascript and watch the address roll up over the 
>> navigation; visit it with to see
>>  what it should look like.  Anyone have a fix for that that doesn't use 
>> Javascript?
>>
>> 
That has been discussed here a lot with the topic "sticky footer" or 
"100% height". If you can't find a solution there, ask them to change 
the CSS to position the footer absolutely and to the bottom only when 
there is more space than it needs. This'll make everyone happy.





__
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] Pure CSS drop-down menus aren't *good*

[Christian Heilmann]

>  I changed my mind. I just read this article and I don't find it useful.
> I think it lacks in-depth knowledge or he simply didn't took the best
> approach for this topic.

As you obviously know the better approach, why not write a better
article? Actually,simply naming the approach would be helpful. Judging
is easy, especially when you make assumptions.

Here is the assumption this article made: a drop down menu should work
regardless of input device and stay on the screen when completely
expanded without causing scrollbars and thus becoming impossible to
reach the last items. Anything wrong with that?

>  I don't think he's wrong (solely in the point that hybrid menus are
> better), but anyone with some knowledge could think of this article as
> poorly-done or not being objective --he seems to be some sort of JS expert.

What is the knowledge you talk about here that would make people think
of this article as poorly done or not objective? The fact/assumption
of "he" being a JavaScript expert would also mean that the the CSS
menus in Eric Meyer's books also by default are a bad solution and the
chapter not objective and bad, wouldn't it? Who should write an
objective article? A brick layer? Or maybe an interaction designer?

> The way he uses to expose his point of view looks more like saying CSS is
> plain wrong, it also shows a lack of understanding of it and seems to
> believe there's no common sense (which could easily be applied to both CSS
> and JS).

Again, please enlight us as to the lack of understanding of CSS and
especially the lack of common sense. Also, point out where the article
says CSS is plain wrong. There are parts that say that using CSS for
*these solutions* is wrong, and there are arguments why but where is
the sweeping statement?

These are rather tough accusations you make here, however they lack the proof.

Let's see an application of common sense and find a CSS only menu that
works with a keyboard and stays on-screen even if there is not enough
space for it to show more to the left or the bottom.

>  Anyway, it's good to have it as a reference, but I do believe people
> should investigate a little more.

I think people should stop trying to prove a point in one direction or
another but use what works reliably. Point is that with CSS you make
assumptions, with CSS and JS you can test before you apply (is there
enough space? Would a delay in showing or hiding a menu make it more
usable?)

Maybe the question is "what should a drop down menu achieve and what
are the circumstances it could be used" and then we decide the
technology to apply. Right now all of the discussions on this matter
start with "I want to use technology XYZ as I know it and it IS the
best for this!". All other technologies are black magic and insecure
and probably steal your firstborn when you don't watch them closely.
__
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] Pure CSS drop-down menus aren't *good*

[Christian Heilmann]

> I've heard the request for pure CSS drop-down menus quite a lot, and
> rarely see people getting told what they should about how *bad* they
> are.

Cause people don't search archives?
http://archivist.incutio.com/viewlist/css-discuss/78948


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
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/

[css-d] Sneaky way to use overflow+anchor links to simulate a slideshow

[Christian Heilmann]

http://www.wait-till-i.com/index.php?p=488

This just baffled me in an applicant's exercise. It is superfluous
markup but you can use the idea to create a slide show of for example
illustrations scattered over a whole article using positioning

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
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] Are table-based layouts still needed

[Christian Heilmann]

> > Re tables for LAYOUT- nope, not needed. Tables do occasionally come in
> > handy for tabular data though.

Much like H1 to H6 occasionally might be handy for headlines...

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Automated generation of CSS sprite images and test code

[Christian Heilmann]

http://www.csssprites.com

Sweeet! Is mine. More feedback welcome (done by a
colleague of mine).
-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to minfy the CSS Files

[Christian Heilmann]

> Our web pages make multiple request to more than one CSS file for a single 
> page which makes the page downloading relatively slower..
>
> I knew there is on JSMinifier which clears unwanted whitespaces and comments 
> before buiding it..
>
> Do we have any tool like this to clean up all the CSS files.
> Any ant Target for the same is availble..

yes: http://www.ejeliot.com/blog/73

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] download ie6

[Christian Heilmann]

> > This will allow you to test your sites in IE7, IE6, IE5.5, etc. And if
> > you wish, you can even make IE6 your default browser while continuing to
> > use IE7 for development testing.

That is the theory, the problem is that these standalones don't really
work with cookies or conditional comments. I've found this great piece
of software that installs all kind of IEs as standalones for testing
that do work with the aforementioned: http://tredosoft.com/Multiple_IE

(darn, I de-lurked, *makesjedihandmovement* this is not me)

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] expanding submenu

[Christian Heilmann]

> Dear admin,
>
> Is promoting web technology and web development fads as religious
> dogma within the posting roles of this mailing list?
>
> Thanks.

Is quoting out of context within the rules? I am out of here...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] expanding submenu

[Christian Heilmann]

> > > > Some questions on expanding menu's:
> > > > - is a css + javascript combination still the best way to go (instead of
> > > > css only)?
> >
> > Short answer: yes. Justification:
> > http://www.wait-till-i.com/index.php?p=327
>
> Well at least we need to remember one thing: the user can turn off
> javascript support (also the fact is that 'noscript' is one of the
> most popular extension in firefox). So even if we use javascript, we
> have to make sure that the design is also accessible without
> javascript support.

yes, as stated...

quote:
Notice that we are talking about modern DOM scripting here, that works
unobtrusively (http://onlinetools.org/articles/unobtrusivejavascript)
and follows the idea of progressive enhancement
(http://en.wikipedia.org/wiki/Progressive_Enhancement). It is easy to
find examples of scripts that dont help the cause, so please let the
sins of the past be behind us.
:unquote

> > Short answer: Try using a keyboard (without creating invalid markup).
>
> I'm sorry, but I do not really get the meaning of the phrase, I am
> using a keyboard :D

quote:
You are at the mercy of the browser when it comes to keyboard support.
While the focus pseudo class offers you the option to trigger a style
application via keyboard, browsers only allow keyboard access to links
and buttons.
With links being inline elements you can only nest other inline
elements in them, and you may make it a real pain for users relying on
assistive technology to use your site.
While CSS can only apply styles to an element that has the focus
(which could have happened either by keyboard or mouse) JavaScript can
use several keyboard event handlers and even recognize which key is
currently pressed.
This enables you to create menus that work like real application
menus. While the normal web way of navigating through a list of links
via keyboard is to jump from link to link via Tab (or the A key in
Opera), real application menus like the Windows start bar or any
dropdown in the browser menu can be navigated with the arrow keys.
:unquote

> > If you want a good, free, as accessible as it gets menu try the YUI
> > menu component:
> > http://developer.yahoo.com/yui/menu/
>
> YUI is great, both in quality and "size" :D (136K menu.js, 41K menu-min.js).

The "my solution is smaller than yours" is as boring as the opposite
equivalent when it comes to body parts. However:
http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/

As in terms of quality: There is a great book by Sitepoint called the
JavaScript Anthology where James Edwards, developer of the Ultimate
Dropdown Menu(UDM) explains ALL the things a real dropdown menu has to
cater for - and these are a lot.

If you can do better, do it, and consider these uses cases of the menu:

- a user can only navigate via keyboard
- the menu sub level cannot fit in the browser's viewport when it is expanded
- a user is incapable of non-erratic mouse movements

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

Re: [css-d] expanding submenu

[Christian Heilmann]

> > Some questions on expanding menu's:
> > - is a css + javascript combination still the best way to go (instead of
> > css only)?

Short answer: yes. Justification:
http://www.wait-till-i.com/index.php?p=327

> My opinion, CSS only is the best way. But unfortunately we cannot use
> the best way if we want to support IE :D. So CSS+Javascript cound be
> the best trade-off.

Short answer: Try using a keyboard (without creating invalid markup).

> > - is YADM the best solution for these menus, or is there a better one?

http://icant.co.uk/sandbox/bonsaimenu/index.html

> I think what you really need is pop-up menu (on mouse over).
> This is one of my favourite (the code is simple and runs fast).

If you want a good, free, as accessible as it gets menu try the YUI
menu component:
http://developer.yahoo.com/yui/menu/

Let's stop this thread right here and now though. Not again, please!

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] (no subject)

[Christian Heilmann]

On 11/15/06, Bradley Wright <[EMAIL PROTECTED]> wrote:
> Wes Gamble wrote:
> > newDiv = popup.document.createElement('div');
> > newDiv.setAttribute('id', 'pdf');
> > newDiv.setAttribute('style', 'margin-top: 250px; text-align: center;');
> > newDiv.innerHTML = 'Please wait while your forms are 
> > generated';
> > popup.document.body.appendChild(newDiv);
>
> I'd do it like this:
>
> newDiv.style.marginTop = '250px';
> newDiv.style.textAlign = 'center';

It is an option. I'd do a

#pdf {margin-top: 250px; text-align: center;}

in the CSS file :-)

If #pdf normally has other styles you can also add a class with

newDiv.className = 'pop';

and set the CSS accordingly. Whenever you get the chance to let the
CSS parser do the work for you, do it.


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Consistent Cross platform font size

[Christian Heilmann]

> >> How do folks on this list get font sizes to be the same between macs
> >> and pcs ?
> >>
> >> I could use php/javascript to increase the font size by x% when on a pc.
> >> Is there a simpler way that uses plain old css ?
> >
> > Yes: http://developer.yahoo.com/yui/fonts/
>
> Better still - stop specifying font sizes and design your pages to
> accommodate visitor preferences? Just because someone uses a PC doesn't
> mean you need to increase or decrease font sizes to force your
> preference on them ...

Have you tried the example? It doesn't stop you from resizing the font...

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Consistent Cross platform font size

[Christian Heilmann]

> How do folks on this list get font sizes to be the same between macs
> and pcs ?
>
> I could use php/javascript to increase the font size by x% when on a pc.
> Is there a simpler way that uses plain old css ?

Yes: http://developer.yahoo.com/yui/fonts/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Triangles with content

[Christian Heilmann]

> Hey all, been struggling with this one for a while and thought I'd throw it
> out. I'd like to build a square divided into 2 right triangles (thanks goes
> to: http://www.infimum.dk/HTML/slantinfo.html for the original idea).

Easy: Use a background image. Slants are a fun idea but totally
pointless for a real live product. Why would you want to paint images
with borders and HTML elements? It is as clever as font tags and align
attributes or painting an image with table cells with background
colours. CSS is there to define how semantically valuable HTML should
look like, and HTML is not there to support a CSS trick.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Making the hand cursor show up

[Christian Heilmann]

>  cursor: hand;  /*Here is the cursor that I have applied*/

Should be the generic cursor:pointer; and all will be good :-)

Is there any reason why you force your users to have JavaScript
enabled to use your navigation? In terms of SEO it might be
interesting to allow Google to follow these links, too...

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Heading tag Sizing

[Christian Heilmann]

> What do I need to do to have the heading tag render the same size cross
> browsers?

You need to reset any of the browser default sizes before you can
safely define a font size. The YUI provides two style sheets that do
this for you and have been tested in all the major browsers:

http://developer.yahoo.com/yui/reset/
http://developer.yahoo.com/yui/fonts/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS: one band-aid on top of another?

[Christian Heilmann]

> Shelly's spot on. I know a lot of developers who're just baffled at the
> concept of CSS (style? developers? hehehe), but if you read through
> w3c's glossaries and write to standard (ie Firefox) - afterwards the
> logic employed by IE is an interesting challenge :).

You can start with a tested suite:
http://developer.yahoo.com/yui/grids/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] more than css Zen Garden ?

[Christian Heilmann]

> css Zen Garden is full of beautifull variations done via css on the same
> html page. do you know other place like this one ?

http://icant.co.uk/csstablegallery/

I tried taking the idea of Zen Garden further, but it was a stillborn:
http://csstoolshed.com/



-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to prevent 'stuttering' browser rendering with e.g. images

[Christian Heilmann]

> when images (and probably also some div id s) don't get width/height
> set on the page, the rendering in the browser can look 'stuttering'.
> divs and texts appear earlier, images start to appear and push the
> content further down or the side.
>
> another behaviour is that at short pages the scrollbar disappears,
> making a centered content jump offset to the right a bit.
> e.g. I have short pages with few textlines and with one either
> vertical or horiziontal pic. when one clicks through the pages, this
> offset jumping is annoying.
>
> what do you do in such cases?
> - provide a large empty div box in the background with a minimum
> height that makes sure a scrollbar (area) will always  appear?
> - set the margin of a footer div id very high?

That and setting width and height in the image attributes. You can
enforce the scrollbar with a height of 100.01%
http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Specifying CSS definition via HTML attributes & IE6

[Christian Heilmann]

> Does anyone know of any reason why IE6 wouldn't understand attribute
> specification in CSS definition? I've fallen into that terrible practice

IE6 does not support attribute selectors in the form of foo[bar]. It
is an old browser.

Parallels is your friend. http://www.parallels.com/en/products/workstation/mac/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS shapes

[Christian Heilmann]

> > > > This keeps cropping up as an amazing new CSS discovery. Can anyone
> > > > think of a situation where this would be useful? It is like using a
> > > > lot of HTML, background colours and spacer GIFs to paint an image.
> >
> > This is NOT a discovery. This is only a test. I don't pretend to have made
> > a new discovery.
>
> Experiments are not useful strictu sensu. that's the basic difference. I
> can't ignore this difference.
> your criticism is very similar to literary criticism: would be this poem
> "useful"? utilitarism, I suppose.
> or marxian criticism: everything should be "useful" to the underlyining
> structure of society. otherwise, is useless. on the web, every single layout
> should be "useful". that's the underlyning pragmatism of the WWW. sorry,
> this is not my point of view. regards,

http://css-discuss.incutio.com/?page=PostingGuidelines :

Css-discuss is primarily intended to be a place for authors to discuss
real-world uses of CSS. This doesn't preclude discussions of theory,
or nifty cutting-edge tricks that show off the power of CSS, or even
talking about (X)HTML, DOM, and so forth. However, it's greatly
appreciated if such discussions have some practical payoff, even if
it's just teaching other list members a little bit more about how CSS
works. Css-discuss covers all stages, from beginner to advanced.

CSS slant tricks show new CSS developers that you need a lot of
unneccessary HTML to create a design that is a lot easier done with an
image/canvas/SVG. HTML is not a poem and CSS is not paint. Both are
instructions for a user agent to explain what content is and how it
should be rendered.

I can make car bumpers out of cheese cubes, but I wouldn't start a
business on it.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS shapes

[Christian Heilmann]

> http://www.css-zibaldone.com/the-css-switch-project/november-2006/shapes/
>
> a little tribute to Tantek and Mark Schenk. enjoy!
>
> ps. I've not specified the exact versions of the various browsers. all
> apologies. the latest versions, of course. otherwise, as specified.

This keeps cropping up as an amazing new CSS discovery. Can anyone
think of a situation where this would be useful? It is like using a
lot of HTML, background colours and spacer GIFs to paint an image.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] custom bullets for IE Win

[Christian Heilmann]

> They look normal in FF Win/Mac, and Safari but in IE Win they are
> shifted up slightly and hugging onto the text that they denote. Any
> ideas of how I can repair this?

Don't bother with list-style-image, instead use background images and
padding. Works a trat across browsers.
http://css.maxdesign.com.au/listamatic/vertical05.htm

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How do you determine the CSS version ?

[Christian Heilmann]

> Hi,
> I have a basic question:
> how do you determine which CSS version it is when it is not specified neither 
> in the
> CSS files  and the HTML headers ?
> I have several CSS files, it would be nice to tell if it is CSS1 or CSS2.
> Thanks !

Run them through the CSS validator? It'll tell you what is amiss.
Validate them against CSS1 and then CSS2.
http://jigsaw.w3.org/css-validator/validator-upload

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Links are disappearing after clicking

[Christian Heilmann]

> HYPERLINK
> "http://www.thevillagespain.com/index-home.php"http://www.thevillagespain.co
> m/index-home.php
> If you click on the "Press Room" link to visit a page with links in the main
> content area.  When you click on one of the links, look at the page again
> and it has disappeared.  The text is still there if you highlight it, but

.booknow a:link, a:visited {
color: #fff;
}

needs to be

.booknow a:link, .booknow a:visited {
color: #fff;
}

with the first statement you made every visited link white.



-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Are CSS Drop-down Menus Searchable

[Christian Heilmann]

> > Thanks! Also let's not forget that with JavaScript, you can pull in
> > subsequent menu items via Ajax and you don't need to add a lot of
> > links for the user to have in the markup just to hide them afterwards.
>
> AJAX is a good way to hide those links from search engines too...

And your point is? Do you create web sites for visitors or search
engines? Guess why Google offers the creation of sitemaps for your
page...

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Are CSS Drop-down Menus Searchable

[Christian Heilmann]

> To bring it back on-topic, Suckerfish seems to be a popular recommeded
> menu system. While it's impressive in it's CSSness, I find it lacking in
> terms of usability features that typically only Javascript can provide
> (menu delays, better keyboard access, etc.)

Thanks! Also let's not forget that with JavaScript, you can pull in
subsequent menu items via Ajax and you don't need to add a lot of
links for the user to have in the markup just to hide them afterwards.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical li menu with images, issues

[Christian Heilmann]

> I've been mucking with my code, so sorry do not have clean code to post.
> My issue is I was trying to take a image based vertical navigation and
> convert to UL/LI list.
> I had applied the usual suspects, display:block, margin: 0, padding 0px, 
> etc...
> The images are surround by "a" tags.
> Well of course Firefox is fine, its just IE, grrr.
> Any thoughts or if someone knows where this is implemented
> successfully that I could look at, that would be great.

It would be grand to get an example as to where it is buggy ?

http://www.beginningjavascript.com/Chapter6/exampleAutomatedRollover.html
is one.

The issue - I presume - could be the gap images leave when you don't
set them as block elements.
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Popup does not work till all images are loaded

[Christian Heilmann]

> The only way I know is to pre-load the images.

Off-topic and actually not true. I'm not sure if prototype has it (as
lightbox uses prototype) but both in YUI and jQuery you can execute
code before the whole page has loaded. My guess is lightbox runs
onload of the whole document and not onAvailable of the element in
question.

http://developer.yahoo.com/yui/docs/event/YAHOO.util.Event.html#onAvailable
http://jquery.com/docs/EventModule/

It'll be easy to knock up a "more responsive lightbox" that way...

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Fwd: Opinions

[Christian Heilmann]

> What do you mean that dropdown menus not accessible? On this site or in
> general? Latter surely not?

Try to access them with a keyboard, try to access them with an
unsteady hand, and then you'll see how inaccessible any hover.htc menu
is.

Long explanation here: http://www.wait-till-i.com/index.php?p=327

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fwd: Opinions

[Christian Heilmann]

> A beautiful first effort. Amazing if this is your first css site. Validates,
> clean, great!

yep. The only problems I have is:

- Resizing the font twice makes the left column hop to the right
- The menu flow is odd. On secondary pages you repeat the main
navigation in the left hand column instead of showing the secondary
menu.
- CSS only dropdown menus are just not accessible
-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] @import or

[Christian Heilmann]

> When you use @import you hide the css from browsers that do not support it
> well (hello N4). When you use link, all browser will access the css.
>
> I my daily work I no longer cater for N4 unless the majority audience uses
> it. It seems that IE5/5.5. is becoming the new N4. One way link rel comes in
> useful is to prevent the IE 'flash of unstyled content' bug, but in nearly
> all cases I use @import.

As you can prevent FOUC with a 

Re: [css-d] Popup divs

[Christian Heilmann]

> I need to do a page which does a list of classes you can take at the
> school. When you click on the link
> a div window comes up describing the class and showing the cover of
> whatever book is needed. I know
> it's not purely a css thing, probably javascript or ajax.
>
> Anyone know of any good suggestions? I've tried looking at ESPN's
> website, their javascript is 5,000+ lines
> and to be honest, I don't know much about js or ajax.

Try the YUI Panel:

http://icant.co.uk/sandbox/yuipanel/

HTH
Chris

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Slideshow

[Christian Heilmann]

> This might be what you're looking for:
>
> http://cssplay.co.uk/menu/scroll_gallery.html
>
> If not, you should snoop around the rest of Stu Nicholls' website
> (http://cssplay.co.uk). He does lots of great stuff with CSS.

Yes, but the problem is once again that the stability and
accessibility of these solutions is just dire. With a hybrid
CSS/JavaScript solution you have a lot better support for browsers,
you can make your gallery keyboard enabled and you can even use
effects like transitions.

Stu does great work, but the site is called CSS Play and not "great
CSS solutions, tested and fit for production".

There are dozens of great gallery examples using CSS and JS out there
that do not expect a mouse or flicker when you change images.

http://www.kellishaver.com/misc/slideshow2/
http://www.mooshow.eatpixels.com/
http://billwscott.com/carousel/
http://icant.co.uk/badgr/

More about why CSS is just not enough:
http://www.wait-till-i.com/index.php?p=327
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fwd: Styling the br element?

[Christian Heilmann]

> How much styling can one do with the br element?  I'm sure this has been
> asked before, but I can't find any answers. And really the reason I ask
> this is because I don't fully understand the properties of the br
> element, so where can I find info on the br element's default browser
> render properties?

BR is an empty element - it renders as a linebreak. All you can change
in your example is line-height for the address element to put
whitespace between the lines.

CSS always allows you to style what is INSIDE the element you define,
which is why in order to do anything to your example you'd need to add
elements around the different parts of code.

If you use clever elements and class names, you do even more:


   Someone's College
   Sometown, Somestate 12345


You can then define .adr span {display:block;} and go nuts. In case
you wonder about the class names: http://microformats.org/wiki/hcard

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Changing alignment of text within a heading tag

[Christian Heilmann]

> I want to be able to align the last part of a heading tag to the right,
> whilst the rest of it stays aligned to the left.
>
> For example:
>
> -
> Description   £ price
> -
>
> In theory, I think you should be able to do that with a  within the
>  tag that floats the last part of the heading to the right, i.e:
>
> Description £ price
>
> .right {float: right;}
>
> However, this doesn't work as is and adding other refinements such as the
> width parameter and so on still doesn't work across all browsers. Nor does
> creating a separate .left class for the first part of the heading.
>
> The  tag has a background colour assigned to it and the  tags seem
> to put a white background over the heading which ruins the effect, even if
> they do position the text in the right place.


Without seeing what you are doing this is tricky. What I normally tend
to do in these instances is that I position the H1 relative and block
and position the span absolutely in it:

h1{position:relative;background:#ccc;}
h1 span{position:absolute;right:0;}

blabla2

If you need floating, float the main element (that will ensure it
contains the others) and use two spans:

h2{float:left}
h2 span{float:left;}
h2 span.price{float:right;}

blabla2

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Animated/scrolling show/hide?

[Christian Heilmann]

> > With just css, you get that hard "on" or "off" transition with show/hide.
> > I'm looking for a way to do a nicer show/hide transition.
>
> You end up having to write JavaScript code with timers
> (window.setInterval), but sure.  Set the height of the element to 0
> and then grow it gradually up to whatever the desired height is...

It is done with the YUI animation library:
http://developer.yahoo.com/yui/animation/

I've written a free chapter of my book covering that:
http://yuiblog.com/blog/2006/06/27/heilmann-excerpt/
Example:http://beginningjavascript.com/Chapter11/exampleBouncyHeadlines.html

As to CSS only solutions: Don't. http://wait-till-i.com/index.php?p=327

HTH
CHris

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Smarty templates and CSS

[Christian Heilmann]

> Is anyone designing CSS only sites with Smarty, a php templating
> system ?
> Considering CSS uses an external style sheet , I am not sure if there
> is a point to combining Smarty and CSS
>
> Anyone been down this road ?

If you don't get that point, you don't get CSS, sorry.

Yes, it is easy to maintain a look and feel in a CMS without CSS, but
as an end user I'd rather have one cached style sheet and lots of
small content pages than a lot of bloated documents that mix
presentation and structure.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Stupid Question re: Outlined Link Image in IE6

[Christian Heilmann]

> To get rid of the border, put border="0" in your image tag. Like this:
> http://www.champeauservices.com/images/logo.gif"; border="0">

This is a CSS mailing list, and the border attribute is deprecated for
many a year by now.

a img {border:none; }

is the CSS to apply to get rid of the border.

http://wait-till-i.com/index.php?p=204

The other problem - I guess - can be solved with #logo{display:block}:
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css compatible for 600x400 and 1024x640 resolutions

[Christian Heilmann]

> > http://www.alistapart.com/articles/elastic/
>
> It's kind of ironic that the above site requires a 1000 pixel-wide
> viewport :-)
>
> Sorry - just couldn't resist.

Please do. The amount of comments you get as an author about problems
of the site that publishes your stuff is simply staggering. One reason
I stopped publishing anything at devarticles.com although they pay for
articles.
-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Netscape 4 screenshots

[Christian Heilmann]

> for Netscape 4 (now that I don't hide style.css from it).
> Browsershots.org unfortunately offers no Netscape 4 option. Is there any
> else way to get a sceenshot?

Install it?
http://browsers.evolt.org/?navigator/32bit


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS 3 Attribute selector - javascript workarounds for IE?

[Christian Heilmann]

> >I want to use the CSS-3 attribute selector to hide a certain select 
> >element - naturally, selecting elements based on their attributes is not
> >supported by IE6 and below, but I was wondering whether anyone has seen any
> >simple javascript solutions for this?
>
> This is actually a CSS 2 feature and no, there is no such solution.
> While you can easily walk the tree and associate styles as you see
> fit, such a method would probably be considerably slower, it would
> not be able to handle modifications made to the tree by scripts,
> would be difficult to apply during load of the document, and have
> other such flaws.

I'd be more interested to learn why you want to hide a form option via
CSS and not on the server side? Seems a lot safer to me.


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Unknown CSS warnings

[Christian Heilmann]

On 9/9/06, Professional Web Pages - Information
<[EMAIL PROTECTED]> wrote:
> Can someone please clarify these warnings in the CSS validator and explain 
> what it means please?
>
> www.TarotCardCombinations.com

If I were suspicious, I'd flag this as spam... It ended up in my spam box...

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] highlighting the current selection

[Christian Heilmann]

> I want the link for the currently displayed page to be quite different
> from the other links and static to clearly indicate the page the reader
> is on. I have read in Eric Myer on CSS, how to do this for one page -
> give the link an id and add a style for the a#id. I can't see how to get
> this to work on a whole site. Would this a#id style have to be on each
> page and not in the main css document?
> I hope someone can clear this up for me or point me to a reference. Thanks.

You do it with an ID or class on the body and an ID on each link in
the navigation:
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css.
However, basic usability tells you that the current page just should
not be a link - why should it link to itself? If you create a menu
where the current page is a STRONG instead of an A you don't have that
problem at all.


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How JavaScript can make "pure CSS solutions" a lot better

[Christian Heilmann]

As "pure CSS solutions" to replace JavaScripts are a theme that crops
up here a lot lately, one of the admins asked if there was a good
resource on all the pros and cons of CSS only solutions and why
JavaScript might be a better idea. I did some research and put
together a whole long post about it:

http://www.wait-till-i.com/index.php?p=327

As it is only touching the topics of this list, please comment
directly to me or leave a comment there. I will also add a page to the
wiki on the subject in case you find more information about it.

cheers
Chris

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] stylesheet question (@import?)

[Christian Heilmann]

On 8/22/06, Micky Hulse <[EMAIL PROTECTED]> wrote:
> Hi,
>
> Here is how I go about it:
[...]

How about: http://css-discuss.incutio.com/?page=ImportHack
and updating that if needed ? :)

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to explain this result?

[Christian Heilmann]

>  is an inline element, unless you modify its display value
> through a stylesheet. You show no signs of doing that.

Which would only change the UA's rendering, not the nature of the
element, though :-) Sounds obvious but far too many CSS-only
implementations these days forget that fact.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] UBER newbie question

[Christian Heilmann]

On 8/21/06, david <[EMAIL PROTECTED]> wrote:
> Christian Heilmann wrote:
> >> And the big benefit to using  and  - if CSS is off, the
> >> visitor at least gets some indication that those particular
> >> words/phrases have a bit more importance than their surrounding text.
> >
> > How is that different from  and  ? The main difference is that
> >  and  are visual only whereas  and  give the text
> > semantical meaning. Underline is the same thing: It is only visual and
> > doesn't have any semantic meaning. On the web it is even more
> > confusing as underlined text indicates a link and not an emphasis.
> > Therefore simulating  with spans is just not sensible.
>
> No difference.  or  vs  or  - the first two describe
> something of the meaning of the enclosed text. The last two just say
> make it bold or italic. But the tag names are a constant reminder to not
> think purely in visual terms.

Yes, but there is no bold or italic for an aural user agent, so there
is a massive difference in between them.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] UBER newbie question

[Christian Heilmann]

> And the big benefit to using  and  - if CSS is off, the
> visitor at least gets some indication that those particular
> words/phrases have a bit more importance than their surrounding text.

How is that different from  and  ? The main difference is that
 and  are visual only whereas  and  give the text
semantical meaning. Underline is the same thing: It is only visual and
doesn't have any semantic meaning. On the web it is even more
confusing as underlined text indicates a link and not an emphasis.
Therefore simulating  with spans is just not sensible.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [OT] Javascript: getElementsByTagName() getElementsById(): How getElementsByClass()?

[Christian Heilmann]

> Dear Folks,
>
> This is tangentially related to this list, since I am trying to
> improve the simple suckerfish.js code at
> http://www.htmldog.com/articles/suckerfish/hover/ to be able to use
> classes as well as ids, in my continued effort to to solve my problems
> with CSS horizontal menus mentioned above.
>
> Now I can see that Javascript provides getElementsByTagName(),
> getElementsById() and getElementsByName().  My question is:
>
> How do I implement the equivalent of getElementsByClass() (which as
> far as I can see, is not built into Javascript?).
>
> As you can guess, I am totally new to Javascript, and a beginner at
> CSS.

Yes, so why do you try to solve all the problems on your own?

http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/
is an implementation of getElementsByClassName, and nearly every
JavaScript library out there has similar solutions.

As to implementing more than one multi level dropdown menus on a page:
Have you considered the users without CSS or JavaScript? Do they
really need all these options?

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site that builds tableless- web standard sites - from your mock?

[Christian Heilmann]

> A while back Max design sent out one those great Links for Light reading
> (Hello Russ and Anna ) and there was a link to this website that will
> creeate a web standard site if you upload a psd -- Doeas anyone know that
> link? I looked for it in the  light reading category list but can't seem
> to find it - - thanks

http://www.XHTMLized.com ?

to me, though, a standards compliant site is so much more than
validating HTML and CSS.

Off-topic though, so if that is the link, then let's leave it at that.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] MSIE 4/PC and display:inline

[Christian Heilmann]

> moin, moin
>
> I'd appreciate if someone could point out, how to persuade
> MSIE 4/PC to display an unordered list horizontally.
>
> Even NS 4 is able to understand an "li {display: inline}".

May I ask WHY you need to grace MSIE4 with a style sheet?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] another safari problem - styling form elements

[Christian Heilmann]

> and applied it to the textboxes but safari ignores it.

Safari (IMHO rightfully) ignores all styling for form elements and
uses its own look and feel, thus making it easy for users to recognise
what interactive elements are.

http://css-discuss.incutio.com/?page=FormElements
-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Show more text using CSS

[Christian Heilmann]

> Stu answer this comment: If there is a need for this then I might be
> persuaded to produce a 'more v2'. Maybe Stu will make them if there is a lot
> of comment asking for this all CSS more v2. Or we have to wait for the demo
> that Chris talk about in one of is reply for this topic.

Read the whole thread, it is out there:
http://icant.co.uk/sandbox/morecontentlinks/

> Anyway, an all CSS solution will be welcome.

There is just no way to do this in CSS only unless you use a focus on
the containing element.

Any CSS solution in CSS2 with MSIE 6 still around has the following problem:

- In order to remain keyboard accessible the trigger element HAS to be a link
- You can only access elements inside this link

Now HTML has the good idea that a link is an inline element and should
only contain other inline elements. Putting whole tables into links or
long passages of text to support CSS as the behaviour technology means
you violate any idea of semantic markup we tried to get into the head
of WYSIWYG and CMS developers in the last 5 years. Also think of
accessibility and screen reader users  - links are listed as an own
navigation option.

Stu's solution and CSS only dropdown menus that are keyboard
accessible by nesting tables in links are just overengineering a dead
cause. This is behaviour and it is really easy to do it with
JavaScript - as I have proven with the provided example. In CSS is it
is a hack and impedes markup. Would you make a whole paragraph a link?

The JS Stu's solution uses is only there to avoid the dotted border
around the link when you click it, nothing more.

We had the same discussion about the oh so accessible and well made
CSS dropdowns some days ago:
http://archivist.incutio.com/viewlist/css-discuss/77801

There is no need to shoe-horn behaviour like this into CSS and
sacrifice semantics on the way when it is perfectly logical to do it
with a bit of JavaScript that results in style-able HTML elements.

What is next? "Can we have FORM validation in HTML?" "Database lookups in CSS?"

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Show more text using CSS

[Christian Heilmann]

> > Thanks, Chris. I was able to get the code you sent to work with our
> > text.
> > However, I'm wondering if there's a much less complicated formula for
> > getting this to work like that blog site without having to link to
> > 4 js files?
>
>
> Janet,
>
> Just a question from a beginner...wouldn''t it just be a lot easier
> to make a second page like the first, except with the extended text
> on it the way you want it to look? T'would certainly save a lot of JS
> and coding hassle...
>
> Just a thought.


 in Wordpress :-)

This is all off-topic for CSS by now, so let's stop.

There is a CSS only hack: http://www.cssplay.co.uk/menu/more.html


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] a body footer

[Christian Heilmann]

> Is a footer 100% width that is anchored to the bottom of the browser possible?
>
> Couldn't find any tutorials

Ok, seriously, are you taking the micky?

http://css-discuss.incutio.com/?page=HundredPercentHeight
http://css-discuss.incutio.com/?page=FooterInfo

I keep getting the impression you are just here to ask questions that
are already on the wiki and have been resolved dozens of times.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Show more text using CSS

[Christian Heilmann]

> >>Basically, we need some way to code a "Show More" function that would allow
> >>us to take a long piece of text, shorten it to X maximum lines, then have a
> >>"Read more" link that when clicked would display the rest of the text on
> >>the page below the first half.

There you go:
http://icant.co.uk/sandbox/morecontentlinks/

I didn't use any fancy word counting or anything, but instead you need
to set a div with the class "more" around all the elements you want
hidden.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Show more text using CSS

[Christian Heilmann]

> Have another programming quandary that I'm hoping I can get the list's help
> on...I'm not even sure what the technique is called so I'm not coming up
> with much so far by Googling for tutorials.
>
> Basically, we need some way to code a "Show More" function that would allow
> us to take a long piece of text, shorten it to X maximum lines, then have a
> "Read more" link that when clicked would display the rest of the text on
> the page below the first half.

There is no obvious CSS-only solution (cssplay.co.uk has one though)
but in terms of browser compatibility and usabilty (keyword enabling
for starters), this should be done with a mix of CSS and JS. I will
create a demo in a moment. The snag you will run into though is that
there is no such thing as "after x lines", as with different font
sizes, there'll be more or less lines.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Win browser alternative?

[Christian Heilmann]

> Hi listers,
>
> FYI, here's another one to test for!
>
> http://www.getwebkit.org/
>
> Interesting... even if it is only alpha at the moment...

Has some differences to Safari, but at least there is a chance to
check for the basics.
If you cannot install the download, be sure to run the following patch first:
http://faux.warwickcompsoc.co.uk/vcredist/

That did it for me.

regards
Chris

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with tables in IE6 (enlarges container)

[Christian Heilmann]

You set a width of 100% on the table but positioned the main content
absolutely. First of all, there is no need to position the main
content absolutely, as you can give it a padding to the left and
position the navigation instead.
Secondly if you set a table to 100% width, also make sure to set a
width to the outer element and position that relatively (or
absolutely). This turns 100% into "width of the element the table is
in" and not into "width of the browser window".
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] OT CSS but OT CSS-D List

[Christian Heilmann]

Hi,

I am currently writing on the first demo chapters of a new book, and
one of these chapters will be "Where and How to Get Help When Things
Go Wrong". One of the resources I am going to list is of course CSS-D,
so it would be great if you could tell me *off-list* from both new
joiners perspective what the biggest annoyances were and from long
term list member perspective what the biggest problems with questions
are.

I want to include something like a checklist/blueprint as to how to
ask for advice to the best possible anwers.

thanks,
Chris


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] prepare layout with css,

[Christian Heilmann]

> hi guys what is the best way to prepare layout with css, thanks

Dim the light, listen to some good music, breathe deeply and find your
centre. Then let the vibe steer your fingers over the keyboard.

Or in other words: There is no best way that fits all. Although there
are some good approaches:

http://css-discuss.incutio.com/?page=CssLayouts

pre-made stuff there:

http://developer.yahoo.com/yui/grids/
http://www.positioniseverything.net/articles/onetruelayout/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS vs. DHTML?

[Christian Heilmann]

> > Here's a fact: Not all clients will have CSS enabled or not have your
> > CSS or even enough screen space to accommodate for a menu like this.

> Please, provide numbers and sources. Don't forget to provide numbers
> for JavaScript - for comparison.

No, as there is no such thing as valid stats for everybody on the web.
Check your logs, and check your stats package then you know who you
deal with.

> > For a multi level menu CSS
> > is just not stable to use and the wrong technology.
>
> I'd argue that whole "multi level menu" thing is the wrong idea in the
> first place.

+1 on that, it is not a question about CSS or JS, it is first and
foremost a question about information architecture.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS vs. DHTML?

[Christian Heilmann]

> > Use wired.com and espn.com as examples. Espn.com gets over a million hits
> > a day and is all css. They are a huge business. If css is a viable
> > solution for them, it is for you too.
> >
> > Defo use espn.com as an example of how to use css, but not how to
> > structure xhtml (over 2000 validation errors) - the symbiosis between css
> > and xhtml is destroyed if the content is semantically compromised.

With all due respect, but if you have no clue what you are talking
about then please don't use any "this is the best solution" and "no
need for javascript" and "javascript makes it a moot point". It is all
good and dandy to play with CSS and claim that it is the best thing
since sliced bread but when it comes to browser support, ease of
maintenance and use on wide reach web sites then JS beats CSS
hands-down.

- - - snip - - -
DHTML depends on JavaScript, so it's a moot point. Not all clients will have
DHTML enabled, and it is perfectly possible to create a menu in css that
will look fine in most browsers - especially since we may be able to say
goodbye to the box model hack with the advent of IE7 being shipped to XP
users very soon.
- - - snap - - -

How do you "enable DHTML"? I can enable or disable CSS and/or
JavaScript and DHTML is a mix of all. The box model hack has NOTHING
to do with the problems of CSS-Only menus - the problems are lack of
keyboard support, no way to test for support (you can with JS) and
general flakiness in use as you need to have a steady hand/eye
coordination.
Here's a fact: Not all clients will have CSS enabled or not have your
CSS or even enough screen space to accommodate for a menu like this.

There are WORLDS in between DHTML menus from 1999 and what you do
nowadays with JavaScript and CSS. If you are too blinded by the shiny
new toy ":hover" then it is sad that a lot of clever people (including
IBM, Sun and Mozilla) spend so much time on making solutions that are
accessible, allow you to style them any way you want to and have
cleaner HTML than CSS solutions to boot. We could rather use our time
building shiny useless effects, make money and go to the pub.

A pure CSS menu is NOT ready for a market where MSIE 6 is still a VERY
strong player and MSIE 7 is not yet likely to take over. Please check
with some real big sites before assuming the CSS/Webdev world is who
to care about.

ALL of the above web sites USE JavaScript to enhance the CSS behaviour
of the menus to work for more user agents. For a multi level menu CSS
is just not stable to use and the wrong technology. Read my rant on
this why: http://archivist.incutio.com/viewlist/css-discuss/77801

The discussion about internationalization is rather off-topic as that
is something you do in the HTML and neither in CSS nor JavaScript.
However, I guess it is easier to make a menu open to the right instead
of to left on arabic and hebrew language versions with JavaScript.


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple-level dropdown menu - exquisit implementation using purely CSS

[Christian Heilmann]

> > Not working with keyboard access (ok, also not forcing users to tab
> > through all links either) and not allowing the menu to stay on the
> > screen without causing scrollbars when there is not enough screen
> > estate.
>
> You wouldn't want the menu to disappear, would you?

No, I expect it to pop up to the right or upward instead of causing
scrollbars. Instead of extending the available space it tests if it
can fit and go to other directions if necessary.

> > The "CSS only" functionality is achieved by using a lot of conditional
> > comments to support MSIE 6 and the HTML rendered within IE6 is invalid
> > (TABLES inside A elements!). The example also does not allow for
> > resizing of the text, as I expect that'll cause issues.
>
> The "text" you're referring to must be the buttons that appear in the 
> masthead. They are actually images. The text in the menu dropdowns scales 
> beautifully.

As said, an assumption of mine. Sorry about that one.

> > It is a very impressive example of research and a creative idea to get
> > around the MSIE 6 issue but once again it mixes behaviour,
> > presentation and structure to allow for an effect in CSS that could be
> > much easier and more accessible with JavaScript.
>
> The whole point of this menu project was to avoid using JavaScript.

Now here is my big question: WHY?

Yes, JavaScript may not be available. But JavaScript can

- test if it is available,
- pull in styles when and if they are needed,
- test if the menus will fit the screen and pop them up in other
directions where there is space,
- provide keyboard access via the cursor keys (as multi level menus
work in applications),
- allow for delayed showing and hiding to make sure users with bad eye
hand coordination can use the menu
- even allow to pull in the secondary and tertiary levels via Ajax if needed.

>Sorry Christian. Given that Internet Explorer is broken, one is then
left with no choice but to mix presentation and structure, and create
code that won't validate.

No you don't. You have to if you try to shoehorn behaviour into CSS,
which was meant for presentation definition. Seeing hacks like this
makes me wish :hover was never invented.

I am not saying that this is not an impressive amount of research and
development, I just see it as one that was based on wrong assumptions.
The assumption was that MSIE is "broken" and that CSS is the right
technology for menus.
Instead, the question before the research should be "how should a
multi level menu work, how does it work in other applications and how
can we replicate it with web technologies". And when you test all the
use cases and problems of a menu like this you will soon find out that
CSS is not the technology to use.

Invalid markup is one thing, but having to add lots of conditional
comments and browser specific markup inside them bloats the HTML
unnecessarily and makes it a nightmare to maintain. Furthermore, users
that have to rely on tabbing or use assistive technology that does not
skip elements with a display attribute of hide willl get EVERY link in
the menu on every page, and will thank you for having to tab through
them all.

We all wave the finger at old outdated JavaScript that does browser
sniffing and code forkin, yet by avoiding JavaScript we put the code
forking inside the HTML. Same mistake, different playground.

By using JavaScript for the behaviour, HTML for the structure and CSS
for the look and feel you don't need any extra HTML and your CSS will
be a lot smaller, too.

Check out James Edward's Menu system and more importantly the chapter
on how it was built in the JavaScript Anthology:
http://www.brothercake.com/site/portfolio/book/
http://www.brothercake.com/site/products/menu/

Then take a look at Sun/Mozillas research in that area:
http://developer.mozilla.org/en/docs/Accessible_DHTML

By offering a complex menu like this we are crossing the boundary
between web development and application development, and a richer meny
also requires richer navigation options.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS dummy needs advice - "list of albums"

[Christian Heilmann]

Get the sample code for "Bulletproof CSS" by Dan Cederholm at
http://www.simplebits.com/publications/bulletproof/code/

Chapter 4 has an example that is exactly what you need.

The main problem with your CSS was that you floated the different
images to the left but you never cleared the floating. A quick fix
would be to add a clear:both to the settings for swedishpict.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Skewed Text.....can it be done?

[Christian Heilmann]

> I was just playing with photoshop to come up with a new layout for a site
> and I was wondering if it was possible to do skewed text, or divs. I am
> finding it hard to word this properly so I will just post a link to the
> image of what I have in mind. And if any of you have any comments or
> suggestions please let me know.
>
> http://2d.ie/roughwork4.jpg

CSS doesn't do it
MSIE special filters for CSS do it:
http://en.selfhtml.org/css/eigenschaften/filter.htm
SVG will support this: http://www.xml.com/pub/a/2004/06/02/svgtype.html?page=3
Flash does it now

I wouldn't do it.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple-level dropdown menu - exquisit implementation using purely CSS

[Christian Heilmann]

> Works on all versions of all browsers on all platforms:
>
> http://www.grc.com/menu2/invitro.htm
>
> Courtesy of Steve Gibson, a consummate perfectionist  ;)

Not working with keyboard access (ok, also not forcing users to tab
through all links either) and not allowing the menu to stay on the
screen without causing scrollbars when there is not enough screen
estate.

The "CSS only" functionality is achieved by using a lot of conditional
comments to support MSIE 6 and the HTML rendered within IE6 is invalid
(TABLES inside A elements!). The example also does not allow for
resizing of the text, as I expect that'll cause issues.

It is a very impressive example of research and a creative idea to get
around the MSIE 6 issue but once again it mixes behaviour,
presentation and structure to allow for an effect in CSS that could be
much easier and more accessible with JavaScript.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] list line wrap

[Christian Heilmann]

> > I am using  with a • in the bengining of each
> > line of text. How can I make sure if the line is too
> > long, after the line wrap the second line stays behind
> > the bullet, not under the bullet?
>
> Give the  a left-padding of the desired width, and then
> negative indent of the same width.
> This assumes you know the exact width of the • plus space
> though.
> Why not make the • an image and apply it in CSS by
> list-style-image:url(bullet.jpg); ?

Because list-style-image doesn't work properly cross-browser.
Background image and padding does though:
http://css.maxdesign.com.au/listamatic/vertical05.htm


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Replace Text on Hover]

[Christian Heilmann]

> a span.l { display: none; }
> a:hover span.s { display: none; }
> a:hover span.l { display: inline; }

This will also make sure that users of assistive technology will never
get the extra information, which might be a desired output.

> 
> 
>   
> 
>   :: Home
>   
> :: Home
> Quality - Integrity - Responsiveness
>   
> 
>   
> 
> 

This on the other hand will read "COLON COLON Home" which might not be
a desired impression to give.

Can we please stop treating HTML as CSS's servant? And while we're at
it, can we stop painting with HTML? B elements have no semantic value
and colons in text have a purpose  and are not a replacement for an
image. Without any CSS or a different CSS than the one applied this
markup results in a link called

":: Home :: HomeQuality - Integrity - Responsiveness"

which is actually rather ironic.

You simply cannot expect all users to see your site and they HAVE to
rely on your HTML and your text! Everybody is bitching about web sites
that need JavaScript to make sense, but web sites that don't make much
sense without CSS are not a bit better.

If you want fancy rollover text that extends the normal link text,
there is a perfectly valid HTML attribute for that: title.

Businesses

If you consider the hover tooltip browsers generate from title
attributes too boring, use some JavaScript to spice it up:
http://developer.yahoo.com/yui/examples/container/tooltip.html
http://developer.yahoo.com/yui/container/tooltip/index.html

I always thought going from tables and fonts to CSS is a step away
from tagsoup towards clean and maintainable sites. The belief that all
CSS solutions for behaviour are superior to JavaScript for these fancy
add-ons seems to lead to more and more examples that throws us back to
1999 in terms of HTML quality.

There are JavaScripts out there that help you achieve all this, keep
the look and feel in CSS classes that get applied and work with
semantically valuable HTML instead of requiring a lot of extra and
nonsensical elements. In a lot of cases the functionality that comes
out of it will also be more accessible, as you can test for keyboard
access in JavaScript and you can check if a popup fits on the screen
without causing scrollbars, something you can't do in CSS.

Sorry if that came across as a rant and maybe off-topic but I do get
the feeling we are running in circles.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] dynamic classes - a better way?

[Christian Heilmann]

> Hi,
>
> Just say I have 4 pages on a website. When I am on a page I want the button 
> on that particular page to be bold and a different colour so the user know 
> what page they are on.

This has been discussed here to death over the last few weeks on the list:
http://lists.evolt.org/archive/Week-of-Mon-20060717/thread.html#183744

It is also nothing new to this list:
http://archivist.incutio.com/viewlist/css-discuss/?search=highlight+navigation

Here's the short and quick of it:

1) Yes, you can highlight a certain navigation item by using an ID on
the body and IDs on each of the navigation elements.
(http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css)
This also means that users without CSS or without YOUR CSS style sheet
don't get a navigation highlight at all.
2) If you already use PHP to highlight the navigation, why not replace
the current link with a  STRONG element? That way you have an
accessible navigation highlight as the current page does not link to
itself.
3) You can automate that in PHP by comparing the navigation item HREF
attribute with the current location (stored in PHP_SELF)

I've done a PHP script that does the lot for you (and also adds a
"parent" class to the list item containing the current one and also
allows you to remove unnecessary sub-items and and and) but I am sick
of plugging it here when a CSS only solution is wanted - no matter how
inaccessible it may be.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling text in a textarea element

[Christian Heilmann]

> I am trying to get a size 10px font inside a textarea but can't seem to do
> it.
> Text Here

A bit more context and information would make it a lot easier for us
to help you. The example works fine in MSIE, I assume you mean in
other browsers?


Chris

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] pixel perfect navigation tabs needed

[Christian Heilmann]

> Hi, I am driving myself crazy ... to be pixel perfect

That is all to be said about this. If you make your header expand with
the amount of content in it and add your tab list as the last element
in it you don't have a problem at all. Yes, there might be a
difference in the overall height of the header across different
browsers, but at least you can resize the font without blowing the
layout to smithereens.

Booktip: Bulletproof Web Design by Dan Cederholm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Tooltips

[Christian Heilmann]

> It sure did, thats wonderful :)

How so?

What about people that don't have your stylesheet or don't have any CSS at all?

There is a perfectly good attribute for additional information that
does not fit the normal link content - the title. And if you want to
go nuts on styling this information there are a lot of good scripts
out there that allow you to do that.

http://kryogenix.org/code/browser/nicetitle/
http://www.dustindiaz.com/sweet-titles-finalized

If your first response now is "Urgh JavaScript - that is not
accessible" then I wonder how accessible accessible a link is that has
the link information and a lot of extra information.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Displaying page in different resolutions

[Christian Heilmann]

> Is there a way to easily program a site to automatically determine the
> users resolution?
>
> This is primarily for our intranet.  We have about half of our users
> still using a 800x600 resolution and the others 1024x768 or higher.
>
> I'm using a container for the content so those users with 1024 or higher
> have a large blank border.  Here is a sample of our intranet
> http://www.opnetks.org/Information_Technology/Index.cfm.
>
> Any suggestions would be appreciated.

The resolution is pretty useless to know, as you cannot expect all
users to run their browser full-screen and not windowed.

CSS cannot read any setting, you'd need to use JavaScript for that.

Cameron Moll has done a JS that assigns different CSS according to browser size:
http://themaninblue.com/writing/perspective/2006/01/19/



-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS conferences/symposiums

[Christian Heilmann]

> Does anyone know of any CSS conferences/symposiums etc...  My boss is
> very enthusiastic in my efforts to learn, up through now, by myself.  He
> has suggested I attend classes, none of which I can see as being useful
> at this point, and that I look to see if there are conferences or
> anything out there for CSS.  Anyone know about this?

A lot, the question is where on the planet are you?


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Customisable scrollbars with css

[Christian Heilmann]

> Is there anyway to customize scrollbars using css so that they don't
> default
> to the basic crappy windows grey ones? I know tis not a big thing as I
> generally tend to stay away from having to make users scroll as much as
> possible, but in some cases it can't be avoided, so if one was to go
> about
> it how would it be done, and that is only if it indeed can be done.
>
> Google turned up a truckload
>
> http://www.google.com/search?hl=en&lr=&q=css+scrollbars

And wouldn't it be more helpful if we explained a bit about them? :-)


-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Customisable scrollbars with css

[Christian Heilmann]

> This is not a problem I am having but just a question that I have had for a
> while and just decided to ask the people in the know (",) heehee
>
> Is there anyway to customize scrollbars using css so that they don't default
> to the basic crappy windows grey ones? I know tis not a big thing as I
> generally tend to stay away from having to make users scroll as much as
> possible, but in some cases it can't be avoided, so if one was to go about
> it how would it be done, and that is only if it indeed can be done.

No, you can colour them in Opera and MSIE, with non-standard CSS
selectors[1] but you won't be able to change their look completely and
cross browser. For example Safari will always show the same ones.

Also notice that what is "ugly and grey" for you is "familiar" to
users, whereas an own slider control or style might be confusing at
first. We make a lot of decisions about web sites subconsciously and
when I need to find an interactive element first I feel uneasy - no
matter how versed you are in the web.

That said, if there is no way out you can use JavaScript to simulate
your own scrollbars with the YUI slider control [2], but in most cases
it is not worth the hassle IMHO.

[1] http://www.yourhtmlsource.com/stylesheets/scrollbars.html
[2] http://developer.yahoo.com/yui/slider/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE page is too long and produces vertical scroll bar

[Christian Heilmann]

>  "http://www.w3.org/TR/html4/loose.dtd";>

Quirksmode, anything can happen! Use a DOCTYPE that throws the browser
into standards mode.
http://css-discuss.incutio.com/?page=RenderingMode

> table#zcontainer {
> height: 100%;
> width: 780px;
> background-color: #FF;
> margin: 0 auto;
> text-align: left;
> border: 1px solid #00;

100% + 2px (1px border on top and bottom) = vertical scrollbar.
http://css-discuss.incutio.com/?page=HundredPercentHeight

The trick to a clever CSS layout is to start with content and then
build your layout around it. Markup is there to describe content, not
to paint on a canvas.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS only Popups and Dropdown menus 2 Questions...

[Christian Heilmann]

Could you please mention the two questions in the subject? That would
make it easier to search the archive.

>   (1) Recently, I have seen these sleek looking pop-ups being used more and 
> more in Web sites. Does anyone know much about them and where can I get some 
> example source code?
> The following URL has an example of these pop-ups. See the double underline 
> text.  http://www.cssplay.co.uk/menus/flyoutt.html

http://www.kontera.com/ is the company offering them. Personally I
consider them very disruptive to reading the examples and made me stop
visiting http://www.devarticles.com/. I
If you want an own implementation of how to create popups like that
you can use the YUI
tooltop:http://developer.yahoo.com/yui/container/tooltip/index.html

> (2) Where is a good place to get information how vertical cascade menus are 
> built in CSS?

http://www.htmldog.com/ptg/archives/50.php

Question though: Why would you want to build them in CSS? Do you know
any benefit of creating them using CSS as opposed to using HTML and
JavaScript?
I'm asking because this is a very common question here and it'll be
good to know what makes people think CSS is a good technology for
this.

Personally I could think of 4 reasons against CSS (without any
JavaScript backup) for it:

- No keyboard access on most - even modern - browsers
- No chance to test if the user agent can support them (with JS you
can test for support and even for a mouse)
- No chance to delay the hiding of the menu in case the user is not
able to use the mouse steadily or in a straight line
- No chance to determine if the next menu level will be shown outside
the current viewport and cause scrollbars ( you can with JavaScript )
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/