Re: [css-d] css-d Digest, Vol 157, Issue 1

[Colin (Sandy) Pittendrigh]

OK I'll offer my $0.02

I stopped following the site because CSS in a vacuum is not interesting, to
me.

Real world work involves a three part combination of HTML CSS and
Javascript.

Discussing one without the others is like trying to get healthy by exercise
alone, without paying attention to diet and the sleep cycle.

We live in a world of systems.  That's what I'm interested in. Whole
systems.

On Mon, Jan 4, 2016 at 2:27 PM,  wrote:

> Send css-d mailing list submissions to
> css-d@lists.css-discuss.org
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://lists.css-discuss.org/mailman/listinfo/css-d
> or, via email, send a message with subject or body 'help' to
> css-d-requ...@lists.css-discuss.org
>
> You can reach the person managing the list at
> css-d-ow...@lists.css-discuss.org
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of css-d digest..."
>
>
> Today's Topics:
>
>1. Re: [ADMIN] Hello, my friends, hello (John D)
>2. Re: [ADMIN] Hello, my friends, hello (Micky Hulse)
>3. Re: [ADMIN] Hello, my friends, hello (Tom Livingston)
>4. Re: [ADMIN] Hello, my friends, hello (Micky Hulse)
>5. Re: [ADMIN] Hello, my friends, hello (Felix Miata)
>6. Re: [ADMIN] Hello, my friends, hello (Micky Hulse)
>7. Re: Flexbox Fallback to Justify Nav Items with Equal Spacing
>   (Eric A. Meyer)
>8. Re: [ADMIN] Hello, my friends, hello (Erik Visser)
>9. Re: [ADMIN] Hello, my friends, hello (MiB)
>   10. Re: [ADMIN] Hello, my friends, hello (John Griessen)
>   11. Re: [ADMIN] Hello, my friends, hello (John Griessen)
>   12. Re: [ADMIN] Hello, my friends, hello (D'Arcy J.M. Cain)
>   13. Re: [ADMIN] Hello, my friends, hello (Davies, Elizabeth)
>   14. Re: [ADMIN] Hello, my friends, hello (Cheryl D Wise)
>   15. Re: [ADMIN] Hello, my friends, hello (Theophan Dort)
>   16. Re: [ADMIN] Hello, my friends, hello (John D)
>   17. Re: [ADMIN] Hello, my friends, hello (John Griessen)
>   18. Re: [ADMIN] Hello, my friends, hello (GJim)
>   19. Re: [ADMIN] Hello, my friends, hello (Kathy Wheeler)
>   20. Re: [ADMIN] Hello, my friends, hello (MiB)
>   21. Re: [ADMIN] Hello, my friends, hello (Del Wegener)
>   22. Re: [ADMIN] Hello, my friends, hello (D'Arcy J.M. Cain)
>
>
> --
>
> Message: 1
> Date: Wed, 30 Dec 2015 17:37:23 +
> From: John D 
> To: COM , "Eric A. Meyer" ,
> CSS-Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: 
> Content-Type: text/plain; charset="Windows-1252"
>
>
>
>
> > On the other hand, CSS and HTML are like salt and pepper, bert and
> ernie, bread and butter. They seem to be the keys to each other?s locks, or
> perhaps together they form a whole technology, and within that perspective,
> I can see a list embracing both technologies as a focus.
> >
>
> Despite what people might think, Bootstrap is pure CSS and the code works
> out of the box for today's hunger for responsive websites.
>
> JS is optional extra as is glyphicons fonts and we don't need to discuss
> here if it is considered outside the scope of this forum.
>
>
>
>
> --
>
> Message: 2
> Date: Wed, 30 Dec 2015 10:21:45 -0800
> From: Micky Hulse 
> To: CSS-D Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID:
> 

[css-d] Future of CSS and media queries for responsive design

[Colin (Sandy) Pittendrigh]

As the resolution of cell phones rapidly escalates I find myself wondering
how much longer media queries can be useful.  Phones will soon have the
same nominal resolution as desktop monitors, and yet still be tiny by
physical comparison.

Aren't media queries, as they now are a flawed system, heading for a high
speed crash? Or do I misunderstand how this works?

If so--if a technology change is indeed looming--will CSS be part of the
ultimate solution?



-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] validating CSS when?

[Colin (Sandy) Pittendrigh]

Are there any good lists--populated by serious developers, like this
one--wear on topic includes all the trades real developers use, like
server side scripting, databases, javascript AND CSS?  There are many such
forums.  But forums tend to be populated by beginners while lists tend to
be populated by real coding soldiers.

On Tue, Nov 25, 2014 at 10:30 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:



 Barney Carroll wrote:

  That's an interesting approach. Any particular reason(s) not to use HTML5
 at all times?


 Yes, but this is not the place to discuss it/them !
 Philip Taylor

 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] sticky footer position in IE - bottom of window instead of page

[Colin (Sandy) Pittendrigh]

Am I right?  I'm asking, not proclaiming.

Code like this is perhaps useful because it solves a problem.  But it's a
hard-coded hack relying on unintended side effects and more likely than not
to sometime break in the future. More likely than more standard codes that
don't exploit side effects (negative margins and hard-coded pixels etc)

It relies on hard-coding and coupling footer-height in pixels to codes
relating to the page-wrap block, that in a better world would be modular
and independent.  And not so tightly coupled.  There must be a better way.
I'll have to read through the entire thread to see what other solutions
there are.  I do  it with fixed positioning on my little (amateur) website.


.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px;
}

On Sat, Nov 8, 2014 at 5:06 PM, Debbie Campbell d...@redkitecreative.com
wrote:

 I stripped out all the sticky footer code and tried a few other methods,
 this one worked and tested down to IE8 with no problems:

  http://css-tricks.com/snippets/css/sticky-footer/


 The footer is now where it should be. Thank you for your input everyone.

  http://www.redkitecreative.com/dev/boisson/


 Also I fixed the :focus state for links, thanks for that too.

 --
 Debbie

 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Equal height script not working on some pages

[Colin (Sandy) Pittendrigh]

I see it (the problem) in Chrome on Linux


On Mon, Jun 30, 2014 at 5:53 AM, MiB digital.disc...@gmail.com wrote:


 30 jun 2014 kl. 06:54 skrev J.C. Berry jcharlesbe...@gmail.com:

  Hello all,
  We are having an issue of content running off some pages past the
  footer-even though we are using an equal height script. Here is one of
 the
  pages:


 You don't specify which browsers have an issue. Looks OK in Safari 7.0.4
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Select by descendant?

[Colin (Sandy) Pittendrigh]

You can with X-Path in XML.  No reason why it shouldn't be possible
eventually--as part of CSS.  And many reasons why it should


On Fri, May 16, 2014 at 5:06 AM, MiB digital.disc...@gmail.com wrote:


 may 16 2014 11:53 BPJ b...@melroch.se:

  is it possible to select an element based on the presence or absence of a
  descendant with some attribute?


 AFAIK it's not possible to select a parent element based on its
 descendant, no.

 Can you describe a specific example? Do you control the HTML source?
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] floating thumbnails

[Colin (Sandy) Pittendrigh]

The following link displays an HTML fragment taken from a (home-brewed)
content management system, stripped down to the relevant block area only:
div id=main-gallery-disp ...stuff.../div

The HTML:
http://fliesfliesflies.com/fragments/Gallery/ttest.html

The (stripped down)  CSS:
http://fliesfliesflies.com/css/rrobo.css

In the CSS the codes related to floated thumbnails is at the bottom of the
CSS file. Each thumbnail is enclosed in a paragraph element such as:

p class=robonava href=

http://fliesfliesflies.com/index.php?page=Gallery/Pelicans-skies.jpg;
img src=/fragments/Gallery/archive/thumbs/tn-Pelicans-skies.jpg
alt=
Pelicans-skies.jpg //a/p

In this Gallery page I'd like all thumbnails to float left around the
main display image without making odd, unpredictable white space areas on
the next line after a thumbnail runs off the right side of the display area.

In other words I'd like the thumbnails to float into an orderly table like
arrangement, controlled entirely by the browser, depending on current
viewport width.

is this possible with CSS only?

-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] hiding things and bandwidth?

[Colin (Sandy) Pittendrigh]

Only this group's mentor and creator can set the rules.  Because this group
IS a forum for discussing CSS it seems right to limit fine-grained
how-to-do-it discussion to CSS only.  But the use of CSS in the real world
invariably happens in a context that almost always includes a mixture of
technologies including databases, server side scripting and javascript.  So
at higher big picture level some discussion about how CSS fits into the
overall scheme of things still seems appropriate.

Using Javascript cookies and (initially) a double GET to determine the
state of the current user agent makes the most sense to me--so custom CSS,
custom image sizes and even custom HTML can be sent back down the pipe.
 CSS only mobile first approaches violate basic theory of programming
rules because mobile first inescapably couples itself to both small mobile
displays plus the vastly different requirements of bigger desktop displays.
 Writing codes with semi-secret two role agendas is seldom a good idea.


On Mon, Feb 17, 2014 at 9:48 AM, Chris Williams ch...@clwill.com wrote:

 Which is precisely what I suggested as one of the two alternatives:  use
 JS to serve up content based on screen size.

 On 2/17/14 12:27 AM, MiB digital.disc...@gmail.com wrote:

 
 Javascript analysis of screen type ...

 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Will the unsemantic HTML elements B and I be soon phased out?

[Colin (Sandy) Pittendrigh]

Interesting question.  Much as I personally dislike them, web-app editors
like tinyMCE and FCK rely on tags like b and i and font
color=whatever
I don't see why those programs couldn't be re-written to use span
style=label:value;.  But it would cause some developers to jump around
quickly.


On Sat, Feb 15, 2014 at 3:47 PM, Ezequiel Garzón garzon.luc...@gmail.comwrote:

 Greetings to all,

 I know this is highly subjective question, but am curious as to what
 people think about this issue. Allow me to put forth a few questions,
 and you can pick all of any of them. When the WHATWG describes the I
 element as a span of text in an alternate voice or mood, and the B
 element as a span of text to which attention is being drawn for
 utilitarian purposes, I'm puzzled... wouldn't this be the role of a
 special class for the SPAN element? I'm actually glad I and B are
 survivors, but seeing that U and S have been deprecated, it doesn't
 seem very consistent to keep these two one-letter elements around.
 And, going back to my main question, do you believe these two elements
 will be deprecated soon?

 Thank you in advance for any thoughts you may have on the matter.

 Best regards,

 Ezequiel
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Controlling per-page nav contents

[Colin (Sandy) Pittendrigh]

The original poster indicated he is generating his pages with PHP.  Others
since have shown how the home link could be hidden on the home page only
using CSS rather than PHP. But the same result *could* be accomplished with
server-side PHP logic. So perhaps the interesting question is Which avenue
is better?  CSS or server side scripting?

Is there something about the CSS only approach that adds measurable value?


On Tue, Feb 4, 2014 at 11:17 AM, Tom Livingston tom...@gmail.com wrote:

 On Tue, Feb 4, 2014 at 1:10 PM, John Johnson j...@coffeeonmars.com
 wrote:
  I apologize if this turns out to be more a PHP question, but is there a
 way to eclude a particular nav link on particular pages?
 
  the specific: prevent the Home page from having a text/nav element
 Home while the Home nav elements would be visible on all other pages.
 
  Thank you,
 
  John


 Normally, I just class a main wrapper (consistent on all pages) or the
 body element and attack it that way...

 .homepage nav a.home{display:none; visibility: none;}


 --

 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] Detecting Quirks Mode

[Colin (Sandy) Pittendrigh]

I can see how the following Quirks Mode question could be construed as not
about CSS.

But perhaps it is because CSS is unpredictable and semi-worthless when
browsers get tripped into Quirks Mode.  I've been getting a lot of legacy
work recently where website owners bring me ancient table layout
Dreamweaver sites they want updated--so they appear well on phones as well
as on monitors.

I'm finding those sites are often riddled with HTML errors, which are
usually easy enough to fix.  One persistent error is a lack of alt=xxx
tags inside images, and also lots of  mis-matches  between DOCTYPE and
coding style--often with no closing /p elements for paragraphs and
ongoing coding salad that mixes br with br/ and img elements that
sometimes self-close and sometimes do not, all in the same file.

How does one know when a browser is or is not in Quirks Mode?  Sometimes
it's obvious. Sometimes it is not.

-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] Massive mouse over dropdowns--possible with CSS?

[Colin (Sandy) Pittendrigh]

The following West Marine website has large complex dropdown navigation
menus that change as mouse-over changes on a horizontal row of banner
links. West Marine  does this with javascript.

Is the same thing possible with CSS? Examples? I'm familiar with vertical
list-like CSS dropdowns (or popout horizontally) menus. But these are more
like multi-column dropdowns.

I'm not even sure I like this, design wise. But I have a customer who wants
it. Is requesting it.

So I wonder about how best to do it.

http://www.westmarine.com/webapp/wcs/stores/servlet/TopCategories1_11151_10001_-1

-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Trying to get the big picture view on responsive design

[Colin (Sandy) Pittendrigh]

many such breakpoints (out there in practice) are defined in ems, even when
the author is thinking pixels, where one EM is calculated as 16 pixels.

/* for 600px ...(16 * 37.5 == 600)  */
@media all and (min-width: 37.5em) {

...css goes here
}

I've been doing this because the examples I copied did this. But I don't
know why. Can anybody explain this issue?


On Wed, Nov 13, 2013 at 6:36 AM, Tim Arnold tim.arn...@gmail.com wrote:

 On Wed, Nov 13, 2013 at 7:26 AM, william drescher
 will...@techservsys.com wrote:

  I looked and googled but... what is a css breakpoint?
  Is it just setting width ?
 
  bill
 

 Breakpoints are points at which certain CSS rules kick in.  They are
 most commonly based on the width of your browser viewport but can also
 be tied to other properties of a device.  You use media queries to
 define them.

 A common example would be that you have a block on the page that is
 50% of the available width (maybe lining up horizontally in two
 columns) and you need them to switch to 100% wide on smaller screens
 (stacking vertically instead of horizontally).  In the case below, any
 screen less than 700px wide would do this.

 700px would be the breakpoint

 .story{width: 50%; float: left;}

 @media only screen and (max-width: 700px){
  .story(width: 100%; float: none;}
 }

 NOTE: this is not just about width.  You could change anything at all
 defined in CSS at these different breakpoints.

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

 Tim




 --

 tim.arn...@gmail.com
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Trying to get the big picture view on responsive design

[Colin (Sandy) Pittendrigh]

Good responses. Thank you all.  This has helped me clarify the issues.

I have yet to design a site phones first, from the ground up. I'm currently
busy trying to retrofit a few older ones. I am discovering I want to send
different markup down the pipe--however--rather than media query CSS edits
to the same markup.

But that has to be done with server side codes that rely on a double GET
for the first request, so a cookie can be set. Then you can send fewer
images, different images and different markup, all matched with its own
custom CSS.


On Mon, Nov 11, 2013 at 1:17 PM, Tom Livingston tom...@gmail.com wrote:

 On Mon, Nov 11, 2013 at 2:37 PM, Colin (Sandy) Pittendrigh
 sandy.pittendr...@gmail.com wrote:
  I'm a beginner at responsive design.  I understand the mobile first
  argument which (at least from the client side) boils down to Design for
  the phone first and then use CSS media queries to vary floats and widths
 as
  needed, and to use javascript to add non-essential images on the fly, for
  larger monitors.
 
  However.  Intricately planning individual layouts for all possible
 devices
  seems error prone to me. If not a fool's errand.  New gizmos show up all
  the time.
 
  In my limited experience totally fluid layouts scale well or well enough
  between desktop and tablet.  The literature frequently faults fluid
 layouts
  for looking bad when the user drags the browser out to too wide.  But I
  don't see that as a problem.
 
  When I drag a fluid layout out to too wide I immediately pooch it back to
  narrower again, until it looks right.  I think that's what everybody
 does.
 
  So now (if fluid layout covers both desktop and tablet) all you have to
  worry about is one media query for phone size gadgets.  Removing all
 floats
  invariably makes a mess.  A better first draft is to make every block
  element float left.  Full width blocks still stack vertically. Narrower
  blocks sit side by side. A small amount of custom tuning from that point
 on
  is usually all it takes. Or at least so it seems.  I am new at this.
 
  I'll skip over server-side device detection for now. Although that seems
  like the most powerful technology--if detail-oriented micro-managed
 layout
  really is the goal.
 
  Does anybody want to argue against that big picture view?  Or amend it
  some, for the benefit of a beginner?
 


 Fluid/flexible layouts are, IMO, best. Like you mention, new devices
 are coming out all the time. Percentage width on your structure help
 you cover all the varying widths. Start mobile first, and adjust
 layout with breakpoints when the *content* requires it. Sometimes a
 single column is all you need up to 600px wide or so. I generally use
 3-4 breakpoints, adding in others as need to fine-tune widths or # of
 columns, etc.



 --

 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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 Simpsons in CSS

[Colin (Sandy) Pittendrigh]

At first glance I think these animations are totally cool. And then I start
to think they're a bit like text blink on steriods.  A changing line in
the sixth place means real world caution is advised


On Tue, Nov 12, 2013 at 8:23 PM, Alan Gresley a...@css-class.com wrote:

 On 13/11/2013 5:14 AM, COM wrote:

 This is cool and all, but…seriously, is CSS being touted as an
 illustration tool?
 Am I missing a concept here?

 I am very impressed by the samples shown…

 John


 I have used CSS to demonstrate how CSS works or may work.


 This demos show how 'transform-origin' can be used. Imagine Bart tumbling
 over and over or cartwheeling. :-)

 http://css-class.com/test/css/3/2d-animation/box-turning-on-egde2.htm


 This demo shows how gradients could be theoretically be animated (only
 possible by using element() which only works in Firefox~Gecko).

 http://css-class.com/test/css/3/image/element-gradient-
 rotate-animation1.htm


 This demo shows how element() could be used (only works in Firefox~Gecko).

 http://css-class.com/test/css/3/image/element-water-
 background-movement1.htm







 --
 Alan Gresley
 http://css-3d.org/
 http://css-class.com/

 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] Trying to get the big picture view on responsive design

[Colin (Sandy) Pittendrigh]

I'm a beginner at responsive design.  I understand the mobile first
argument which (at least from the client side) boils down to Design for
the phone first and then use CSS media queries to vary floats and widths as
needed, and to use javascript to add non-essential images on the fly, for
larger monitors.

However.  Intricately planning individual layouts for all possible devices
seems error prone to me. If not a fool's errand.  New gizmos show up all
the time.

In my limited experience totally fluid layouts scale well or well enough
between desktop and tablet.  The literature frequently faults fluid layouts
for looking bad when the user drags the browser out to too wide.  But I
don't see that as a problem.

When I drag a fluid layout out to too wide I immediately pooch it back to
narrower again, until it looks right.  I think that's what everybody does.

So now (if fluid layout covers both desktop and tablet) all you have to
worry about is one media query for phone size gadgets.  Removing all floats
invariably makes a mess.  A better first draft is to make every block
element float left.  Full width blocks still stack vertically. Narrower
blocks sit side by side. A small amount of custom tuning from that point on
is usually all it takes. Or at least so it seems.  I am new at this.

I'll skip over server-side device detection for now. Although that seems
like the most powerful technology--if detail-oriented micro-managed layout
really is the goal.

Does anybody want to argue against that big picture view?  Or amend it
some, for the benefit of a beginner?

-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Flexbox order and first/last elements ...

[Colin (Sandy) Pittendrigh]

I did some searching.  A combination of flexbox layout and srcset images
may (eventually) make responsive design a non-issue.  But in the meantime
there are browser version and prefixing issues to learn first, before
attempting to use any of it.  All of this looks promising (I'm a beginner,
not an expert).

IE 10 supports a prefixed syntax.  IE 11 is more standards compliant. But
what about the hoards of legacy XP users?  If the developer has to use IE
conditionals and then to write legacy CSS as well as prefixed and not
prefixed flexbox and srcset codes, what's the point?  Am I missing
something?  How can we get Microsoft to upgrade the old browsers--which
cause so much pain?

Or is there a current benefit--that's worth the effort--of using the new
stuff now?


On Sat, Oct 26, 2013 at 12:07 AM, Micky Hulse mickyhulse.li...@gmail.comwrote:

 Thanks for the reply/answer/code Philippe! It's much appreciated.

 On Fri, Oct 25, 2013 at 11:01 PM, Philippe Wittenbergh e...@l-c-n.com
 wrote:
  Directly? I don’t think so - all those (:first-*, :last-*)
 pseudo-classes target real elements in the DOM.

 Ah, that's good to know. Thanks for the clarification. :)

  But if you know that the e.g. second div in your layout will be moved to
 be visibly the first one, you can use the nth-child pseudo-class:
  div:nth-child(2) { background: lime }

 Great! I'll play with that.

 Have a nice weekend.

 Cheers,
 Micky

 --
 git.io/micky
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] Implementing Responsive Design

[Colin (Sandy) Pittendrigh]

Been reading Implementing Responsive Design by Tim Kadlec--which is
surprisingly well-written for an IT book.

Kadlec seems to recommend building a site's CSS from the cell phone
up--because some phones  still don't handle media queries.  In other words
he starts off by making his sites look good at the smallest resolution, and
then uses media queries (and sometimes Javascript) to add floats and what
ever else is needed to make the site look right as the view port increases.

This came as a surprise to me. I assumed everybody did the opposite: still
build for the desktop, then fiddle with media queries and viewport widths
to make the site acceptable for pads and phones too.

His approach does sometimes require Javascript, to loop through all the
block elements of a certain class and then add to add CSS as needed.

What are the group's thoughts about this approach?  Do you build from the
desktop down, or from the cell phone up?

-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] Responsive Design resources

[Colin (Sandy) Pittendrigh]

I'm a retired and slightly obsolete programmer who wants to jump back into
the game. There seems to be a lot of work remodeling websites so they work
well with cell phones, and also a lot of work moving toward cloud-based
everything.  I've got a good handle on the cloud based stuff.

But I'm clueless about cell phone CSS strategies. I learn quickly.
*What are some good online responsive design resources?  * (my first
attempts to find good resources yielded poorly-written jargon)


-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] Form layout patterns

[Colin (Sandy) Pittendrigh]

Good Bradfrost link above. Thank you for that.

Here's a question. Since the great CSS Positioning leap forward we no
longer have to use nested tables for overall page layoutas did most of
us during the late 1990s.

But I do occasionally (still) use tables for laying out forms.  As long as
the tables are NOT nested inside the TD elements of a surrounding table,
and as long as it's an occasional tool only, I don't see the harm.

Violent prejudice against tables for layout is similar, in a way, to the
way C-programmers now rail against the infamous goto statement, which is
sometimes (break out of a doubly nested loop) useful and not
harmful.if kept under control, and if the goto points forward a
few lines of code only.

So. Is table layout now a sin no matter what? Even if not nested and used
only occasionally? .as for forms?



On Tue, Feb 5, 2013 at 8:19 AM, Tom Livingston tom...@gmail.com wrote:

 On Wed, Jan 30, 2013 at 3:51 PM, Chris Williams ch...@clwill.com wrote:

  With a hat tip to Phillipe, I've just started building off this model,
 and
  I love it.  Nice responsive form shown in the form with left labels
  example.
 
  http://bradfrost.github.com/this-is-responsive/patterns.html
 
  I had been doing all tables for really tight control of forms, but this
  div-based approach seems to be working and allows the flexibility to do
  the side-by-side alignments and so on that you're mentioning.  While at
  the same time being responsive and tolerable down to the small form
 factor
  devices.
 
  Not that I'm there/done/complete, but I'm coding it all right now and it
  seems to be working.
 
  HTH,
  Chris
 
  On 1/29/13 12:00 PM, Tom Livingston tom...@gmail.com wrote:
 
  Hello all,
  
  Do any of you have a favorite form styling/structure pattern that you
  always use? I am particularly looking for a layout that has labels next
 to
  form fields as opposed to above them. Also, multiple fields on one line,
  like 'state' and 'zip' next to each other, with respective labels, all
 on
  one line.
  
  Every time I have to do a form I usually end up doing battle with some
  aspect of it. Getting the above mentioned scenario all on one line,
 having
  labels vertically centered on the height of the fields next to them, etc
  always seems to be a stumbling block for me. It never goes smoothly.
 I've
  tried several approaches, but each seems to have a downside.
  
  Off-list replies as necessary...
  
  --
  
 

 Thanks Chris



  __
  css-discuss [css-d@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/
 



 --

 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 __
 css-discuss [css-d@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/




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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] android blackberry emulators

[Sandy]

If accuracy is your bag in the end you'll want to break down and
purchase a mobile device



I'm with David here. Simulators/emulators don't bring you very far.

As far as layout ( css) is concerned, most of the testing can be
done using Chrome and Safari, as most devices use Webkit based
browsers (probably better Safari release builds, as Chrome has a much
faster release cycle, esp compared to the default browser included
with Android devices… cough cough upgrade path ?).  Just resize your
window to evaluate your layout at various viewport dimensions. The
added bonus is that you can use the build in developer tools (Webkit
Inspector) to troubleshoot.

Where Simulators of all kind fail completely is testing interaction
design. There are so many pages out there that are very hard to use,
simply because it is near impossible to click on links with fatty
fingers - the touchable area is simply too small. Remember that a
mouse pointer is very precise device with a _small_ tip. And that is
only one issue. Nothing beats the real device for that.


hi all,

When I got various folks to look at this
http://sandyfeldman.com/resources/css3animation/

one friend with the latest iphone saw all the animations, another with 
an iphone a generation older couldn't get at some of them. Folks on the 
list with other devices saw no animations, or some, or all.


Philippe, David, you are both absolutely right - simulators are a pale 
second choice. Rob's comment I think in the end you'll want several 
devices is pretty much the way it is. I want several devices.


Sadly, while one thing to test with is an option, several things aren't.

I am really *really* missing browsercam, which instead of simulations 
provided actual screenshots and remote access to devices. Is there 
anything else like that out there?


Philippe, in the meanwhile I will take your advice and use chrome and 
safari resized windows to get an idea of what the various devices will 
display.


thanks everyone for your thoughts.

Sandy

__
css-discuss [css-d@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] android blackberry emulators

[Sandy]

http://android-emulator.org/ http://blackberry-emulator.org/
http://tablet-emulator.org/

if someone has the device and could compare the version offered up
by the emulator to the real thing and let me know if the emulator
is somewhat accurate I would be very grateful.

What are your favourite emulators? Screen capture services? Other
ways of checking various browser and hardware combinations?




Without getting into details, I develop for android and iOS products
(iPhone, iPad) and I don't concern myself with the others. From
several different sources, those two hold over 80 percent of the
market and their share is growing.

You can also sign up for Browser Cam -- they support several
different devices.


Hi Tedd,

Thanks for taking the time to answer.

I am looking for emulators and screen capture services mostly because 
browsercam, a service that I relied on for years, is closing. My 
membership has expired

http://www.browsercam.com/important-message/

and I find myself a bit at sea.

Do you know of any comparable services out there?

http://android-emulator.org/
is this a reasonably accurate emulator?

thanks!
Sandy

__
css-discuss [css-d@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] android blackberry emulators

[Sandy]

http://ripple.tinyhippos.com/

For Webkit-based Blackberrys, at least, Ripple is officially supported by
RIM, who manufacture Blackberries. Which is a good start.


Barney - thanks! I've just installed this and will check it out soon.

best regards,
Sandy
__
css-discuss [css-d@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] Close the GAP

[Sandy]

I'm having problems closing the gap on the nav menu for the following site.
http://newebirl.ie/mnsite/

I'd like the green bar (nav) to be flush with the image above it and the
gray box under it so you don't see any white space.


not sure how you feel about negative margins, but you can try
#mainNav ul { margin: -3px 0px 5px 0; padding: 5px 0 5px 10px;}

hope that helps.
best regards,
Sandy
__
css-discuss [css-d@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/

[css-d] android blackberry emulators

[Sandy]

hey all,

I am looking for a good way to check my work on various platforms. I've 
found these emulators -


http://android-emulator.org/
http://blackberry-emulator.org/
http://tablet-emulator.org/

if someone has the device and could compare the version offered up by 
the emulator to the real thing and let me know if the emulator is 
somewhat accurate I would be very grateful.


What are your favourite emulators? Screen capture services? Other ways 
of checking various browser and hardware combinations?


thanks!
Sandy
__
css-discuss [css-d@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/

[css-d] css3 animation - do hover and focus work on touch screen devices?

[Sandy]

hey all,

I continue to noodle away on my css3 animation sampler which I've moved to
http://sandyfeldman.com/resources/css3animation/

all the animations are set to trigger on hover and focus. Now - when you 
go to this page using a touch screen device what happens? Is there a way 
to trigger the animations?


http://iphonetester.com/
http://ipadpeek.com/

make it look like everything is just fine, but is it really?

If it's not, then is there something I can add like

A#transform:hover, A#transform:focus, A#transform:touch {
-webkit-animation: transform 2s infinite alternate;
-moz-animation: transform 2s infinite alternate;
-ms-animation: transform 2s infinite alternate;
-o-animation: transform 2s infinite alternate;
}

or do I need to use javascript? or something?

thanks,
Sandy
__
css-discuss [css-d@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] css3 animation - do hover and focus work on touch screen devices?

[Sandy]

http://sandyfeldman.com/resources/css3animation/



Some of the animations work, but not all of them, in Android/2.3.6
[a low-end mobile touch screen device].

thanks for checking.

I did get to see this on an older iPad and iPhone today, and it looks 
like the ones with a background pattern, border effects or z-index 
animations don't work. A friend using iOS 5.1.1 on iPhone 5 says he sees 
all of them.


interestingly, I installed Opera 12 beta and that group causes problems 
for that browser, too. I sent Opera a note about this.




Perhaps feeding mobile just a few
of those animations might be more appropriate?
yeah - the sampler is pretty extreme. It's hard to imagine a real site 
with that many doodads.



aside I only looked at your page in portrait-view. The mobile
media queries are not kicking-in; consequently, it is simply a
reduced width version of desktop-- the top horizontal links and the
sidebar links verge on being unreadable and unusable/aside


oh dear. thanks for letting me know. They were working on the iPhone  
Pad I looked at today. Is there something different I should be doing 
for Android? meta name=viewport? something else?


best regards,
Sandy
__
css-discuss [css-d@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] css3 animations - page check please

[Sandy]

You do know that WebKit browsers, Opera and IE10 also support
animations with the appropriate prefixes, I hope…


http://sandyfeldman.com/css3animation/8test.shtml
getting this to work in different browsers was surprisingly tricky 
(ignore the heap of rubble that's 1test to 7test please).


I've got something now that works in a selection of Mac browsers. It 
works in FireFox 13.0.1 and more or less works in Chrome 19.0.1084.56 
and Safari 5.17.


It limps along in Opera 11.52, not showing animations but just 
mouseovers when it can.


3 seems to only work in FF - I haven't figured out where I've scrambled 
the syntax yet for Safari  Chrome.


2 questions:
- does this work in pc browsers?
- what's up with 3?

thanks for looking at this,
Sandy
__
css-discuss [css-d@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] css3 animations - page check please

[Sandy]

3 seems to only work in FF - I haven't figured out where I've scrambled
the syntax yet for Safari  Chrome.

2 questions:
- does this work in pc browsers?
- what's up with 3?



A.1. If this refers to #3, you'll have the same problem
A.2. You don't have a gradient defined for Webkit.

Instead, you have this in line 92 of your page:

   background-image: -moz-webkit-gradient(-45deg, white 25%, transparent
25%);


hey thanks David! way to spot the garble.

I think it's fixed now
http://sandyfeldman.com/css3animation/8test.shtml

best regards,
Sandy
__
css-discuss [css-d@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] css3 animations - page check please

[Sandy]

http://sandyfeldman.com/css3animation/8test.shtml


does this work in pc browsers?

This end: HP Pavilion g4 Notebook PC

Chrome/19.0.1084.56
1/ Changes block background-color-- no pattern. Intentional?
2/, 4/, 5/, 6/, 7, 8/ and 9/ :: pass
3/ :: fails

Opera/12.00
1/ Changes block background-color-- no pattern. Intentional?
2/ :: Fails [pattern shows on hover but it is static]
3/, 4/  :: Fails
5/, 6/ :: Pass
7, 8/, 9/ :: Fail

Firefox/13.0.1
1/ Changes block background-color-- no pattern. Intentional?
2/ through 9/ :: Pass

Safari/5.1.7 is the same as Chrome/19.0.1084.56

Gecko/2.10.1 is the same as Firefox/13.0.1

IE/9 is the same as Opera/12.00.


David, thanks so much for taking the time to go through these - this is 
really helpful.


- 1 *is* just a colour change (as in starting small). maybe I should 
beef that up ...


- I think I've fixed 3 - what do you think?

- Opera and IE seem to just be showing the hover effects that don't 
animate. I just added a bunch of @-o-keyframes but I don't think it's 
helped.


http://caniuse.com/#feat=css-animation
(thanks HallMarc) seems to say that IE and Opera don't support these, 
but if anyone can think of a way to get the animations working in these 
browsers that would be much appreciated


Thanks again to David, David and HallMarc for looking at this.

best regards,
Sandy
__
css-discuss [css-d@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] css3 animations

[Sandy]

http://sandyfeldman.com/tests/animation/css3animation.html

http://jigsaw.w3.org/css-validator/validator turns up 80 errors on
the css, all connected to @-moz-keyframes and -moz-animation



Under 'options', you can turn vendor prefixed stuff to 'warning'.

thanks.



You do know that WebKit browsers, Opera and IE10 also support
animations with the appropriate prefixes, I hope…


Philippe, thank you much for taking the time to look at this. I am going 
to look for the appropriate prefixes and try again.


best regards and thanks again,
Sandy
__
css-discuss [css-d@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/

[css-d] css3 animations

[Sandy]

hey all,

I have been working on figuring out css3 animations and have come up 
with a couple of test pages.



http://sandyfeldman.com/tests/animation/css3animation.html

http://jigsaw.w3.org/css-validator/validator
turns up 80 errors on the css, all connected to
@-moz-keyframes and -moz-animation
is there a way to get the animations and have the css validate? Should I 
be rewriting this?


Other things that don't work the way I would like:

I added
-moz-box-sizing: border-box;
to 7 and 9 to keep the animated effects on the box borders from bulging 
out the boxes.


When I mouseover it *almost* works, but there is a shift in the width 
just towards the end of the animation - just a brief bulge. I can't 
figure out where that's coming from or how to get rid of it.


Another especially weird thing - locally all the boxes are one size, 
when I upload the page to the server, without changing anything, they 
are a bit narrower. Any idea of what's going on?


On 18 there is a little extra white border on the top of the box - looks 
like one more pixel. I have no idea where that's coming from. Any thoughts?


Also, in 23 - the image expands on mouseover, which is hunky dory, but 
it also degrades. What I would like is to have the 300px image shrink 
down to 150px and then show its full-sized self on mouseover. This would 
take a different approach but I can't think what it might be.



http://sandyfeldman.com/tests/animation/tires.html
a possible candidate for Inappropriate uses of CSS3

here's the question - is there a way of timing the effects - so 
animation 2 starts a 2 second delay after animation 1?


thanks!

Sandy

__
css-discuss [css-d@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] CSS redesign: criticisms, comments and similar are welcome

[Colin (Sandy) Pittendrigh]

I've been a fan of Romanato site for a long time.
Imagination ideas and ambition trump staid perfection any day.

-- 
/*  Colin (Sandy) Pittendrigh  --oO0
Have code will travel  */
__
css-discuss [css-d@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/

[css-d] getting a link to clear the nested list that opens up on focus and hover?

[Sandy]

There's a site I launched a little while ago where I use a dropdown menu 
that works on hover but not on focus


http://villa-belvedere-croatia.com/en/index.shtml

I was trying to get the TJK pure CSS dropdown to work, but I never did. 
Keyboard accessibility was not a concern for the client so the site just 
launched.


TJK pure CSS dropdown:
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp 



it hasn't stopped bothering me, though. I have been tinkering with Blake 
Haswell's Long Lost Nephew of Suckerfish, Part Deux

http://blakehaswell.wordpress.com/

and come with this:
http://sandyfeldman.com/dropdown/en/test4.shtml
http://sandyfeldman.com/dropdown/css_js/dropdown4.css


it *almost* works the way I want it to. Here's the problem:
when you hover or tab over a link and the sub menu items open up, the 
link below maintains its 15px margin top, but then seems to have padding 
that includes all the sub menu items. It looks pretty wonky.


So, how do I get this link to clear the nested list that opens up on 
focus and hover?


thanks loads!
Sandy

__
css-discuss [css-d@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/

[css-d] dynamic CSS strategies

[Colin (Sandy) Pittendrigh]

This is a CSS discussion list.  So programming issues are not on topic
here.
But if I keep my dynamic CSS question abstract enough I don't see why it
isn't a CSS issue as much as anything else.

Let's say my content management system is currently using a three column
layout, where a left side column of links is usually defined as 16% of
available width.
However,  if it turns out the current page has a larger than normal number
of navigation links,  I could (somehow) set the navigation column width to
25% so it could contain two vertical rows of clickable links, rather than
one vertical column.

What is the best way to do this?

My CMS codes could calculate the number of needed links before generating
any output, and then choose from any one of several hard-coded CSS files
depending on the total link count.  Or I could manipulate the browser's CSS
on the fly with Javascript and the DOM tree (which used to be a
browser-sniffing nightmare, the last time I tried it).  Are there any
alternate strategies I'm not aware of.simply because I'm an amateur
hacker and not a well-educated professional?



-- 
/*  Colin (Sandy) Pittendrigh  --oO0
Have code will travel  */
__
css-discuss [css-d@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] PNG IE 6

[Colin (Sandy) Pittendrigh]

Developers *used* to ask Can we stop supporting IE6 now?

Now we've reached the point were continuing to support IE6 is a mistake, and
bad for the community as a whole. The handful of lagging users who still
cling to this antiquated platform need a wake-up call. They need a slap on
the keyboard rather than a holding hand.

Continued support for IE6 is counterproductive--a bad strategy for the
community at large.


-- 
/*  Colin (Sandy) Pittendrigh  --oO0
Have code will travel  */
__
css-discuss [css-d@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] HTMLdog website / Son of Suckerfish

[Colin (Sandy) Pittendrigh]

Horizontally-oriented drop down menus often run into trouble when the
customer (months or years later) suddenly wants a few more top-level menu
blocks, and there isn't enough horizontal space to make it happen.

It doesn't take much CSS remodeling to make the same menus orient vertically
(and then have the sub-menus pop up left or right rather than below).  And
then you can add new top-level menu items--more or less forever-without
running out of screen real estate.

-- 
/*  Colin (Sandy) Pittendrigh  --oO0
Have code will travel   */
__
css-discuss [css-d@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/

[css-d] Two questions

[Colin (Sandy) Pittendrigh]

http://montana-riverboats.com/Uploads/isitpossible.jpg shows a small crop
from a large layered psd file I got from a designer.

1)
The image above shows the top-left corner of the proposed page's main
content display division, which shows a semi-internal border that looks
like a fuzzy drop-shadow with rounded corners.  In a fixed-width layout I
could imagine making a background image that was
the size of the entire division, and then using that as the division's url
background.

But as a liquid layout, where all the top-level divisions are sized as a
percentage of the available view port, I don't see how that
(the above fuzzy drop shadow internal bordering) would be possible. It it
possible to make a fuzzy border like this in a liquid layout context?
How?

2)
Is it true that liquid layouts are the most portable device-wise? From large
high-res monitors to pads to smart phones?
Corollary: is it true that fixed-width layouts (perhaps a centered 780 pixel
wide wrapper division) are the least portable across
various devices?

...thank you


-- 
/*  Colin (Sandy) Pittendrigh  --oO0
Have code will travel  */
__
css-discuss [css-d@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] Desktop. Tablet. Mobile.

[Sandy]

First-pass. Comments and suggestions appreciated.

This end...
Desktop: OS 10.4
Tablet: No got.
Mobile: OperaMini os SanyoMirro 4 BoostMobile.

uri: http://chelseacreekstudio.com/m/mhr/page/03.php


hi David,

I like how this reconfigures itself quite a lot. It's as handsome on the 
small screens as it is on the big ones.


A tablet simulator you can use is
http://app.protofluid.com/

click add, edit and then size. Your options will be phones 
tablets monitors and televisions. If you click transform and 
pop out you'll get rid of that thing that covers the top of the page.


best regards,
Sandy
__
css-discuss [css-d@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/

[css-d] sub menus show up on hover but not on focus

[Sandy]

hey all,

I am working on a test page that has a sub menu which displays on hover 
but not on focus. How do I get the sub menus (for example the 3 links 
under location) to show up when someone tabs to the link the way they 
do when someone hovers over it?


http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js

The styles I am using more or less came from
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp

but I seem to have lost a key ingredient when I put this to work in my 
page. Any thoughts about how to fix this up?


Thanks!
Sandy
__
css-discuss [css-d@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/

[css-d] getting the TJK design vertical css drop down menu to work

[Sandy]

hey all,

If this looks familiar it's because I changed the subject. I didn't get 
any replies to my last email, subject line sub menus show up on hover 
but not on focus and I'm stumped. I hope someone out there can help!


I am working on a test page that has a sub menu which displays on hover 
but not on focus. How do I get the sub menus (for example the 3 links 
under location) to show up when someone tabs to the link the way they 
do when someone hovers over it?


http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js

The styles I am using more or less came from
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp

but I seem to have lost a key ingredient when I put this to work in my 
page. Any thoughts about how to fix this up?


Thanks!
Sandy
__
css-discuss [css-d@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] getting the TJK design vertical css drop down menu to work

[Sandy]

http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js




The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].




Change this CSS,


#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}


to this (li can not gain focus).


#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}


As with my menu, Opera shows the best accessibility.



[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html


Alan, Thanks so much! (and sorry for the long delay in writing back - 
I've had a bit of a crazy day)


This is much better
http://sandyfeldman.com/villab/en/index.shtml

The sub menu now shows when you tab on the menu item. Tabbing to the 
next item skips the sub menu items and goes directly to the next menu 
item. Any idea of why that's happening?


thanks again,
Sandy
__
css-discuss [css-d@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/

[css-d] IE8 max-width, max-height behavior

[Colin (Sandy) Pittendrigh]

I have a PHP-Sessions/Javascript-Ajax slideshow I use frequently. I can
point a URL at any arbitrary directory of server-side images to produce a
rotating slideshow,
without any hard-coded image names in the client-side Javascript. I set the
height and width of a division for showing the images. Some images may be
larger than the division size, so I set a max-width and max-height for
slideshow images.

For all browsers except IE, if an image is x% wider than than max-width, the
browser reduces both width and height by x%, which preservers the original
aspect ratio. However,  IE8 will (seems to anyway) reduce a width to
max-width without also adjusting height, if the original height was not
greater than max-height. So on IE8 my slideshow show sometimes displays
skewed images, where the original aspect ratio has been annoyingly altered.
 Is this fixable?

#showdiv
   {
 width: 333px;
 height: 250px;
 margin: 0 auto;
 padding: 0;
 overflow: hidden;
   }

#showdiv img { max-width: 333px; max-height: 250px;}



-- 
/*  Colin (Sandy) Pittendrigh  --oO0
montana-riverboats.com */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how the page comes up in IE

[Sandy]

258KB is pretty large for a BG image. Saving as a medium jpg in PS,
brings it down to 15KB with acceptable quality.

http://i.imgur.com/WPVSm.jpg


Kevin,

thanks a million! I have just replaced the background image with the one 
you posted.


best regards, and THANK YOU
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how the page comes up in IE

[Sandy]

http://burlmannconstruction.com/test/
http://burlmannconstruction.com/test/css/burlmann.css



Hmm, try Google up flash of unstyled content? That's what it sounds
like to me.



well, it's not really unstyled. It's just missing that 20px margin.

http://bluerobot.com/web/css/fouc.asp/
and
http://www.techrepublic.com/article/prevent-the-flash-of-unstyled-content/5140996

say it's caused by the @import rule - but I use a link to the style 
sheet, and I also have a second link


link href=css/small_device.css media=only screen and 
(max-width:600px), only screen and (max-device-width: 600px) 
rel=stylesheet type=text/css /


so, I've done what I can for fouc.

excellent guess, but I think it may be something else.

thanks for taking the time to think about this,
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how the page comes up in IE

[Sandy]

Which version of IE? Although, I am fairly certain you will say IE 6 because
you mentioned seeing a gray square. For this I recommend:
http://www.dillerdesign.com/experiment/DD_belatedPNG/


it's ie7.

Marc, at the risk of sounding a bit thick, this looks like a link to a 
script that fixes ie6's trouble with transparency, right? I don't have 
any transparent pngs here. Or is there something on that link that I am 
not seeing?


thanks!
Sandy
__
css-discuss [css-d@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] HTML5 and CSS3

[Colin (Sandy) Pittendrigh]

This may be off-topic in a CSS list.
But the emperor's new HTML5 clothes (it seems to me) are web sockets.

Only Chrome supports them right now? Is that true?  But all browsers will
before long.
And then the awkward XMLHttpRequest will be gone forever.

Web application programming will suddenly be oh so much easier...so much
more like real application programming--where you can call for data and
expect
to get it right now.  That will blow the doors off the current web site
status quo.

Web sockets patched together with a drag and drop mechanism plus
a 3D graphics library, could, for instance, mean Google Sketchup  would
no longer be a windows binary download. You could run it any HTML5 browser.

-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] can CSS constitute an HTML error?

[Colin (Sandy) Pittendrigh]

I found the following on the net:

*Content model*

Generally, block-level elements may contain inline
elements and other block-level elements. *Generally, inline elements may
contain
only data and other inline elements.* Inherent in this structural
distinction
is the idea that block elements create “larger” structures than inline
elements.

I interpret that to mean inline elements may not contain block elements.

But with CSS and the display attribute we can change display from inline to
block, or versa visa, for any element.  So, if my CSS says b
style=display: block; xx /b, is that an error of any kind? And if so,
it it an HTML error or a CSS error.  I tried to look this up W3.org, but I'm
going to have to work on those grammar-like specifications.  They are not
easy for beginners to read.

-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
css-discuss [css-d@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/

[css-d] very small font size on small devices

[Sandy]

I am trying to come up with a style sheet for a site I am working on 
that addresses small devices.


Here is a typical page:
http://cantoraccess.com/aboutus/aboutus.html

Here are style sheets:
http://cantoraccess.com/css/ca.css
http://cantoraccess.com/css/menu.css
http://cantoraccess.com/css/small_device.css

it looks fine on the simulators I've tried:
http://iphonetester.com/
http://app.protofluid.com/

but when I use browsercam to take screen shots on most devices the font 
size gets really, really small.


http://www.browsercam.com/public.aspx?proj_id=539598

So - few questions.
Are there simulators out there that are more reliable in showing what 
shows up on the various devices?


Why is the type so small?

How can I fix it?

thanks all,
Sandy
__
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] very small font size on small devices

[Sandy]

So - few questions.
Are there simulators out there that are more reliable in showing what
shows up on the various devices?



The OperaMini simulator is quite good.
http://www.opera.com/mobile/demo/

thanks for this - the page looks fine in this.

 Viewing the page in a small window

in Safari and WebKit is very helpful. Same in Opera.
shrinking the window down in Safari 5.0.2 seems to get the small_devices 
style sheet going, but not in Opera 6.0.3



Simulators are handy but they really do
not offer direct user experience with functionality, usability, and
readability
really true. I thought everything was fine 'til a friend with an iphone 
checked it out and let me know about the tiny text.


will check out your media queries link and try and see if mine is right.

thanks again,
S.
__
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] very small font size on small devices

[Sandy]

The OperaMini simulator is quite good.
http://www.opera.com/mobile/demo/

shrinking the window down in Safari 5.0.2 seems to get the
small_devices style sheet going, but not in Opera 6.0.3




Umm. Try Opera/11.0.

right! yes - that works.

thanks,
Sandy
__
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/

[css-d] Debugging IE

[Colin (Sandy) Pittendrigh]

I have been using http://ipinfo.info/netrenderer/index.php for hacking IE6
and IE7
into submission.

In general I develop on linux with Chrome. Then check appearance on Firefox
and Safari in Mac,
which (usually but not always) look much the same.  I have IE8 running on an
old XP box.
So I tehn use my own Windows box to check IE8.
At that point I use netrender to test IE7 and IE6.  Those two almost always
require adjustments, or conditional statements.

But I just noticed today the visual output I get at netrender for IE8 does
not match the display I get when running IE8 directly, on XP box (whose
browser has
been updated to IE8).   So that makes me wonder if netrenderer is worth
anything at all.

I could try to set up virtual OS instances with vmware. Perhaps that's my
next step.
But now I wonder if that output will be reliable.
Perhaps a developer really needs multiple boxes, each with its own
OS.  What is your take?

also, I (think) I have noticed IE6 on old low-resolution laptops
sometimes
looks substantially different than IE6 running on an XP box plugged in to
a high-resolution monitor. So perhaps a person needs an N cubed testing
routine:  N-OS systems times N-resolutions times N-browsers.

What is the professional debugging way proceed?

-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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] text-shadow

[Colin (Sandy) Pittendrigh]

Ok. I typed at the keyboard too soon yesterday and said *text-shadow* seemed
to work in IE8
when it does not.

Further, if I validate my css as CSS3 there are no reported errors (even
when using text-shadow)
Does this mean I can use text-shadow without side effect?
ie IE will ignore it while most of the others will use it?
Or is there some danger of tripping IE into quirks mode? (if I do continue
to use text-shadow)?

In HTML we can (and should) announce the HTML DOCTYPE. I'm not aware of any
similar
mechanism to announce CSS level. Is there one?

.bshadow {
 color : white;
text-shadow : #22 1px 1px 0
}



-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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/

[css-d] text-shadow

[Colin (Sandy) Pittendrigh]

I put some experimental text-shadow codes in a css file that *seems* to work
as intended in
Firefox, Chrome and IE8. Not sure about IE7 just yet.

.bshadow
{
  color: white;
  text-shadow: #22 1px 1px 0px;
}

So, although the browsers seem to honor it, the w3c validator
complains: Property text-shadow doesn't exist in CSS level 2.1 but exists in
: #ff 1px 1px 0 #ff 1px 1px 0 #ff 1px 1px 0 #ff 1px 1px 0

I'm not sure what the issues are here.

-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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] text-shadow

[Colin (Sandy) Pittendrigh]

 If it's really working for you in IE8, we'd all really love to know how.



It probably isn't working on IE8.  I boot Microflaccid as infrequently as I
can get away with.
If it looks at all acceptable I usually breath a sigh of relief, take the
clothes
pin off my nose and KVM back to Linux or Mac.  Sorry for passing bad
information
on a holiday.

:-((

-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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/

[css-d] Three col faq

[Colin (Sandy) Pittendrigh]

I'm just learning about CSS. So no pretensions here.

I want to make a liquid 3-column layout where the center column fills what
ever space is left after setting widths (as percents) for the left and right
columns.
I'd like to set a min-height on the center column--but I want to keep it
simple, so
I will go with the flow on left and right column heights.

Most of the three column templates I see on download sites have hideous
complexity,
due largely to worrying about setting equal heights for all three columns.
I'd like to keep it simple (and to worry about min-height on the center
column only).

Any examples out there anybody can point me to?

-- 

/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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/

[css-d] Has anyone used www.webtype.com?

[Sandy]

Has anyone used a font from
http://www.webtype.com/

is it possible that it's as easy as they make it sound? Have you run 
into any trouble?


thanks!
Sandy
__
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] Has anyone used www.webtype.com?

[Sandy]

Not sure about this one but what about TypeKit?

http://www.typekit.com

http://css-tricks.com/video-screencasts/69-first-ten-minutes-with-typekit/


thanks - I hadn't heard of it. Have you tried typekit? Are you happy 
with it?


Sandy
__
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] Has anyone used www.webtype.com?

[Sandy]

I use typekit and like it. The downside is load time. Also watch for
font rendering. It's different in different browsers.

Shanna Cramer
http://thewebshoppe.net


thanks Shanna.
That's strange about the font rendering - I thought the whole point was 
that this could replace image fonts altogether ...


thanks for your input.

Sandy
__
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] Has anyone used www.webtype.com?

[Sandy]

That being said, if one font looks blocky on someone's
windows 95 box with IE 6, then all fonts look blocky, so they wouldn't
know the difference.

good point Christian. So - worth using? Do the load times have you 
sitting there drumming your fingers wondering what's wrong, or is it 
just a hair longer than you expect? Do you have a link to a site which 
uses this service you could pass along?


thanks!
s.
__
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] Has anyone used www.webtype.com?

[Sandy]

I only use it on H tags because of the load time. Removing unused
options like bold and italic helps, too. I have no patience for slow
computers, plus page speed is a ranking factor for Google now. I am
using typekit on these sites:

http://nawbogrrv.org/
http://customdesigntools.com/
http://korbyimagery.com/
http://thewebshoppe.net/

Shanna Cramer
http://TheWebShoppe.net


hey Shanna,

Thanks for the links. I think the load times are usable.

TheWebShoppe.net is gorgeous!

cheers,
Sandy
__
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] Has anyone used www.webtype.com?

[Sandy]

the load time
isn't bad compared to using images for all your headers, and it's
probably way better than using other techniques that involve
generating SWFs or generating images on-the-fly for dynamic text


yes - did you take a look at the links Shanna sent? The load times are 
really not bad at all. Another advantage of this approach is that the 
text size will grow if you increase text size.


Sandy
__
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] Hide current page link

[Sandy]

  Is there a CSS method to hide the current page link in a navigation
  list?  ie: if you're on the widgets page, you don't get the See our
  crazy widgets! link in the menu.
  I'm responsible for looking after a static HTML  site that has  had
  more and more pages added to it over the years, and changing the
  navigation on each page is becoming a chore.
  I know how to do includes, I'd just like to hide the current page link..

hi Val,

Try this bit of style, which I cribbed off
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

it needs to go in the head of the page you are on, and use that page 
name for yourcurrentpage.html

style type=text/css
!--
#links a[href~=yourcurrentpage.html] {
position : absolute;
top : -1000px;
width:1px;
height:1px;
overflow:hidden;
}
--
/style

good luck!
Sandy



__
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] Hide current page link

[Sandy]

 Sandy wrote:
 
 #links a[href~=yourcurrentpage.html] {
 
 This means that you would need a different style sheet, with a different URL 
 there, for each and every page. I don't see how this could be any easier or 
 otherwise better than simply having, say,
 
 a href=... class=current.../a
 
 for each current-page link or, better still (for current-page links in 
 navigation)
 
 a class=current.../a
 
 so that the current-page link ain't no link but can be styled along with 
 other a elements but so that it does not look like a link but like a here 
 you are now designator.
 

Not a whole different style sheet, just that little bit in the head of 
each page. I think it's actually about the same amount of work as adding 
class=current to the current page on an html page.

The advantage of this approach is if you are using includes - the menu 
can be included and the current page addressed on that page.

Sandy
__
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] Hide current page link

[Sandy]

 Not a whole different style sheet, just that little bit in the head of
 each page. I think it's actually about the same amount of work as adding
 class=current to the current page on an html page.

 The advantage of this approach is if you are using includes - the menu
 can be included and the current page addressed on that page.

 Sandy
 
 That sounds like the best idea so far.  Thank you.

you are very welcome Val.

__
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] CSS-only color picker

[Sandy]

 The web is crowded with color-picker palettes using JavaScript
 mumbo-jumbo. I wanted one working with css only + server-side
 scripting and got the idea to use a select with optgroups
 and options styled with display: block and display: inline
 respectively. It works in Firefox 3.6 at least. What about
 other browsers?
 
 http://melroch.se/misc/palette.html

http://www.browsercam.com/
has a remote access testing service with a large variety of OS and 
browser combinations. A 1-day plan is 19.95 US.

hth
Sandy
__
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] drop shadows

[Sandy]

 the site 
 needs to work for people who will be increasing text size and also for 
 those who will be using a screen reader.

 Then set no font less than default, and ditch the Verdana and MS stuff: 
 Arial, Helvetica, sans-serif will do.

 Letter-spacing content text is not 
 helping their cause.

 You are dropping the right col with a heavy + 
 hand-- and same if minimum font-size is set in the prefs at 24 in FF and 
 32 in Opera. If you use em you'll need to declare font-size 100% on html 
 or the fonts will go totally goofy in IE when scaled.

Hi Helen K. - or is this David?

Thanks for your input. I've made some changes
http://sandyfeldman.com/ana/10test.shtml

and I have some questions - why not Verdana or trebuchet MS?

letter-spacing on browser text is often really tight - a small bit of 
opening up seems to increase legibility to me. I can understand 
objecting to the kind of spacing that ends up looking like t h i s but 
a .1em just looks to me like it makes things better. Is there something 
I'm not thinking of?

I'm not sure what you mean by You are dropping the right col with a 
heavy + hand--

thanks again for taking the time to help me think about this.

Sandy

__
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/

[css-d] The holy grail

[Colin (Sandy) Pittendrigh]

The holy grail is that place we'll all be to (soon, I think)
when we can finally stop worrying, thinking about and dealing
with IEsicks.

-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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/

[css-d] p.someclass:hover { ...change paragraph border }

[Colin (Sandy) Pittendrigh]

At http://robopages.sourceforge.net/index.php?page=README.htm

is a page display governed by CSS that (in Firefox and Safari)
changes the border (from outset to inset) on any enclosing paragraph, when
ever
an enclosed link is hovered.  This makes the button-like link
look like it has been depressed. The border does not change
for IEsicks, however, which is not surprising. But it also does not
change for IE7.  It might change for IE8, but I haven't installed IE8 yet.
So does this hover technique work by accident, in Firefox/Safari?
Or is IE7 not standards compliant on this issue?

p.linkp
{
  background: #ff;
  padding: 0.5em;
  margin: 0.125em;
  width: 90%;
  border: 3px outset #cc;
}

a { text-decoration: none; margin: 0.25em; }
a { text-decoration: none; margin: 1em; }
a:hover{  text-decoration: underline; font-style: italic; font-weight: bold;
}
p.linkp:hover{  border: 3px inset #cc;  }


-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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] p.someclass:hover { ...change paragraph border }

[Colin (Sandy) Pittendrigh]

Quirks mode?
Interesting.
Maybe.
The code validates at w3c validator without errors.
Each page begins with:

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

html
 head
  titleRobopages.../title
  link rel=stylesheet href=dirLCSS.css
view-source:http://robopages.sourceforge.net/dirLCSS.css
type=text/css

 /head
 body
etc




-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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/

[css-d] media=handheld tips please!

[Sandy]

hey all,

I have a project that my client would like to work on mobile devices.

http://askon.ca/en/test.shtml
http://askon.ca/en/css/askon.css
http://askon.ca/en/css/mobile.css

I set up a mobile style sheet that is supposed to blank out 2 columns, 
and have a group of extra links that don't show up in the screen version 
of the page.

#mobilelinks {
display : none;
}


It seems like some mobile browsers ignore the media=handheld style, 
others ignore the style sheets altogether, others display what looks 
like their own rough version of the styles

http://www.browsercam.com/public.aspx?proj_id=490329

I don't think browsercam has remote access to mobile devices - any idea 
of who might? Any good ideas of how to handle this?

Thanks all!
Sandy
__
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/

[css-d] trouble in IE8

[Sandy]

hi all,

A site that I did a few years ago is having trouble in IE8.
The contact button is shifting down, creating 3 rows of buttons instead 
of two - contact on its own, the others on their 2 lines.

http://jodishuster.com/
http://jodishuster.com/js_css/jodi.css
http://jodishuster.com/js_css/ie-hacks.css
http://jodishuster.com/js_css/ie6-hacks.css
http://jodishuster.com/js_css/ie7-hacks.css

if I was putting this site together now, I would write it really 
differently, but I would rather not have to do the whole thing again! 
Can anyone see what's giving 8 trouble? 6  7 are fine, as is firefox 
and safari and mozilla and netscape and opera ...

thanks so much!
Sandy
__
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] trouble in IE8

[Sandy]

 add this to your code, will help but is not a full solution: 

meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7? /

Cristiano, Tim, you guys rock. Thanks so much! this worked, and was SO
MUCH EASIER than what I expected I would need to do.

Sandy
__
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] mouse over styles on search box

[Sandy]

I am working on a page which has a search box which I have added styles
to, which have an unintended effect that I hope you can help me get rid
of.

I am trying to get the search box and the submit button to be the same
height and have ended up with a couple of little jiggles on mouse over.
The search box loses the padding I added, and the submit button shifts
a
few pixels to the right.

http://sandyfeldman.com/glaucomaresearch/4test1.html

here are the style sheets (only 4test1.css should effect the search
box)
http://sandyfeldman.com/glaucomaresearch/js_css/4test1.css
http://sandyfeldman.com/glaucomaresearch/js_css/ytplayer.css
http://sandyfeldman.com/glaucomaresearch/js_css/ie6-hacks.css
http://sandyfeldman.com/glaucomaresearch/js_css/ie7-hacks.css

How can I get rid of this jiggle? And is there any way to get the
submit
button to have the same mouse over effects as the donate button?

thanks!
Sandy

 
 [HallMarc Websites] 
 
 Your bounce is caused by these two styles in ytplayer.css
 input {
 color : #fff;
 background-color : #70;
 border : solid 1px #fff;
 margin-left : 0;
 margin-right : -.4em;  -
 padding : 0;
 padding-left : 7px;
 padding-right : 7px;
 }
 
 input:hover, input:focus, input:active {
 color : #70;
 background-color : #fff;
 border : solid 1px #70;
 margin-left : 0;
 margin-right : -.3em;   -
 padding : 0;
 padding-left : 7px;
 padding-right : 7px;
 }
 
 I'm sure this has a use somewhere somehow. Didn't do a thorough scouring to
 see where these styles are intended. 

http://sandyfeldman.com/glaucomaresearch/
thanks a million! It's all sorted out now.

best regards,
Sandy
__
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/

[css-d] current navigation indicator for included menus

[Sandy]

Hey all,

I have a little site where the main menu is an include. Each link list 
item has an id, and I add a style for that id in the header of the 
current page that shows it's the current item.

http://askon.ca/en/index.shtml
http://askon.ca/en/css/askon.css

I have used some css from
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
in other contexts, for example

a[href ^=mailto:;] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}


the

a[href ^=mailto:;]

tells you to style anything that starts with the mailto:;
He has other styles that tell you to style anything that ends with .pdf.

What I would love is to figure out how to put the whole page name in the 
style so that I can eliminate the ids in the menu - something like
a[href =index.shtml]
except that doesn't work.

Any thoughts?

thanks!
Sandy
__
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/

[css-d] mouse over styles on search box

[Sandy]

hey all,

I am working on a page which has a search box which I have added styles 
to, which have an unintended effect that I hope you can help me get rid of.

I am trying to get the search box and the submit button to be the same 
height and have ended up with a couple of little jiggles on mouse over. 
The search box loses the padding I added, and the submit button shifts a 
few pixels to the right.

http://sandyfeldman.com/glaucomaresearch/4test1.html

here are the style sheets (only 4test1.css should effect the search box)
http://sandyfeldman.com/glaucomaresearch/js_css/4test1.css
http://sandyfeldman.com/glaucomaresearch/js_css/ytplayer.css
http://sandyfeldman.com/glaucomaresearch/js_css/ie6-hacks.css
http://sandyfeldman.com/glaucomaresearch/js_css/ie7-hacks.css

How can I get rid of this jiggle? And is there any way to get the submit 
button to have the same mouse over effects as the donate button?

thanks!
Sandy

__
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] Sticky footer problem

[Sandy]

Val, I don't know if this is it, but what jumps out at me is the missing 
  after the end footer


!--end footer--/div
should be
!--end footer--/div

hope that helps, at least a little.

Sandy


 www.oakleafdesignprint.co.uk/dmk/
 
 I've spent two days trying to fix this layout, and getting nowhere.
 It doesn't look so bad in FF3 but a mess in IE7 (so what's new?)
 Anyway, what I'm trying to do is to get the footer - the green box -
 to stick to the bottom, at the foot of the .wrap container.  But it
 won't.
 Can any of you guys see what's wrong, 'cos I sure as heck can't.
 (The coloured lines are just borders around the elements to help me
 see what's going on.)
 
 Will be extremely grateful for any answers.
 
 Val Dobson
 
 
 
__
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/

[css-d] javascript important?

[Colin (Sandy) Pittendrigh]

Most desktop browsers have javascript turned on these days--flash too.
I don't know the real market share. But that might not be the important
issue.

 Search engines cannot follow links, pages or displays created with
javascript.
So, at the very least, you have to (also) include more manual and
traditional
ways to make the same displays. If your pages are invisible to Google,
then they are essentially invisible to everyone.



-- 
/*  Colin (Sandy) Pittendrigh  --oO0 */
__
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/

[css-d] adding css to js, or the miserable 9 pixels

[Sandy Feldman]

hey all,

I hope you can help.

I have a page which has a little javascript which rotates banner images. 
When I first added this js, the banner images slipped down 9px, showing 
a white gap on the top. After much trial and error, I added some css to 
the js in the header, and it looks hunky dory in everything but IE, 
which backs it up so that it covers 9px worth of the navigation and 
shows some weird junk at the bottom.

http://www.uoguelph.ca/mcb/test/image-on-IE.png

Is there someplace I can style the js so I can write an IE hack for it? 
Putting the css right in the js was all I could do that would work, but 
it doesn't work all that well, and I have a feeling that there must be a 
better way.

Thanks in advance for your help,
Sandy


script type=text/javascript language=JavaScript
!-- thank you to Bontrager Connection. Copyright 2002 Bontrager 
Connection, LLC
//
// Type the number of images you are rotating.

NumberOfImagesToRotate = 5;

// Specify the first and last part of the image tag.

FirstPart = 'img src=images_banner/index';
LastPart = '.jpg height=220 width=860 style=margin-top : -9px ';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//--
/script



http://www.uoguelph.ca/mcb/test/
http://www.uoguelph.ca/mcb/test/css/mcb2009.css
http://www.uoguelph.ca/mcb/test/css/ie6-hacks.css
http://www.uoguelph.ca/mcb/test/css/ie7-hacks.css


__
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] adding css to js, or the miserable 9 pixels

[Sandy Feldman]

 Sandy Feldman wrote:
 
 hey all,

 I hope you can help.

 I have a page which has a little javascript which rotates banner 
 images. When I first added this js, the banner images slipped down 
 9px, showing a white gap on the top. After much trial and error, I 
 added some css to the js in the header, and it looks hunky dory in 
 everything but IE, which backs it up so that it covers 9px worth of 
 the navigation and shows some weird junk at the bottom.

 http://www.uoguelph.ca/mcb/test/image-on-IE.png

 Is there someplace I can style the js so I can write an IE hack for it?   
 
 
 
 
 
 re: http://www.uoguelph.ca/mcb/test/
 
 I guess you mean that the problem is in IE 6/7.
 An easy-out may be to use php to rotate the images?
 http://ma.tt/scripts/randomimage/
 And Gabriele has already accounted for the gap.
 
 Incidentally your navigation is a little whacked in:
 Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.1) 
 Gecko/20090715 Firefox/3.5.1

hi David, hey Gabriele

Thanks for your help.

I am going to check out
http://ma.tt/scripts/randomimage/
and see if it's foolproof enough for the likes of me

will check out the navigation, too.

I really appreciate you taking the time to look at this.

Sandy


__
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1

[Sandy]

http://www.uoguelph.ca/mcb/test/index.shtml
http://www.uoguelph.ca/mcb/test/css/mcb2009.css
http://www.uoguelph.ca/mcb/test/css/ie6-hacks.css
http://www.uoguelph.ca/mcb/test/css/ie7-hacks.css

 One problem remains, as far as I can see - that's the white border on
  the #globalnav. I think that is due to the border: transparent ...
 on the 'a' selector. IE 6 does not understand this. I suggest using
 the color code instead.

David, thank you for checking back in.

I was sort of getting set to stop worrying about this thing in ie6 - it
pretty much is there in that browser, and, well, you know - but if I can 
fix that issue that would be great.

I didn't realize that there is a colour code for transparent! Do you
happen to know the hex?

 P.S. Your #footer is 100% wide plus 20px of padding, throwing a
 horizontal scrollbar. I don't think you need that width, unless older
 IE needs 'hasLayout'
ack. It was a vestigial width, like an appendix, left over from earlier 
messing around with the look. I took it out. I appreciate you finding that.

Thanks for your help, and for being another set of eyes on this,
Sandy
__
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1

[Sandy]

Sandy wrote:
Sandy wrote:
[...]


http://www.uoguelph.ca/mcb/test/contact.shtml
and there are a couple of divs with a transparent background

.headerleft
#globalnav
the search should be transparent, too.

instead that whole area is showing up with a white background in AOL 
9.1, ie6 and ie7. ie8 is ok.

the styles are here
http://www.uoguelph.ca/mcb/test/css/mcb2009.css


That comes from this rule @ line 271 -

.container {
background-color : #fff;
padding : 0;
width : 860px;
}

Other browsers respect the 'background-color:inherit;' @ line 109 as the 
selector is more specific. IE 5 - 7 do not apply 'inherit'.
 
 
 David - thanks so much for taking the time to help me sort this out.
 
 Now - your advice did get that white background out of the top of the 
 page, but it made the white background in the content area disappear, too.
 
 This is really mysterious to me - the .container div starts below the 
 navigation, and was somehow covering the navigation ... take a look 
 here, where I have made it yellow with a red outline
 http://www.uoguelph.ca/mcb/test/test.shtml
 
 I tried giving the container its white background back and a margin-top 
 of 300px, and then the whole top nav moved down that much, as if the 
 container started at the top of the page, instead of after the navigation.
 
 I am flummoxed. I really appreciate your help!

I figured it out!
thanks for getting me on the right track.

Sandy
__
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/

[css-d] background-color : transparent; showing up as white in ie6 7 and AOL 9.1

[Sandy]

hey all,

I hope someone can help me out with this.

I am starting on a site (it's still very rough)
http://www.uoguelph.ca/mcb/test/contact.shtml
and there are a couple of divs with a transparent background

.headerleft
#globalnav
the search should be transparent, too.

instead that whole area is showing up with a white background in AOL 
9.1, ie6 and ie7. ie8 is ok.

the styles are here
http://www.uoguelph.ca/mcb/test/css/mcb2009.css

I tried making the background a tiled transparent gif in IE6, but it 
didn't help
http://www.uoguelph.ca/mcb/test/css/ie6-hacks.css

any other thoughts?
thanks in advance for your help.

Sandy
__
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1

[Sandy]

 Sandy wrote:
 [...]
 
 http://www.uoguelph.ca/mcb/test/contact.shtml
 and there are a couple of divs with a transparent background

 .headerleft
 #globalnav
 the search should be transparent, too.

 instead that whole area is showing up with a white background in AOL 
 9.1, ie6 and ie7. ie8 is ok.

 the styles are here
 http://www.uoguelph.ca/mcb/test/css/mcb2009.css

 
 That comes from this rule @ line 271 -
 
 .container {
 background-color : #fff;
 padding : 0;
 width : 860px;
 }
 
 Other browsers respect the 'background-color:inherit;' @ line 109 as the 
 selector is more specific. IE 5 - 7 do not apply 'inherit'.

David - thanks so much for taking the time to help me sort this out.

Now - your advice did get that white background out of the top of the 
page, but it made the white background in the content area disappear, too.

This is really mysterious to me - the .container div starts below the 
navigation, and was somehow covering the navigation ... take a look 
here, where I have made it yellow with a red outline
http://www.uoguelph.ca/mcb/test/test.shtml

I tried giving the container its white background back and a margin-top 
of 300px, and then the whole top nav moved down that much, as if the 
container started at the top of the page, instead of after the navigation.

I am flummoxed. I really appreciate your help!

Sandy
__
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] Footer doesn't stick to bottom of page

[Sandy Gonzales]

There should be a clearing div after the main div or before the 
footerholder to clear the floated divs. footerholder should not be 
positioned absolutely.

Norman Fournier wrote:
 Hello,

 I have a footer that is positioned correctly when a page opens but  
 then scrolls when the page scrolls. The page in question is located  
 here:
 http://www.normanfournier.com/capabilities/privacy.html

 The css is located here:
 http://www.normanfournier.com/normanfournier09.css

 Any help is greatly appreciated.

 Norman
 ---
 Norman Fournier
 604 514 1587 nor...@normanfournier.com
 http://www.normanfournier.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/
   


__
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] External Links

[Sandy]

I'm wanting to add indicators for links that leave our site. A little
 
 
Googling included this info from MaxDesign:
 
 
www.maxdesign.com.au/presentation/external/
 
 
 
 
I noticed the 2005 date of the article and just wondered if the info
 
 
presented is still considered a good method or is there something
 
 
better now?


check out
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

he's got an easy to use technique that doesn't involve putting a span on 
each external link.

Sandy
__
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/

[css-d] print style sheet

[Sandy]

hey all,

Could you please take a look at something for me?
I have been trying to write a print style sheet for this page, but it 
just isn't working.

http://sandyfeldman.com/proposal/nathanieldett/nd_print.css
http://sandyfeldman.com/proposal/nathanieldett/test.php

when I try and print out of FireFox, it inserts random page breaks. When 
I try and print out of Safari, text comes out grey. I had a friend print 
it for me, and he got a big, black border where I had specified
border : none;


Opera's is not too bad, but I don't want to rely on that!

Sandy
__
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/

[css-d] not exactly centred

[Sandy]

hey all,

I am having a few problems with this page, and I hope you can help.

these are the tests I am looking at:
http://www.browsercam.com/public.aspx?proj_id=464449

this is the page and the style sheet:
http://sandyfeldman.com/proposal/nathanieldett/test1.php
http://sandyfeldman.com/proposal/nathanieldett/nd_home.css

BIG PROBLEMS
In a few browsers the content isn't exactly centred. In an 800 x 600 
window there is a bit of background on the left, none on the right. This 
really looks bad in IE7, where the right side is a bit cut off.

I know I can narrow the box a bit, but it looks so small already on a 
bigger monitor that I would just like to shove it over a few pixels to 
the left. Why isn't it centred? How do I move it?

IE8 does not seem to display the tiling background.

SMALLER PROBLEM
Safari on a mac - the image background colour doesn't match the 
background colour. PC version of Safari looks ok. Actually, all the 
other browsers I've tested look ok. Any idea of what I can do about this?

thanks everybody.
Sandy
__
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] not exactly centred

[Sandy]

 I bet I know what the color matching problem is.  I just went  through a 
 BIG learning curve because of this issue.  I think it's that  the image 
 was saved with a Color Profile attached/embedded.  Almost  all browsers 
 ignore color profiles, but Safari pays attention to  them.

 http://sandyfeldman.com/proposal/nathanieldett/test1.php
 http://sandyfeldman.com/proposal/nathanieldett/nd_home.css

Theophan - you were right. Thanks so much! I really appreciate you 
sharing what sounds like what must have been some pretty  hard won 
information.

Sandy
__
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/

[css-d] changing languages for a phrase

[Sandy]

I am working on a French/English site and each side has words in the 
other language. I want to make sure that screen readers switch languages 
for those isolated phrases.

Is this the correct syntax for the language declaration
span lang=frje ne sais quoi/span

Does the language declaration has to be in a span? Is it possible to do
it like this span class=frenchje ne sais quoi/span and have a
style on an external style sheet link

.french {
lang : fr;
font-style: italic;
}

I tried
lang {
font-style: italic;
}

but it doesn't seem to work.

thanks all,
Sandy


__
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] changing languages for a phrase

[Sandy]

 Is this the correct syntax for the language declaration span 
 lang=frje ne sais quoi/span
 
 
 Yes.
 
 Does the language declaration has to be in a span? Is it possible to 
 do it like this span class=frenchje ne sais quoi/span and have a 
 style on an external style sheet link
 
 
 Any element will do.
 
 In the stylesheet, target the element with span:lang(fr){/*styles*/} or
 whatever element you choose. A universal selector will also do, like
 *:lang(fr){/*styles*/}, as long as you make sure you target the document
 area you want, like for example #content *:lang(fr){/*styles*/}.
 
 Note that IE7 and older don't support :lang(). IE8 and others are fine.

One more question about this - if I have an image on the page and the 
text contained in the image is English, so it looks something like this

img src=images/english.jpg alt=some English text /

should it read

img src=images/english.jpg lang=en alt=some English text /

so that the alt tag gets read with the right accent? or should the image 
get nested in a span?

span lang=enimg src=images/english.jpg alt=some English text 
//span

thanks!
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?

[Sandy]

 I believe there is a way to add code to SSI includes, IIRC. However,
 for a CSS solution, your last method is probably the easiest to implement.

Thanks for thinking about this, David. I guess I will go with what I've 
come up with - it's been great having all this input.

thanks all!
Sandy
__
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/

[css-d] Can CSS compare the href to the URL and if they match, highlight the href?

[Sandy]

I am working on a site that uses menus that are includes. I have been 
wrestling with a way to highlight the link to the page you are on in the 
included menu. I have a way that works, but it's kind of labour 
intensive - every page needs a unique bit of style in the header. I'm 
hoping you guys can suggest something a bit more global.

Here is the site and the related style sheets.

http://www.cantoraccess.com
http://www.cantoraccess.com/css/ca.css
http://www.cantoraccess.com/css/menu.css
http://www.cantoraccess.com/css/ie6-hacks.css
http://www.cantoraccess.com/css/ie7-hacks.css


An example: here is a landing page
http://www.cantoraccess.com/publications/macros.shtml

which uses the included list of links
http://www.cantoraccess.com/includes/pub_macros_articles.shtml

The list of links is also included in all the articles listed on the 
landing page as a side bar menu, for example

http://www.cantoraccess.com/publications/macros_2008_resna_library_download.shtml

(publications that only appear in print are turned off. These show up on 
the landing page, but not in the menus.)

Currently none of the pages on this site that have included menus have 
any highlights in those menus to show what page you are on. I have just 
read an article on askthecssguy.com called Showing Hyperlink Cues with CSS

http://askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

I used his samples to come up with this

.menu a[href $='test.shtml'] {
padding-left: 28px;
background: transparent url(../images/braille_arrow.jpg) no-repeat 
top left;
font-weight : bold;
color : #66;
}


which I have placed in the head of
http://www.cantoraccess.com/publications/test.shtml

The links in the Related Publications menu on this page are an include


http://www.cantoraccess.com/includes/testinclude.shtml

The link to test.shtml is highlighted on this page because of the 
style in the head.

Is there a way to write the style so that it will work without putting a 
style unique to each page in the head of that page? Can CSS compare the 
href to the URL and if they match, highlight the href? If every body tag 
has a unique id and I add a matching id to the link to that page, could 
I somehow get the browsers to compare that?

thanks guys!
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?

[Sandy]

Is there a way to write the style so that it will work without putting a 
style unique to each page in the head of that page? Can CSS compare the  
href to the URL and if they match, highlight the href? If every body tag 
has a unique id and I add a matching id to the link to that page, could 
I somehow get the browsers to compare that?
 
 
 You could probably do something with the CSS3 :target pseudo-class, but
 it would be awkward at best.  Browser support would also be lacking.
 The best bet is some sort of server side programming or Javascript;
 however, both would be off topic.

Scott - thanks!

Browser support isn't too big an issue for this - the site works without 
it, this just adds a little extra.

http://www.w3.org/TR/css3-selectors/#target-pseudo
If I understand :target pseudo-class (which I don't necessarily!) it 
looks like you can take, say, all the anchor links and style them. It 
seems to be about creating groups, and giving them a treatment.

Is there any css approach to comparing two things, and styling according 
to how they compare?

Sandy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is there a way to get lists to use decimal points?

[Sandy]

Benjamin Hawkes-Lewis wrote:
 On 5/2/09 23:17, Sandy wrote:
 
 Do screen readers not read generated list counters?
 
 
 JAWS and Window-Eyes do not currently read text inserted with the 
 content property, although they do reflect list-style-type values.
 
 How would you let a screen reader know that you are in a list if you 
 are using real numbers?
 
 
 [snip]
 
 Is there another reason than accessibility that numbers as real text are
 what we need?
 
 
 Well, if the numbers are part of the content (e.g. certain legal 
 documents), then they belong in the content layer (HTML) not the 
 skinning layer (CSS).
 
 Remember a user isn't necessarily seeing your skin; they might be 
 applying their own CSS or viewing with a user agent that doesn't support 
 CSS.
 
 There's no satisfying way of doing this, but the following are all 
 viable approaches:
 
 ul
 li1. foo/li
 li2. bar/li
 /ul
 
 p1. foo/p
 p2. bar/p
 
 dl
dt1./dt
ddfoo/dd
dt2./dt
ddbar/dd
 /dl
 
 h21./h2
 pfoo/p
 h22./h2
 pbaz/p
 
 Personally, I'd normally go for the first option.
 
 I would avoid:
 
 ol
 li1. foo/li
 li2. bar/li
 /ol
 
 since you could end up with the user being presented a confusing 
 double-numbering of items (once from the ol and once from the text 
 content of the li).
 
 -- 
 Benjamin Hawkes-Lewis

Benjamin, Tedd, Jukka, Georg,

Thanks so much for taking the time to help me think about this, and for 
sharing your expertise.

Benjamin - this was the sentence!
  Well, if the numbers are part of the content (e.g. certain legal
  documents), then they belong in the content layer (HTML)

the numbers are part of a (you guessed it) legal document,
so there they are in the content layer.

http://www.caut.ca/ugfa/test/about/plan2intent.html

This has the added advantage of making sense to me, unlike php (but 
thank you, Tedd)!

Benjamin,
  JAWS and Window-Eyes do not currently read text inserted with the
  content property, although they do reflect list-style-type values.
does this mean that if you have an ol that someone using a screen 
reader won't hear the list numbers?

Thanks!
Sandy
__
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/

[css-d] Is there a way to get lists to use decimal points?

[Sandy]

Hey All,

Is there a way to get lists to use decimal points?

I need the sub-points in point 1 to be
1.01
1.02

and the sub points in point 2 to be
2.01
2.02
2.03

etc. The list in question goes to 18.05

thanks!
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Is there a way to get lists to use decimal points?

[Sandy]

Gunlaug Sørtun wrote:
 Sandy wrote:
 
 Is there a way to get lists to use decimal points?
 
 
 Think so, but it has been a while since I tested it...
 
 http://www.w3.org/TR/CSS21/generate.html#content
 http://www.w3.org/TR/CSS21/generate.html#counters
 
 ...and I can't remember where I left those tests :-)
 
 Won't work in IE7 and older. IE8 should do fine, I think.
 
 
 Also: if numbering is important part of content, generated stuff won't
 do - not even an ordered list's regular counters. Only numbers as real
 text will work then.
 
 regards
 Georg

Georg, thanks yet again for your help.

Do screen readers not read generated list counters? Acck! JAWS and 
WindowEyes both, or just one or the other? How would you let a screen 
reader know that you are in a list if you are using real numbers?

Would an li with no bullet work if you wrote
lispan class=number2.1/span List item content./li

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

thanks!
Sandy
__
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] gettings lists to align right

[Sandy]

 I don't know if anyone has replied yet but this is was I've come up with 
 so far.
 
 I've opened this in FF, IE7, and IE6 and yes it does reverse its order. 
 As I've found out from Googling it would seem this is the correct method 
 as per CSS spec.
 I cannot seem to find your hacks in the HTML or CSS code, only test3.css 
 - where are you loading them?
 
 Since you are floating each li right it would logically reverse the 
 order (first li goes rightmost, etc).
 I usually cheat and place the ul in a span and float that right.
 
 Ta,
 
 ~Mx
 
 
 On Jan 30, 2009 10:29pm, Sandy sfeld...@sympatico.ca wrote:
   hey all,
  
  
  
   there is a problem I hope you can help with - I am pretty much at the
  
   end of my rope.
  
  
  
   I have a page where I would like some things to line up on the right,
  
   and it's working in the browsers I've tested except for IE6 and 7.
  
  
  
   I've got it more or less looking right in 7, if you don't look too
  
   closely. To get the two lists in the menu to align right, I have an ie7
  
   specific style which reads
  
  
  
   .menu ul li {
  
   float : right;
  
   }
  
  
  
   now - this is good except that the links are now in the opposite order
  
   than I want them.
  
  
  
   http://www.caut.ca/ugfa/test/test3.html
  
   http://www.caut.ca/ugfa/test/js_css/test3.css
  
   http://www.caut.ca/ugfa/test/js_css/ie7-hacks3.css
  
   http://www.caut.ca/ugfa/test/js_css/ie6-hacks3.css
  
  
  
   thanks in advance.
  
   (also apologies if I've sent this twice - a little email trouble)

hi Mx,

Thanks for looking at my problem.
Georg sent me this, and it works. I have been able to delete the hacks.

best regards, Sandy

from Georg:

1: delete the mentioned IE-only styles.

2: replace existing styles for the relevant elements with the following...

.menu {
clear : both;
width : 780px;
margin-right : 10px;
font-size : .9em;
font-family : arial, sans-serif;
font-weight : normal;
letter-spacing : .03em;
background-color : transparent;
padding-top: 40px;
}

.menu ul {
padding : 0;
margin : 0;
clear : left;
color : #5d7e25;
text-align : right;
list-style-type : none;
background-color : transparent;
text-align: right;
}

.menu ul li {
display : inline;
}

...and all major browsers will agree (with you) on how to render it...
http://www.gunlaug.no/tos/alien/sandy/test_09_0131.html


The problems with IE7 and older are related to right-floats and
clearing bugs, so the solution is to avoid right-floats and rely on
'text-align' instead. Even IE supports that bit of CSS pretty flawless.

regards
 Georg
__
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/

[css-d] getting lists to align right in ie7

[Sandy]

hey all,

there is a problem I hope you can help with - I am pretty much at the 
end of my rope.

I have a page where I would like some things to line up on the right, 
and it's working in the browsers I've tested except for IE6 and 7.

I've got it more or less looking right in 7, if you don't look too 
closely. To get the two lists in the menu to align right, I have an ie7 
specific style which reads

.menu ul li {
float : right;
}

now - this is good except that the links are now in the opposite order 
than I want them.

http://www.caut.ca/ugfa/test/test3.html
http://www.caut.ca/ugfa/test/js_css/test3.css
http://www.caut.ca/ugfa/test/js_css/ie7-hacks3.css
http://www.caut.ca/ugfa/test/js_css/ie6-hacks3.css

thanks in advance.
Sandy
__
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/

[css-d] gettings lists to align right

[Sandy]

hey all,

there is a problem I hope you can help with - I am pretty much at the 
end of my rope.

I have a page where I would like some things to line up on the right, 
and it's working in the browsers I've tested except for IE6 and 7.

I've got it more or less looking right in 7, if you don't look too 
closely. To get the two lists in the menu to align right, I have an ie7 
specific style which reads

.menu ul li {
float : right;
}

now - this is good except that the links are now in the opposite order 
than I want them.

http://www.caut.ca/ugfa/test/test3.html
http://www.caut.ca/ugfa/test/js_css/test3.css
http://www.caut.ca/ugfa/test/js_css/ie7-hacks3.css
http://www.caut.ca/ugfa/test/js_css/ie6-hacks3.css

thanks in advance.
(also apologies if I've sent this twice - a little email trouble)

Sandy

__
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/