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

[Colin (Sandy) Pittendrigh]

ot;
> , 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: 
> Content-Type: text/plain; format=flowed; charset="iso-8859-1";
> reply-type=original
>
>
> If the forum is nicely laid out with good readable fonts then I don't mind
> but the link posted is not my cup of tea.  Fonts are too small and very
> difficult to read.
>
> Microsoft Forums or Adobe Forums are fine because the display is clean and
> readable.  i like to skim through the text and only read carefully if the
> topic is interesting.  At present I am spending a lot of time reading and
> researching into Bootstrap, its CSS and classes and how best to utilise
> them.
>
>
>
>
> -Original Message-
> From: Cheryl D Wise
> Sent: Monday, January 04, 2016 6:12 PM
> To: 'John Griessen' ; css-d@lists.css-discuss.org
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
>
> FWIW, I rarely post since I'm mostly retired now but I do read what's
> posted. I wouldn't do so with a forum.
>
> Cheryl D Wise
> http://wiserways.com
> http://by-expression.com
> http://cheryldwise.com
>
>
> -Original Message-
> From: On Behalf Of John Griessen
>
> Do you think it is best that list members switch to forums like this one?
> https://csscreator.com/forums/start-here/how  with ads for mail order
> brides
> in the margins?
>
> What others are there that are good?
>
>
> __
> 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/
>
>
>
> --
>
> Message: 17
> Date: Mon, 4 Jan 2016 13:30:18 -0600
> From: John Griessen 
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: <568ac84a.8020...@ecosensory.com>
> Content-Type: text/plain; charset=windows-1252; format=flowed
>
> On 01/04/2016 10:30 AM, D'Arcy J.M. Cain wrote:
> > How does everyone like that option?
>
> OK if no ads inserted, no selling of my email address.
> That's how I will handle it if hosted as  cs...@lists.cibolo.us
>
> John Griessen
>
>
> --
>
> Message: 18
> Date: Mon, 4 Jan 2016 13:38:04 -0600
> From: GJim 
> To: "D'Arcy J.M. Cain" ,
> css-d@lists.css-discuss.org
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: <796018014.20160104133...@wyomerc.com>
> Content-Type: text/plain; charset=us-ascii
>
>
> ~~~
> Monday, January 4, 2016, 10:30:10 AM (USA 'Somewhere on-the-road
> time-zone'),
> you wrote the message that appears below.
>
> My reply appears here and/or interspersed within your message.
> ~~~
>
> > I like the mailing list format rather than forums
>
> I much prefer the mailing list rather than forums.  With a mailing list, I
> can
> keep an archive on my own system.
>
> I do hope the CSS list is kept.  I don't post often, but I do read every
> post
> and respond if I have pertinent information.
>
> G'Jim c):{-
> --
> Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
> Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
> My photography: http://www.gjim.com
>
> Savvy ponderable:
> Most folks are just about as happy as they've made up their mind to be.
>
>
>
> --
>
> Message: 19
> Date: Tue, 5 Jan 2016 06:55:02 +1100
> From: Kathy Wheeler 
> To: CSS-D Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: 
> Content-Type: text/plain; charset=us-ascii
>
> I'd have to put my vote with the mailing list not a forum.
>
> Every group I've been with that has moved to forums or FaceBook I've just
> lost interest in. There are very few forums I even bother to go to for
> help. Forums can be awkward to search and FaceBook is almost impossible.
> With mailing lists I can keep messages that interest me and easily search
> my email archive. With forums and FB I have to make a conscious effort to
> go there ... my mailing lists come to me.
>
> KathyW.
>
> --
>
> Message: 20
> Date: Mon, 4 Jan 2016 22:14:04 +0100
> From: MiB 
> To: CSS-D Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: <5d53c7c4-8197-488e-b1d8-149cea898...@gmail.com>
> Content-Type: text/plain;   charset=windows-1252
>
>
> jan 4 2016 20:38 GJim :
>
> > I much prefer the mailing list rather than forums.
>
> I?d like to point out that you can have a mailing list, a news group and a
> web site all mirroring each other. If that is practical from an
> installation, resource and maintenance viewpoint is a different question.
>
> >From a personal resource and knowledge view point I think it might be
> better to co-operate with larger groups and pool knowledge in other
> contexts instead of being an island. The world and reality of web design
> has moved on very quickly and new tools may be very relevant for new users.
>
> I know that small less frequented corners of the net can give a feeling
> and possiblity of more personal conversations, so there is a value of this
> of course. But there?s also a balance that needs to be found.
>
> In the end it?s people that counts.
>
> Personally I have no specific opinion on if the list should stay or not. I
> think fewer and fewer people prefer mailing lists, but this is quite
> uncertain and just an assumption.
>
>
>
> --
>
> Message: 21
> Date: Mon, 4 Jan 2016 15:24:04 -0600
> From: Del Wegener 
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: <568ae2f4.4090...@delweg.com>
> Content-Type: text/plain; charset=utf-8; format=flowed
>
> Right on the money Kathy.  A very important point.
> del
>
> On 1/4/2016 1:55 PM, Kathy Wheeler wrote:
> > I have to make a conscious effort to go there ... my mailing lists come
> to me.
>
>
>
> --
>
> Message: 22
> Date: Mon, 4 Jan 2016 16:26:43 -0500
> From: "D'Arcy J.M. Cain" 
> To: MiB 
> Cc: CSS-D Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: <20160104162643.4cc08b95@imp>
> Content-Type: text/plain; charset=UTF-8
>
> On Mon, 4 Jan 2016 22:14:04 +0100
> MiB  wrote:
> > I?d like to point out that you can have a mailing list, a news group
> > and a web site all mirroring each other. If that is practical from an
> > installation, resource and maintenance viewpoint is a different
> > question.
>
> I am on a list that mirrors to a news group.  I finally had to add an
> email filter to drop anything that came through the gateway.  It was
> the only way yo make the list usable.  Adding isn't always better.
>
> --
> D'Arcy J.M. Cain
> Vybe Networks Inc.
> http://www.VybeNetworks.com/
> IM:da...@vex.net VoIP: sip:da...@vybenetworks.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/
>
> End of css-d Digest, Vol 157, Issue 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/

[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  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 
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  wrote:

>
> 30 jun 2014 kl. 06:54 skrev J.C. Berry :
>
> > 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  wrote:

>
> may 16 2014 11:53 BPJ :
>
> > 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:
 ...stuff...

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:

http://fliesfliesflies.com/index.php?page=Gallery/Pelicans-skies.jpg";>


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  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"  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  and  and 
I don't see why those programs couldn't be re-written to use .  But it would cause some developers to jump around
quickly.


On Sat, Feb 15, 2014 at 3:47 PM, Ezequiel Garzón wrote:

> 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  wrote:

> On Tue, Feb 4, 2014 at 1:10 PM, John Johnson 
> 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  elements for paragraphs and
ongoing coding salad that mixes  with  and  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  wrote:

> On Wed, Nov 13, 2013 at 7:26 AM, william drescher
>  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] 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  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  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/

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  wrote:

> On Mon, Nov 11, 2013 at 2:37 PM, Colin (Sandy) Pittendrigh
>  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/

[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 wrote:

> Thanks for the reply/answer/code Philippe! It's much appreciated.
>
> On Fri, Oct 25, 2013 at 11:01 PM, Philippe Wittenbergh 
> 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
>
> --
> 
> __
> 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  wrote:

> On Wed, Jan 30, 2013 at 3:51 PM, Chris Williams  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"  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] 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] 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/

[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] 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  xx , 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] 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/

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

[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] 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/

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:




 
  Robopages...
  http://robopages.sourceforge.net/dirLCSS.css>"
type="text/css">

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

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

Re: [css-d] IE6 Pushdown Float Problem

[P. Colin Manikoth]

On 8/6/08 7:36 PM, "Chang Huang" <[EMAIL PROTECTED]> wrote:

> Hi,
> 
> I'm having this problem when a floated container is pushed down when I
> resize the window on IE6, I'm giving up after a couples of hours
> without finding the root of the problem =(
> 
> Here's the code:
> 
> http://www.html-channel.com/pastebin.php?id=5
> 
> div#main-column is pushed down in this case when the window is resized
> to a certain point, can anyone tell me what the problem is please?
> 
> Thanks.
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

I believe it to be an issue commonly referred to as a "float drop". There is
no magic bullet; only best practice solutions. Position is Everything has a
full explanation. 

http://www.positioniseverything.net/explorer/expandingboxbug.html

Best, 

-colin

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

[css-d] Link attribute syntax

[Colin Mcgarry]

I'm sure my problem is ridiculously simple but it's driving me mad.

Firefox tells me my link is
div#contenu>liste-article>ul .somm-titre>li>h3.titre>a

What is the syntax for setting the color of the link.
i've tried

a.h3.somm-titre{
color: #eef;
}


a.somm-titre{
color: #eef;
}
  a.h3.titre{
color/#eef;
}

cpmac

but it stays black . The general "a" attribute is at the top of the css 
file.


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

Re: [css-d] Opera, Konq. loading my .css file, FF not

[Colin Brace]

On Jan 14, 2008 9:09 PM, L. David Baron <[EMAIL PROTECTED]> wrote:

> You need to configure the server to send CSS files as text/css.

Fixed, thanks.

I will henceforth pay more attention to the error console.

-- 
  Colin Brace
  Amsterdam
  http://lim.nl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Opera, Konq. loading my .css file, FF not

[Colin Brace]

Hi all,

There is something peculiar happening with my webserver and it is
difficult for me to tell what is going on from here. On my desktop
system, opening my site's index.html file from a local directory,
Firefox v2.0.0.10 renders the page fine. However, when I open it via
my server (which is on my LAN), it fails to load the CSS style page.
The bizarre thing is that both Konqueror and Opera don't exhibit this
problem. I just tried running FF in a different account, hence without
the usual extensions, thinking one of the latter might be interfering,
but the problem persists.

Can one of you try opening <http://lim.nl/index.html> to see what
happens? If the background is dark and the text and image are
centered, then the style file was loaded; otherwise I really do have a
problem.

Thanks.

-- 
  Colin Brace
  Amsterdam
  http://lim.nl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera - no css

[Colin Mcgarry]

Susanne Jäger wrote:
> Colin Mcgarry wrote, On 10.11.2007 17:28:
>
>   
>> The reason for browser searching is to accommodate browser quirks in the 
>> CSS.
>> 
>
> Well user agent sniffing is IMHO (one of) the most fragile method(s) of
> doing that. You will never target all "good browsers" properly - at the
> moment for example I don't see any CSS on your site, since I'm using a
> Linux machine. I have to tell my browser to fake the User Agent to see
> some styles.
>
> I couldn't find the perfect Wiki-page on the subject but have a look on
> Css Hack - css-discuss <http://css-discuss.incutio.com/?page=CssHack>
>
> Susanne
>
>   
I've put the css file back to a simple css file. Firefox; IE7 and Opera 
seem to see the page in pretty much the same way.
I hope it now works in Linux
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera - no css

[Colin Mcgarry]

It was a problem in the php. As "Opera" is position 0   in  
$_SERVER['HTTP_USER_AGENT'] the script wasn't putting OPERA the browser.
I'm still not sure why.
I've put in  if (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) 
to get round the problem.

The reason for browser searching is to accommodate browser quirks in the 
CSS.



Colin Mcgarry wrote:
> Thanks for the replies.
> The page now validates. Most of the problems came from imported scripts.
>
> Firefox and IE7 see indexcss.php  as a css file. Opera sees it as a 
> blank page.
>
> David Hucklesby wrote:
>   
>> On Fri, 09 Nov 2007 21:11:36 +0100, Colin Mcgarry wrote:
>>   
>> 
>>> I've just set up Opera to see how it deals  with my web pages. I was 
>>> surprised to see
>>> my home page has no css with Opera.
>>> the page is http://www.cpmac.comand the css is a php file  that begins
>>>
>>> 
>>>   
>> [code snipped]
>>
>> Hmm. I certainly see a styled page on Opera here -- Opera 9.24 
>> on Win XP SP2. But you seem to be browser sniffing using the user
>> agent string -- a dodgy technique at best. Why?
>>
>> Your drop-down menu will not close completely though. One menu item
>> is always open, no matter what.
>>
>> I'd investigate further if the page didn't take two minutes to load.
>>
>> Cordially,
>> David
>> --
>>
>> __
>> css-discuss [EMAIL PROTECTED]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>  
>>
>>
>>   
>> 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>  
>
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera - no css

[Colin Mcgarry]

David Hucklesby wrote:
> On Sat, 10 Nov 2007 15:14:52 +0100, Colin Mcgarry wrote:
>   
>> Thanks for the replies.
>> The page now validates. Most of the problems came from imported scripts.
>>
>> Firefox and IE7 see indexcss.php  as a css file. Opera sees it as a blank 
>> page.
>>
>> 
>
> Colin, What version of Opera are you using? Opera 9.24 on Win XP here
> most definitely sees your php file as CSS. From the "info" sidebar it
> displays as "MIME type from server: text/css" and the web page displays
> the background images specified in that file.
>
> I just don't see that particular problem -- although your browser
> sniffer may tell me I'm using Firefox. (?)
>
> Cordially,
> David
> --
>
>  
>
>
> I'm using 9.24 and XP. I've fixed the problem now by tweaking the php in 
> indexcss.php. Fot some reason, as "Opera" is at the beginning of the string 
> returned by $_SERVER['HTTP_USER_AGENT'], the script didn't register it as 
> present. Before I got the script right it told me Opera was SAFARI.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera - no css

[Colin Mcgarry]

Thanks for the replies.
The page now validates. Most of the problems came from imported scripts.

Firefox and IE7 see indexcss.php  as a css file. Opera sees it as a 
blank page.

David Hucklesby wrote:
> On Fri, 09 Nov 2007 21:11:36 +0100, Colin Mcgarry wrote:
>   
>> I've just set up Opera to see how it deals  with my web pages. I was 
>> surprised to see
>> my home page has no css with Opera.
>> the page is http://www.cpmac.comand the css is a php file  that begins
>>
>> 
> [code snipped]
>
> Hmm. I certainly see a styled page on Opera here -- Opera 9.24 
> on Win XP SP2. But you seem to be browser sniffing using the user
> agent string -- a dodgy technique at best. Why?
>
> Your drop-down menu will not close completely though. One menu item
> is always open, no matter what.
>
> I'd investigate further if the page didn't take two minutes to load.
>
> Cordially,
> David
> --
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>  
>
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Opera - no css

[Colin Mcgarry]

I've just set up Opera to see how it deals  with my web pages. I was 
surprised to see my home page has no css with Opera.
the page is http://www.cpmac.comand the css is a php file  that begins




= 5) { ?>

/* BEGIN CSS RENDERING */





followed by css styles



Firefox and even IE7 treat it identically but Opera sees nothing.

If I change the style sheet to a css file it works OK.



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

[css-d] Left 50% margin- 497

[Colin Mcgarry]

Looking at the css of a website I was visiting i noticed the following 
page layout.

#page { 
position: absolute;
width: 994px;
left: 50%;
margin-left: -497px;
}

I can follow the logic of this but is it better than
left 0
margin 0




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

Re: [css-d] [solved] css shiftiness

[Colin]

Thanks Georg,
I thought I was nuts for a while.  I was able to line things up in
photoshop, and everything looked normal.
I presume the png compression utility I used mucked things up, but it could
very well be me.
Very much appreciated...cheers!
Colin

Colin wrote:
> In ff1.5/win for some reason, #blurbMdl seems to shift 3px to the 
> left, and #blurbBtm an additional 4px.  I could shift the 
> background-position to line things up, but I don't think that should 
> be necessary.
> 
> http://url123.com/z7pxr

Check those background-images in your favorite program. They are
actually created with such a 3px/4px offset, and line up the same in all
browsers.
You should adjust the background-images - not the div positions or
background positions.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[css-d] css shiftiness

[Colin]

Hello,

Maybe I took the short bus in today.

I'm attempting to layout 3 divs(in #blurbTop, #blurbMdl, and #blurbBtm)
inside a container div(#blurb) to allow for different amounts of content,
and things aren't lining up as I would expect.  

The page does validate.

In ff1.5/win for some reason, #blurbMdl seems to shift 3px to the left, and
#blurbBtm an additional 4px.  I could shift the background-position to line
things up, but I don't think that should be necessary.

The test page is located here: http://url123.com/z7pxr

If anyone has any insight I'd be grateful.

Thanks in advance,
Colin

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

[css-d] IE Highlighting Bug

[Colin Sheaff]

On 3/28/06, Ingo Chao <[EMAIL PROTECTED]> wrote:

    Colin Sheaff wrote:
> I'm sure I could suss this out with enough hours of research and
> trial-and-error tweaking of the site, but I would love to resolve this
quicker
> so I ask for your help.
>
> http://www.canastamusic.com/press
> For some reason when using the mouse to highlight text (to copy text to
the
> clipboard) IE 6.0 will highlight in reverse to the begining of the page.
This
> doesn't happen in Firefox 1.501, or Safari 1.3.2. This actually happens
on all
> the pages on the site. I have a feeling it's an issue with relative
> positioning.


Yes, looks like it depends on the position:relative you have applied to
each p. What was the reason for doing so?

And is there a good reason for putting text into the web with a font
size of 10px?

Ingo



It's been a while since I carved this up, but I believe the position:relative
 has less to do with it than the overall position:relative  structure.
This was done to center what is effectively a three column display. I know I
can fix the highlighting problem by throwing IE into quirks mode, but that
totally destroys the format of the page. What I'm thinking of doing now is
having a fixed-width table to encapsulate the main content and use absolute
divs within that. I'm going to pull all the relative calls as soon as I can.

As to the 10px font size, this was to tie the text size as much as possible to
the graphics of the site. Many of the headers are in a custom font which we
rendered as image files, so keeping the non-rendered text as static as possible
seemed like a good idea. And I know the ideal is to keep the site as scalable
as possible, but the client asked for very specific things early on and was
willing to compromise on usability for visual aesthetic.

Colin

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

Re: [css-d] Site check please...

[Colin McGarry]

francky wrote:

> Brian Funk wrote:
>
>  
>
>> Keith Kaiser wrote:
>>
>>
>>   
>>
>>> OK! It's done.
>>> help me out by taking a look and giving me some feedback.
>>>
>>> http://kaiserklan.com/roundtable
>>>  
>>> 
>>
>> on WinXP IE6:
>>   
>> .
>
>
> 5.
> In general, be carefull with colored words on colored backgrounds. 
> There has to be enough contrast and also enough difference in color. 
> For example, some colorblind people don't see anything of the 
> blog-items as they are now, reports the Colorblindfilter 
> .
>  
>
>
> 6.
>  
>
I'd second this comment. Red is often considered a bright color. It is 
in fact a dark color. On a black and white photocopy red becomes black.



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

[css-d] IE Highlighting Bug

[Colin Sheaff]

I'm sure I could suss this out with enough hours of research and
trial-and-error tweaking of the site, but I would love to resolve this quicker
so I ask for your help.

http://www.canastamusic.com/press
For some reason when using the mouse to highlight text (to copy text to the
clipboard) IE 6.0 will highlight in reverse to the begining of the page. This
doesn't happen in Firefox 1.501, or Safari 1.3.2. This actually happens on all
the pages on the site. I have a feeling it's an issue with relative
positioning.

Thanks for the help,
Colin
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] DIV won't cover text

[Colin McGarry]

Sarangan Thuraisingham wrote:

> Colin McGarry wrote:
>
>> Hello
>> I'm trying to adapt a script I found for roll down menus in css.
>> My adaptation works except the rolldown menus displace the text of 
>> the div just below.
>> In the original they cover the text. I can't see what I've changed to 
>> make the comportment change.
>>
>>  The base script is at http://www.cpmac.com/test/menu-horizontal.htm
>> my adaptation is at http://www.cpmac.com/test/index-new2.htm
>>
>
> You CSS for the content div was like this:
> #site {
> position: relative;
> z-index: 1;
> top : 50px;
> [...]
> }
>
> Because, you had the position as relative, when the menu's where shown 
> the site div's contents changed in relative to the menu. So what you 
> want to do is, something like, this:
>
> #site {
> position:absolute;
> z-index: 1;
> top : 200px;
> [...]
> }
>
> Because of the absolute positioning, you need to get your top value 
> correct. Since you site has an logo, the top includes logo's height as 
> well. What happens, when you visitors disabled images? Will the site 
> layout get messed up? I will let you ponder over that.
>
> -- 
> Regards,
>  Saru
> --
> ECS, University of Southampton, UK
> http://sarangan.thuraisingham.net
> --
>
>
You're right. Putting position:absolute made the text stay behind the 
dropdown menus.
But I don't understand why it's only the text  which is affected.
I've made some changes to the css to put the (#site)  div higher than 
the menu bar.  A yellow background for site and a mauve background for P.
The site div text  stays behind the text of the menu headings (which in 
a dt)  but once a menu rolls down (which is dd - ul- li) the text is 
displaced.
cpmac
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] DIV won't cover text

[Colin McGarry]

Hello
I'm trying to adapt a script I found for roll down menus in css.
My adaptation works except the rolldown menus displace the text of the 
div just below.
In the original they cover the text. I can't see what I've changed to 
make the comportment change.

 The base script is at http://www.cpmac.com/test/menu-horizontal.htm
my adaptation is at http://www.cpmac.com/test/index-new2.htm
Most gratefull for any ideas.
cpmac

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning Help Please

[Colin McGarry]

Hello
I'm no expert on css but it seems to me that one can't put 
postion:absolute on contained items.
They postion themselves relative to the window.
cpmac


Thomas Hall wrote:

>Please look at this layout -
>http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_
>02
>
> 
>
>This is about what I am after except I'd like to be able to absolutely
>position elements inside the header, footer, and columns. It seems that when
>I attempt this though the elements I specify as "position:absolute;" do not
>position in the parent element properly. Also would it be difficult to set
>this to a fixed width layout of 780px and centered horizontally? Thanks for
>any help.
>
> 
>
>Tom
>
>__
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>  
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning Help Please

[Colin McGarry]

Thomas Hall wrote:

>Please look at this layout -
>http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_
>02
>
> 
>
>This is about what I am after except I'd like to be able to absolutely
>position elements inside the header, footer, and columns. It seems that when
>I attempt this though the elements I specify as "position:absolute;" do not
>position in the parent element properly. Also would it be difficult to set
>this to a fixed width layout of 780px and centered horizontally? Thanks for
>any help.
>
> 
>
>Tom
>
>__
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>  
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Drop down menu problem in Firefox

[Colin Mc Mahon]

Hi All,

I have been pulling my hair out over this one (all five that are left :)) I
have been working on the following css for 2 days now. Its a modification of
the Suckerfish Drop down menu over at A List Apart. I have been trying to
set it up without fixed widths on the menu's or top level li's, and have
been relatively successful. The css and XHTML below works perfectly in Opera
and IE, but there is a problem in Firefox, namely the link text pokes out of
the side of the sub-menus, not being enclosed in the ul.

I've fiddled with this every way i can think of with no success, I'm hoping
a fresh pair of eyes will see what i'm missing. Sample markup as follows.

XHTML:



Home
View
Property

View - NOT in
Dutch
View - NOT in
German
View - Special offers
View - DeLuxe
View - Local
View - status
View - Owner


Manage Property

Add
Property
Edit
Property
Delete
Property
Search
Property


Manage
Areas

View all
countries
Add a
new country/area
Edit a
country/area
Delete a
country/area


Manage
categories

Add sub
category
Edit sub
categories
Delete sub
categories


Manage
Currency
Manage
dates




CSS:
/* Top level menu appearance */
#nav-div {
background: #8dc63f url(images/nav_bg.gif) repeat-x top left;
border-bottom: 1px solid #7db52e;
border-left: 1px solid #7db52e;
border-right: 1px solid #7db52e;
}
#nav-div a {
color:#fff;
font-size:1.1em;
text-decoration: none;
}
#mainmenu {
margin: 0 0 0 10px;
padding: 0;
border: none;
}
#mainmenu li {
float:left;
margin: 0;
position:relative;
margin-bottom:-1px;
}
#mainmenu li a {
display:block;
padding: 5px 10px 5px 0.5em;
}
* html #mainmenu li a {
float:left;
}
/* current section top level styling */
#mainmenu li.on a {
background:#fff url(images/on_nav_bg.gif) repeat-x top left;
color:#000;
border-bottom: 1px solid #fff;
}
#mainmenu li.on a:hover {
color:#567eb9;
}

/* === Sub menu general appearance === */
#mainmenu li ul {
/*display: none;*/
position: absolute;
z-index:6000;
top: 100%;
left: 0;
border-style: solid;
border-color:#8dc63f #ccc #ccc #ccc;
border-width:5px 1px 5px 1px;
background:#fff url(images/on_nav_bg.gif) repeat-x top left;
}
#mainmenu li>ul {
top: auto;
left: auto;
}
#mainmenu li li {
display: block;
float: none;
clear:both;
overflow:auto;
background-color: transparent;
border: 0;
}
#mainmenu li li a {
display: block;
float:none;
white-space:nowrap;
color:#517322;
border-bottom: 1px solid #fff;
}
* html #mainmenu li li a {
float:left;
}
#mainmenu li li a:hover {
color:#567eb9;
}
/* current section sub menu styling */
#mainmenu li.on ul {
border-style: solid;
border-color:#8dc63f #ccc #ccc #ccc;
border-width:5px 1px 5px 1px;
background:#fff url(images/on_nav_bg.gif) repeat-x top left;
}
#mainmenu li.on li a {
background:transparent;
}
/* Rollover */
#mainmenu li:hover ul, li.over ul {
display: block;
}

Any insight would be very much appreciated on this. Thanks in advance,

Colin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Trouble with print css in IE

[Colin Butler]

I've created two css files for the page linked below. One is for screen and
the other (that eliminates navigation, banner and background) is for
printing. The problem I'm having is that while the banner, background and
navigation are being hidden properly when viewing print preview, a shadow of
the navigation menu is showing up when I actually print the page. This
problem is occurring in Internet Explorer 6.0. The problem does not appear
in Firefox or Netscape. Any suggestions?

http://econdev.nipsco.com/sitesearch.asp?siteid=1010&s=3



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] is this workable in less than 100hrs?

[Colin]

I'm not really a 'css guy', but I've been reading, following, listening, and
playing around for some time.

I've completed a many tabled projects, without the time to give the whole
'tableless' css thing a real fair shake.

At the present I feel stuck with one meun that could be fixed with tables in
an hour or two, but I've spent my day 'off' here.

I'd ultimately love to slice this correctly with em's for sizing, but I'm
not even close with pixel sizing (and I'm not sure it'll be possible with my
experience).

I'm feeling pretty crappy about the whole thing at the moment. 
I don't even know if it's possible with the costume images included in an
unordered list, but I'd really like to go this route.

Here's where I stand: <http://dreampowercostumes.com/r4/>, which includes
(underneath) what I'd like to strive for with .

The reason I'd like to keep the 's so high is I'd like to 'heighten
them' on a:hover.

I believe I've read about this before, and I think someone's response to
'semi-clickable links in IE' will probable solve this for Donna, and help me
out along the way.

I think I'm due for a miracle, any 'css gods' out tonight?

Cheers,
Colin

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Height:100% problems

[Colin DiBiase]

I have a site that has a repeating background y only. And i want it  
to adjust to the screen. got that to work but it seems like i need a  
minimum requirements because when i resize the window so the content  
is lager than 100% of the screen it cuts off the background that  
being repeated.


http://boelts-stratford.com/proxy/

http://boelts-stratford.com/proxy/style.css

Content is the div tag with the 100%

any suggestions?

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fwd: Height:100% problems

[Colin DiBiase]

I have a site that has a repeating background y only. And i want it  
to adjust to the screen. got that to work but it seems like i need a  
minimum requirements because when i resize the window so the content  
is lager than 100% of the screen it cuts off the background that  
being repeated.


http://boelts-stratford.com/proxy/

http://boelts-stratford.com/proxy/style.css

Content is the div tag with the 100%

any suggestions?



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Footer issues...

[Colin DiBiase]

I am trying to make a footer that is automatically adjusting, i think  
because i created a background image to repeat inside a div tag that  
has height of 100% then, the website isn't allowing the footer image  
to show because on some browsers it is cutting it off.  Is that the  
right assumption?


Site:
http://boelts-stratford.com/proxy/

Css:
http://boelts-stratford.com/proxy/style.css
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [solved] unsticky background

[Colin]

Hi Philippe,

I really appreciate the tips, you solved it.  
I tried using a clearing div more than twice before I posted in the first
place.  
I guess I'd been looking at it for too long, as I kept putting it in the
same place and scratching my head as to why it wouldn't work.

>But I much prefer the 'easy clearing' method outlined in the article I
linked to previously.
.
>[1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
>[2] <http://www.positioniseverything.net/easyclearing.html>


My next stop is to give both of these articles a 'real' read, as I just
brushed through them last night.

Thanks again,
Colin

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] unsticky background

[Colin]

>Delete that height. It works in IE because, you know, IE... 
>('haslayout' [1]).
>You want to clear those two divs. Good method is the 'easy clearing' 
>technique [2].
>
>[1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
>[2] <http://www.positioniseverything.net/easyclearing.html>
>
>Philippe
>---
>Philippe Wittenbergh
><http://emps.l-c-n.com/>


Hi Phillippe (and anyone else who's still up),

I've tried using a clearing div, removing the height - that gives me no
background in any browser. ???

I added a border to determine the height of #main.
The strangest thing happens, div#main loses all of its height.
I presume the problem cascades from somewhere above #main, but I just can't
see it.

Thanks so much for your help.

BTW, this can be seen at:
<http://dreampowercostumes.com/travel/usingClearingDiv.asp>

Colin

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] unsticky background

[Colin]

Hello all,

I've been struggling through glitch after quirk for hours in an attempt to
stay away from a table, and I just ran full steam into a wall.  ( that I
built several hours ago )
One background image, ( bg-content.jpg )  seems to be stuck.  (works in ie,
not in ff and opera - so it's probably a mistake of mine) 

I applied an artificial height to the div(main) that it's in that also
contains two div's(mainNav,mainCol) which are floated.  I applied before I
inserted in any content.  It now looks like a crappy design, because I'm not
going to be able to guess what height any particular page will be. (and this
image is supposed to stick to the bottom)
If anyone has any ideas, it looks like I'll be up for quite some time
tonight.
BTW, it does validate.

<http://dreampowercostumes.com/travel>

Thanks
Colin

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari Problems

[Colin DiBiase]

Weird thing. On internet explorer and Foxfire this looks a ok but if  
you load it on safari it doesn't seem to load the page correctly it  
seems to merge the webpage you are on with the new page, and if you  
hit refresh then it still gets all messed up. Could somebody please  
shed a little light on my problem. Here is the link to the page:


http://www.boelts-stratford.com/proxy/

here is the css:

http://www.boelts-stratford.com/proxy/style.css

Can anyone shed some light on the problem please??
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] General Question

[Colin DiBiase]

Hi this is just a general question i would like to be updated on.

I always thought you were supposed to put position in your Div Ids  
and stuff? but on the pages no one seems to be putting them at all.  
if it not there is there a default the tags becomes?


Also, I always thought there was a ie problems with positioning and  
you had to add a margin: 0px; and padding:0px; in the body tag. again  
i don't see ppl putting that in their css. are there new hacks or  
something that i am outdated on?

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] What is Html

[Colin DiBiase]

I been seeing this tag but i don't understand what it means could  
someone explain it in detail to me please thank you.


html>body #content {
width: 46%; /* ie5win fudge ends */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Ineffective Print Stylesheet

[Colin McAllister]

I have been trying to use the SantaKlauss "Pure CSS Tooltips" - found at;
http://web.archive.org/web/20040211063731/http://www.madaboutstyle.com/tooltip2.html

I have tried - as the article suggests - to put the print code into a separate 
linked stylesheet. As soon as I take this code; "div#main{margin: 0 0.5cm}" out 
of the "@media print" in the html source, and put it into the linked print 
stylesheet, the print version of the page shrinks into the centre of the page 
and becomes about the same width as the screen version.

To test if the print.css was being accessed, I used; div#main{margin: 0 0.5cm; 
color:red; background:yellow;}
and got red text, but no yellow background. 

So, the print.css *is* being seen, but not producing the desired effect (I 
don't really want the background to be yellow, but I can't see why it isn't!) 
Can you advise please?

-- 
___
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] i think i'm due for an alignment

[Colin]

>If anyone has any ideas on how to go about fixing this, I'm all ears.

Note to self...quit listening to the monitor.

Thanks everyone for your help.

Cheers,
Colin


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] i think i'm due for an alignment

[Colin]

Hello all,

I've been following the list for about a year, and this is my first 
serious crack at a table-less design. 

<http://www.dreampowercostumes.com/test/>

The page validates, and has the looks identical in Firefox and IE, 
so I suspect that I can't blame my browser :o)

The problem is in trying to horizontally center the #main div using 
"margin: 0 auto;" and for some reason it is getting offset to the left of
center.  
I've drawn a red border around the problem spot.

If anyone has any ideas on how to go about fixing this, I'm all ears.

Thanks in advance,
Colin


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE Print Preview Won't Play

[Colin McAllister]

Hi,

Can someone explain the huge amount of extra space that IE6 is putting in this 
page...

http://colinmac.port5.com/bluegreybox1-1/bluegreybox/index.html

It looks fine in Firefox and Opera, and I don't want to break *them* to fix IE, 
but I need it to work in IE.

TIA

Colin


-- 
___
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/