Re: [css-d] Positioning within a table cell?

[eric]

Quoting Jeff Piazza <[EMAIL PROTECTED]>:

> I'm having a problem trying to position a paragraph at the bottom
> right of a table cell.  The only way I can think to accomplish this
> is to declare the table cell "position: relative;", and then use
> absolute positioning for the paragraph within the cell.  However,
> this seems to have the effect of positioning the paragraph relative
> to the viewport, rather than a table cell.  I don't understand why
> this is, or what workaround will get me past this.

I ran into the same problem just a week ago, while creating my  
structured timeline (see  
<http://meyerweb.com/eric/thoughts/2008/01/21/structured-timeline/>  
for more; it's a long one).  It turns out that, per CSS2.1: 9.3.1  
(<http://www.w3.org/TR/CSS21/visuren.html#choose-position>), the  
result when table cells are set to 'position: relative' is undefined.   
I think most browsers are simply deciding that it doesn't apply, and  
thus the table cells don't establish containing blocks for their  
descendants.

The only workaround I can think of is to stick some wrapper element,  
like a 'div', into each the cells and then relatively position it via  
CSS.  Ugly, but it should work.


__
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] ADMIN: Suggestion

[eric]

Quoting MEM <[EMAIL PROTECTED]>:

> Can I suggest that I we move from a mailing list to a Newsgroup.

Yes, you can.  However, we will not.   css-discuss is a mailing list,  
and will remain so until it disbands.

Anyone who wishes to establish a CSS newsgroup may do so, and I'll  
even look favorably on announcing its creation here (but check with me  
first, please).  Do look around to see if there are already CSS  
newsgroups in existence that would serve the intended purpose, though.

As for the rest of this thread, it's similarly off-topic, and needs to  
end right now.  Thank you.

--
Eric A. Meyer
List Chaperone

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

[eric]

Quoting Bobby Jack :

> Is that the consensus here? Test on BOTH Safari and Chrome? Does   
> that mean you should also test on every point revision of Firefox,   
> every gecko-based browser, etc.?

I don't think there IS a consensus-- when it comes to questions of  
browser testing and support, that's nearly always the case.  I could  
find you people who say one should never test in IE, and others who  
say you should only ever test in IE.  And so on.

In any case, css-d isn't the right place to argue about which browsers  
one should or shouldn't support/test in/care about, which borders on  
being a religious discussion.  It is the right place to work out  
solutions to CSS problems in browsers, and work out the limitations in  
CSS support in browsers, and by "browsers" I mean any browser that has  
some level of CSS support.

So let's peel away the portions of the thread that have been about  
what browsers to support, and focus on how to support (or work around)  
the browsers we have.

--
Eric Meyer
List Chaperone

__
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] ADMIN: Flash code for sound player

[eric]

Quoting Frynge Customer Support :

> Can anyone lead me to a good player in flash that is compatible with most
> browsers and will allow your music to be continued, (not interrupted) while
> switching from page to page?

Perhaps someone can, but a mailing list about CSS is absolute,  
completely, and entirely the wrong place to be asking.  Let's all  
please make sure to have exactly zero responses to this post show up  
on the list, so as to limit the amount of off-topicness.  Thanks.

--
Eric Meyer
List Chaperone

__
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] a different approach for positioning

[eric]

We started building a form generator with a drag and drop interface and 
hit the often mentioned "float versus absolute" discussions. I've 
invented a different approach that has the flexibility of absolute 
positioning without the negative side effects but need some advice on 
some specific issues and look forward to your comments.

What is our goal?
We want to provide the user with a canvas with lines in it to position 
form elements through a drag and drop interface. Form elements need to 
be aligned some way irrespective of the width of the form elements to 
the left or right to make for attractive and usable forms.

If we do this the 'floated' way we give every element in one line a 
"float: left" and some "margin-left: xyz" to get it aligned properly. 
But this way the amount of margin-left is dependent on the width of the 
preceding element. Hence, after every adjustment all the margins will 
have to be recalculated. Not very nice. Besides that, floats are quite 
cumbersome when the content grows larger than the containing element as, 
amongst others, Shaun Inman pointed out: 
http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute.
If we do this the 'absolute' way we give every element "position: 
absolute" and some amount of "top: xyz" and "left: xyz". But absolutely 
positioned elements have no height, hence the lines collapse and do not 
adjust to the height of the content inside a form element (which for 
example could be an ul with many li's inside that need to be displayed 
vertically).

A different approach
After fiddling around for some time I concluded we had to abandon 
absolute positioning at all since this way elements are removed from the 
normal flow altogether.  So the trick was to find some way to start 
calculating the margin-left from a fixed position, not from the right of 
the element sitting left. I've managed this with a combination of 
"position: relative" + "left: 100%" and using negative margins instead 
of positive. Every form element has an extra content div to prevent the 
redraw bug in IE6. You can see a fixed-width example at 
http://www.solide-ict.nl/sitesdir/solidedrupal/formbuilder.html and a 
liquid example at 
http://www.solide-ict.nl/sitesdir/solidedrupal/formbuilder-liquid.html. 
I've called my blog 'simulated absolute positioning' but is only in 
Dutch yet :-(.

No hacks but some issues remain
Our CSS requires no hacks to work with all modern browsers (Safari, 
Opera, Firefox, IE7) and IE6. It does not work in IE Mac 5 but since 
this product is deprecated this is not on our priority list. The 
approach seems very stable, since elements grow vertically if necessary 
and the layout does not break when for example a background image is 
larger then the element itself. It is valid and does not influence the 
element order in html. However, IE6 has a problem rendering this CSS 
when the size of the viewport is changed. After a refresh everything 
aligns OK so I think this has nothing to do with hasLayout issues. I 
suspect some form of quirky percentages (see 
http://www.positioniseverything.net/explorer/percentages.html) is 
hindering this approach in IE6 (at least). Another issue is the layout 
breaks when an element is larger than the canvas. It would be better if 
the elements would stick out of the canvas.

I am quite enthusiastic about this approach and see many opportunities 
for it. I did some research but haven't seen it posted elsewhere. I 
would welcome your feedback, testing in other browsers and especially 
suggestions to overcome the rendering issues in IE6.

Anyway, thank you for your attention.
Eric Sol, [EMAIL PROTECTED]
__
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] a different approch for positioning - resizing viewport fixed

[eric]

please accept my apologies if this reply does not conform to the rules; 
i'm not very experienced with e-mail discussion lists...

Ingo wrote:

Great!

In IE7, the situation is similar to IE6: if the broswer window is 
resized pixelwise, every now and then, the content forgets its negative 
margins and flips to the right.

Confirmed.

Alan wrote:

give position: relative to the element div.line, all the item elements within 
will remain in place when resizing the viewpoint.

Yes, this fixes the render issues. Thanks!

Kind regards,
Eric Sol, [EMAIL PROTECTED]



__
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] Media queries and em's (Philip TAYLOR)

[Eric]

>I doubt that. em is a unit relative to the current font size.
>http://en.wikipedia.org/wiki/Em_%28typography%29
><http://en.wikipedia.org/wiki/Em_%28typography%29> says: "Thus, em
>generally means the point size of the font in question." So if for one
>particular font size 1em is 16 pixels, for a font twice as big 1em might
>be rather about 32 pixels.
>
>Best
>
>Christian

Christian,
With all due respect you have it wrong in relation to CSS.
"Thus, em generally means the point size of the font in question." is correct
for print but not for CSS.

Here's what the W3C spec
<http://www.w3.org/TR/css3-values/#font-relative-lengths> has to say about it -


"Aside from ‘rem <http://www.w3.org/TR/css3-values/#rem-unit> ’ (which refers to
the font-size of the root element), the font-relative lengths refer to the
computed font metrics of the element on which they are used. The exception is
when they occur in the value of the ‘font-size’ property itself, in which case
they refer to the computed font metrics of the parent element (or the computed
font metrics corresponding to the initial values of the ‘font’ property, if the
element has no parent).

em unit

Equal to the computed value of the ‘font-size’ property of the element on which
it is used.

The rule:

h1 { line-height: 1.2em }

means that the line height of h1 elements will be 20% greater than the font size
of h1 element. On the other hand:

h1 { font-size: 1.2em }

means that the font size of h1 elements will be 20% greater than the computed
font size inherited by h1 elements."



The EM unit is relative to 1) the declared font-size of the element 2) the
font-size of the parent.

This is exactly why I use the REM unit. It is only relative to the font-size of
the root element and is not subject to any other unit.

html {font-size: 16px;}

Then all REMs on the page will be 16px no matter what eles.

When using EM's you can run into problems when the font-size or an element's
parent has a direct and not so nice effect on a child element's font-size.


Eric Miner
e...@minerbits.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/

[css-d] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

Felix,
I thought for the sake of beginners who might subscribe to this list we ought to
discuss this in a new thread.

>> html {font-size: 16px;}

>> Then all REMs on the page will be 16px no matter what eles.
>
>Not quite. Notwithstanding that styling text in px ignores the wide variation
>in effective pixel density and rudely disregards the visitor's optimum text
>size, as presumptively established via his UA's default size setting,

I'm sure you fully understand what the REM unit is, why it was developed, how it
works and how if varies fundamentally from the EM unit.
But just in case others don't let's take a look at a few paragraphs from Eric
Meyer's new CSS booklet titled "Values, Units and Colors"
<http://shop.oreilly.com/product/0636920027621.do>

On page 12 under the heading "Relative Length Units":

" The rem unit
Like the em unit, the rem unit is based on declared font size. The
difference—and it’s a
doozy—is that whereas em is calculated using the font size of the element to
which it’s
applied, rem is always calculated using the root element. In HTML, that’s the
html
element. Thus, declaring any element to have font-size: 1rem; is setting it to
have the
same font-size value as the root element of the document.



Basically, rem acts as a reset for font size: no matter what relative font
sizing has happened
to the ancestors of an element, giving it font-size: 1rem; will put it right
back
where the root element is set. This will usually be the user’s default font
size, unless of
course you (or the user) have set the root element to a specific font size.
For example, given this declaration, 1rem will always be equivalent to 13px:

html {font-size: 13px;}

However, given this declaration, 1rem will always be equivalent to
three-quarters the
user’s default font size:

html {font-size: 75%;}"

>astute
>users with competent UAs can avoid the need to apply zoom to restore some
>legibility, at least potentially, via a user stylesheet containing the
>following:
>
>html,
>body
>{font-size: medium !important}
>
>In my non-testing UAs this will usually result in a rem size of 20px or 24px.
>

As I'm sure you also know 'medium' is computed as the default font-size set for
the User Agent, so it will actually be 16px in the vast majority of cases.

>That simplicity could easily be expanded to include much more:
>html,
>body,
>#body,
>p,
>td,
>pre,
>code,
>li,
>dd,
>#content,
>#main
>{font: medium/normal sans-serif !important}

Why in the world would you force your visitors to see only the default
sans-serif font?
You're denying them the opportunity to experience the advances in modern web
typography.
With the huge selection of fonts designed for or tuned/tweaked for use on the
screen restricting them to only one default font is very "rude" indeed.

>
>The result though can be a big mess of overlapping and/or hidden content if
>container sizing is also done in px.
>--

To be honest I'm not sure what you mean by this. When exactly does setting an
element's size in pixels result in what you describe? I really am curious.

>
> Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!
>
>Felix Miata  ***  http://fm.no-ip.com/ <http://fm.no-ip.com/>

You might want to check the links on some of your pages...many are dead. Also,
most of the pages you classify as "friendly"
(in terms of font-size) are using font sizes equal to and in some cases less
than the pages that are listed as 'unfriendly'.

Interestingly the Nielsen Norman Group page you link to that's titled "Let Users
Control Font Size" sets font-size explicitly
to 14px, not 'medium', not 'large'...but in pixels.

I would love to discuss the "tyranny of the minority" that Mr. Nielsen and his
cohorts represent, but that's a different thread.

Eric
__
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] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

well David,

Since I'm still in the process of getting to 'Pro" level I can point you to a
tree Pro's site if you're interested in see how the REM unit is used: Is Andy
Clarke 'pro' enough for you?
His calls his site "Stuff & Nonsense" <http://www.stuffandnonsense.co.uk/> I'm
sure you know the name.

> Since the mission of this list is the practical application of CSS,
> rather than disusing it,

I'm sorry I thought this list was a place to share information about CSS in
order to solve problems, share tips & techniques and to learn. One way I've
learned in the past is to ask questions and listen to people who know more than
I do...it sounds like this list may be just for posting URLs to code samples.

Sorry, but I really did think that the info I posted was fairly clear.

Eric.


On January 23, 2013 at 3:31 AM David Laakso  wrote:
> On Sat, Jan 19, 2013 at 2:49 PM, Eric  wrote:
>
> > I thought for the sake of beginners who might subscribe to this list we
> > ought to
> > discuss this in a new thread.
>
> > Eric
>
>
> Since the mission of this list is the practical application of CSS,
> rather than disusing it, how about putting up a simple 2 column test
> page that shows how a pro would make all this happiness happen...
> enabling children of all ages to land on a readable and legible site
> delivered from one address to desktop, laptop, tablet, and mobile
> devices?
>
> Thanks.
>
> Best,
> David Laakso
>
> --
> Chelsea Creek Studio
> http://ccstudi.com <http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

Hello David,

I would assume the Andy checked his design and code on all available devices
since he's an industry leader in advocating such testing. I have no idea what's
going on with your Android device, but if I were to diagnose the issue I'd start
there. Besides, if what you describe has something to do with the site's code I
don't think the the REM unit would be even close to the cause. I'd be happy to
list more sites using the REM unit. Maybe there will be something wrong with
them too.

BTW - I apologize for my atrocious spelling, it was very late at night when I
sent that message.

Eric

On January 24, 2013 at 8:25 AM David Laakso  wrote:
> On Wed, Jan 23, 2013 at 11:49 PM, Eric  wrote:
>
> > Since I'm still in the process of getting to 'Pro" level I can point you to
> > a tree Pro's site if you're interested in see how the REM unit is used: Is
> > Andy Clarke 'pro' enough for you?
> > His calls his site "Stuff & Nonsense" I'm sure you know the name.
>
> > Eric.
>
> re: "Stuff & Nonsense" <http://www.stuffandnonsense.co.uk/>
>
> Yes, very nice. Thanks.
>
> Shame that it is impossible to navigate the site in Android/2.3.6
> [tapping the unicode symbol for navigation crashes the site, sending
> the user back to the phones desktop]; and, employing +1 zoom causes an
> enormous horizontal wiggle making the page difficult to read. Perhaps
> these issues will be corrected in future versions...?
>
> Best,
> David Laakso
>
> --
> Chelsea Creek Studio
> http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

David,

> Nevertheless, the site -- as previously stated -- has issues [crashing
> the browser and a massive horizontal-scroll bar at +1] in
> Android/2.3.6.

What does that have to do with developing an understanding of relative units in
CSS?

But, since you insist on changing the topic (which is usually done by those who
don't understand the topic) let me just saywhat the hell does it matter!?
Big deal, go view the site on another device so you can check the code and see
how the REM unit is used in the wild. Do you understand the difference between
an EM and a REM? Let's try to stay on topic.

This all started because a member asked if using EMs would have an effect on his
media queries. The answer to that question, as I'm sure you know, is yes it can
be done.
But, I did notice that you didn't warn the OP about the specificity issues that
will arise when using EMs because they're relative to the parent element. Not
sure if you've ever run
across these issues, but I have and it's a major pain. And, those issues are
exactly why the REM unit was developed.

So shall we go into more detail on the REM and other relative units or move on
to the next topic?

Eric

On January 24, 2013 at 4:03 PM David Laakso  wrote:
> On Thu, Jan 24, 2013 at 1:54 PM, Eric  wrote:
>
> > I would assume the Andy checked his design and code on all available devices
> > since he's an industry leader in advocating such testing.
>
> Eric,
>
> re: stuffandnonsense.<http://www.stuffandnonsense.co.uk/>
>
> Nevertheless, the site -- as previously stated -- has issues [crashing
> the browser and a massive horizontal-scroll bar at +1] in
> Android/2.3.6.
>
> I made no assertion whatsoever as to either the cause or the cure of
> these outstanding issues.
>
> Best,
> David Laakso
>
>
>
>
>
>
> --
> Chelsea Creek Studio
> http://ccstudi.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] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

Hi Phillip,

You ran Andy Clarke's site through the validator instead of trying to understand
how the REM unit (the thread's topic) is used in CSS?! All I can say is that
that's just a bit sad. Instead of trying to learn something your first action is
to try to discredit the example I posted?!

Well, I'll keep posting information to help folks learn and understand CSS. Feel
free to run that info through the validator and a spell-checker if you want.

Eric


On January 24, 2013 at 2:22 PM Philip TAYLOR  wrote:
>
>
> Eric wrote:
>
> > I would assume the Andy checked his design and code on all available devices
> > since he's an industry leader in advocating such testing.
>
> "Testing can reveal only the presence of bugs, not their absence".
> (Edsger Diskstra).
>
> All the checking in the world is a waste of time if he doesn't
> start by ensuring that his site is W3C-compliant. The site has
> putatively been authored to the HTML 5 specification, yet generates
> 11 validation errors and three warnings.
>
> 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/

Re: [css-d] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

Philippe,



>(under example 25 for the width MQ – it applies equally to the REM unit)



Sure, that makes sense as long as a font-size has been set for the root element.
If there is no font-size set on the root element  I'm not absolutely sure what
would be used but based on my testing of the REM  unit and UA default font-size
my assumption is that the UA's default font-size value would be used. I need to
look into that.



> Bottom line, if you go with relative units, go all the way.

Well, that's one way to look at it, but you'll find many pages in the wild that
use a mix of fixed and relative units... it most often works however.



Eric


On January 25, 2013 at 12:37 AM Philippe Wittenbergh  wrote:
>
> Le 25 janv. 2013 à 14:04, Eric  a écrit :
>
> > What does that have to do with developing an understanding of relative units
> > in
> > CSS?
> >
> > But, since you insist on changing the topic (which is usually done by those
> > who
> > don't understand the topic) let me just say….what the hell does it matter!?
>
> It has. The cited example site does trigger a serious scrollbar on my desktop
> browser(s) when zoomed in – a block (.work-nav.m-hide has it's width set in
> px)… There may be other issues, didn't check them.
> Bottom line, if you go with relative units, go all the way.
>
> On the subject of relative units, the media query spec has this:
> > The ‘em’ value is relative to the initial value of ‘font-size’.
>
> (under example 25 for the width MQ – it applies equally to the REM unit)
>
> I'll let you ponder the meaning of it.
> http://www.w3.org/TR/css3-mediaqueries/#width
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com
>
>
>
>


On January 25, 2013 at 12:37 AM Philippe Wittenbergh  wrote:
>
> Le 25 janv. 2013 à 14:04, Eric  a écrit :
>
> > What does that have to do with developing an understanding of relative units
> > in
> > CSS?
> >
> > But, since you insist on changing the topic (which is usually done by those
> > who
> > don't understand the topic) let me just say….what the hell does it matter!?
>
> It has. The cited example site does trigger a serious scrollbar on my desktop
> browser(s) when zoomed in – a block (.work-nav.m-hide has it's width set in
> px)… There may be other issues, didn't check them.
> Bottom line, if you go with relative units, go all the way.
>
> On the subject of relative units, the media query spec has this:
> > The ‘em’ value is relative to the initial value of ‘font-size’.
>
> (under example 25 for the width MQ – it applies equally to the REM unit)
>
> I'll let you ponder the meaning of it.
> http://www.w3.org/TR/css3-mediaqueries/#width
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.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/

[css-d] My apologies to the List

[Eric]

I'm not usually a 'hot headed' type and my recent messages are not my usual tone
and will not be my tone going forward. I apologize to all if I lowered the
standards here. I hope I can provide useful information to anyone who
wants/needs it in the future.

Later,
Eric
__
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] New Thread: The REM unit vs. EM's vs. PX's...

[Eric]

Philippe,

> It comes down to the value set by the UA stylesheet (in case of font-size,
> usually the value set in the browser preferences, or the system preferences).

I knew I had read that somewhere. Thanks for clarifying it.

Thanks,
Eric
On January 25, 2013 at 8:07 PM Philippe Wittenbergh  wrote:
>
> Le 26 janv. 2013 à 03:37, Eric  a écrit :
>
> >> (under example 25 for the width MQ – it applies equally to the REM unit)
> >
> > Sure, that makes sense as long as a font-size has been set for the root
> > element. If there is no font-size set on the root element I'm not absolutely
> > sure what would be used but based on my testing of the REM unit and UA
> > default
> > font-size my assumption is that the UA's default font-size value would be
> > used.
> > I need to look into that.
>
> The keyword is 'initial'.
>
> Even if the author specifies a font-size on the root element, it won't have
> any affect on the (computed / used) value of 'em' or 'rem' used for the MQ.
>
> http://www.w3.org/TR/CSS21/about.html#initial-value
> http://www.w3.org/TR/css3-values/#common-keywords
> http://www.w3.org/TR/css3-cascade/#initial
>
> It comes down to the value set by the UA stylesheet (in case of font-size,
> usually the value set in the browser preferences, or the system preferences).
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.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] Drop down menu pushing content down

[Eric]

Mike,

I took a look at your site in FF 19.0.2 and Chrome 25.0.1364.172 m both on Win7
and they look identical to me. Could be more specific about where the problem
is?
Thanks,
Eric Miner
__
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] font-sizing bug in generated content in IE 10 ?

[Eric]

I've been thinking about this issue since it was first posted because it seems
to relate, at least a bit, to a bug in IE9 and 10 that I reported late last
year. See IE bug ID 772679
<http://connect.microsoft.com/IE/feedback/details/772679/ie10-not-recognizing-font-decloration-when-rem-is-used-as-font-size-unit-of-measure>
.
In thebug IE won't use the REM unit in any font-size rule including the font
shorthand syntax. In fact does it not use the REM it completely ignores the
entire font related rule and falls all the way back to its default serif or
sans-serif skipping the full stack. Interestingly, IE will use the REM unit to
size elements (as I do regularly).

I battled with their bug reporting system for months, it kept closing the bug
with 'as designed' and I had to keep reactivating it. Finally I contacted out
Fearless and Famous Leader, Mr. CSS Wizard himself, Eric Meyer who talked to
some IE Engineers he knows who then started working on the issue via internal
bug IDsMany thanks Eric!!

Anyway, this issue shines another light on the whole problem in IE. As I recall
generated content is handled differently by the UA's parser. My guess is that
when generated content is present a header is added to it before it enters the
CSS parser and this header contains information that then allows IE to recognize
and use the REM unit. I'll add a note to the bug ID containing the info from
this problem...maybe it will help them id and fix the bug faster.

In the meantime the only work-around that I've found is to include a font-sizing
rule using pixels before one using REMs. Yes, I know it's a pain but the REM
unit is just too powerful and flexible to let EM get in the way.

Hope that helps a bit,

Eric

__
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] Implementing Responsive Design

[Eric]

Hi Colin,

Yeah that approach is called "mobile first". It's gotten to be really popular. A
few months ago though I read a good article call "Desktop First" that argued the
opposite approach...but I can't find it again (I'll keep looking).
BTW - when was that book published? I thought most mobile UAs supported MQ's by
nowI could be wrong.

As for me I work from the desktop down, it just makes more sense for me.

Eric

> On August 22, 2013 at 9:10 PM "Colin (Sandy) Pittendrigh"
>  wrote:
>
>
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS3 Animation Top Position Percent problem

[Eric]

I read something about this a couple of months ago on the W3C CSS mail list. As
I recall the discussion was about percentage positioning units not working per
spec  in Mozilla and one of the Moz engineers agreed. I can't seem to find it
right now but it's worth a search.
In both webkit and IE11 the bottom box doesn't scroll unless you change the unit
from a percentage. In FF 23.0.1 both boxes are animating smoothly. In tonight's
Moz8illa build the animation is all messed up, it appears the the
animation-timing-function is being ignored making it very jerky and irregular.
They must have been playing around in that module today.

Eric


> On August 26, 2013 at 12:52 PM Chris Rockwell  wrote:
>
>
> This is a webkit thing, check it in Firefox and it should work. I'll need
> to do more research to find out why.
>
>
> On Mon, Aug 26, 2013 at 12:31 PM, Kuzeko Web Design - Matteo Lissandrini <
> w...@kuzeko.com> wrote:
>
> > Hi all,
> >
> > I am trying a simple animation: long text inside a box scrolling up.
> > Since I have multiple boxes they have different length, so I am trying to
> > use keyframe animation with top positioning with percent value.
> >
> > Please find an example here:
> > http://jsfiddle.net/sKEnv/1/
> >
> > As you can see the first example is using em units and it works, the second
> > it uses percent values and it doesn't.
> >
> > Am I doing something wrong or is simply not possible to do this with
> > percent values?
> >
> >
> >
> > Thanks!
> >
> >
> > --
> >
> > Kuzeko
> >
> >
> >
> > On 2 October 2012 18:38, Gabriele Romanato  > >wrote:
> >
> > > I generally tend to use CSS3 animations in mobile web apps whenever it's
> > > possible, but sometimes I get stuck when the app's requirements are too
> > > complex. So I usually mix up basic CSS3 animations with JS routines in
> > > order to not end up with messy markup as in many Codrops examples (you
> > > know, form elements used to create slideshow effects and so on).
> > >
> > > What I don't really know is if there's a common best practice to follow
> > > when creating complex web apps which feature a lot of advanced effects.
> > > CSS3 animations are faster than JS animations, but when your boss or your
> > > client has a Flash-like idea about how your effects should be made, well
> > > it's difficult to me to stick to pure CSS animations.
> > >
> > > What's your approach when you design complex web apps?
> > > I'd really like to get some hints about the role of CSS animations in
> > that
> > > context.
> > >
> > > Thanks in advance.
> > > Gabriele
> > >
> > >
> > > __
> > > 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-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/
> >
>
>
>
> --
> Chris Rockwell
> __
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS3 Animation Top Position Percent problem

[Eric]

I forgot to mention thisthe -moz- prefixes for animation are no longer
necessary, haven't been for a couple of versions.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS3 Animation Top Position Percent problem

[Eric]

It's more of a misbehavior than a bug. The Moz engineering team probably just
decided not to go back and change it after the spec was finalized. It's sort of
like how they're the only UA that doesn't support display: run-in. Back int he
'90s a bug was opened on it and loads of note by senior engineers stating why
they should support (one saying that it's embarrassing for FF to be the only UA
not to support) it's still sitting there unassigned over 15yrs later. That's
just how engineering teams work.

I would suggest that you don't use percentage as a unit of measure in CSS
animations.

Eric


> On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini
>  wrote:
>
>
> Thank you all for the answers, but now I am really confused.
> So is this supposed to do so or is a bug?
>
> Can you fork my example and show me how to have this work properly if this
> is possible?
>
>
>
> --
>
> Kuzeko
>
>
>
> On 27 August 2013 08:28, Philippe Wittenbergh  wrote:
>
> >
> > Le 27 août 2013 à 14:52, "L. David Baron"  a écrit :
> >
> > > Many of the other references in the CSS spec to things that are
> > > based on the height of the containing block explicitly say that if
> > > the containing block's computed height is 'auto', then the
> > > percentage is as well. See, for example:
> > > http://www.w3.org/TR/CSS2/visudet.html#the-height-property
> > > http://www.w3.org/TR/CSS2/visudet.html#min-max-heights
> > >
> > > http://www.w3.org/TR/CSS21/visuren.html#position-props , however,
> > > does not say that, and you shouldn't infer it from the same thing
> > > being stated elsewhere.
> > >
> > > The working group explicitly decided *not* to change this in 2009;
> > > see:
> > > http://wiki.csswg.org/spec/css2.1#issue-134
> > > http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html
> > > http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html
> >
> > Oh :-(. I had forgotten about that resolution (which I find inconsistent
> > with the way height and min-max-height work). Thing is, no browser released
> > as of today, including Presto-Opera, implement this, even for a very basic
> > test case [*] (I can't test IE 11beta, though). But Presto based Opera and
> > Gecko manage to animated it. Bizarre.
> >
> > [*] http://dev.l-c-n.com/_temp/top-perc.html
> >
> > Gecko bug report is here:
> > https://bugzilla.mozilla.org/show_bug.cgi?id=260348
> >
> > Philippe
> > --
> > Philippe Wittenbergh
> > http://l-c-n.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/
> >
> __
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How can I use position fixed in IE?

[Eric]

Hi Marie-Ange;

Your CSS works fine in IE11, I don't currently have access to an earlier
version, but I'll try it on another box soon.


> On August 29, 2013 at 10:43 AM marie-ange.demeulemees...@bnpparibasfortis.com
> wrote:
>
>
>
> Hi,
> How can I use position fixed in IE 8+ without changing the doctype:  html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >, and without using
> jQuery?
> This code doesn't work:
> .test{
> z-index:2147483647;
> position:fixed;
> bottom:0;
> left:0;
> }
> Thanks a lot.
>
> Regards,
>
> Marie-Ange
> ==
> BNP Paribas Fortis disclaimer:
> http://www.bnpparibasfortis.com/e-mail-disclaimer.html
>
> BNP Paribas Fortis privacy policy:
> http://www.bnpparibasfortis.com/privacy-policy.html
>
> ==
> __
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How can I use position fixed in IE?

[Eric]

Hello Again,

It works in IE10 also.

Eric
> On August 29, 2013 at 10:43 AM marie-ange.demeulemees...@bnpparibasfortis.com
> wrote:
>
>
>
> Hi,
> How can I use position fixed in IE 8+ without changing the doctype:  html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >, and without using
> jQuery?
> This code doesn't work:
> .test{
> z-index:2147483647;
> position:fixed;
> bottom:0;
> left:0;
> }
> Thanks a lot.
>
> Regards,
>
> Marie-Ange
> ==
> BNP Paribas Fortis disclaimer:
> http://www.bnpparibasfortis.com/e-mail-disclaimer.html
>
> BNP Paribas Fortis privacy policy:
> http://www.bnpparibasfortis.com/privacy-policy.html
>
> ==
> __
> 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-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How can I use position fixed in IE?

[Eric]

MarieAnge,

When I ran your CSS on IE 10 and 11 I applied to markup that was very large and
in both cases the fixed element stayed where I told it to while the other
elements scrolled. I agree could you point us to a URL example?

Eric

> On August 30, 2013 at 5:50 AM marie-ange.demeulemees...@bnpparibasfortis.com
> wrote:
>
>
>
>
>
> Tom,
> Thank you for you code.
> However this code doesn’t work in IE8 neither in IE9 and IE10.
> When you scroll your page, you’ll see that this test block will scroll too.
> I’d like that this block stays at the bottom of the page.
> I have a bad feeling. This will not work in Quirks mode.
>
> Regards,
>
> MarieAnge
>
> -Original Message-
> From: Tom Livingston [mailto:tom...@gmail.com]
> Sent: Thursday, August 29, 2013 5:28 PM
> To: Eric
> Cc: DEMEULEMEESTER Marie-Ange; CSS Discussion Group
> Subject: Re: [css-d] How can I use position fixed in IE?
>
> I was able to get this to work in 8:
>
> 
> *{margin: 0; padding: 0;}
> body{position: relative;}
> .test{
> position:fixed;
> _position: absolute;
> bottom:0;
> left:0;
> z-index:2147483647;
> }
> 
>
> Not sure if this will work in your case...
>
>
> On Thu, Aug 29, 2013 at 11:26 AM, Eric  wrote:
> > Hello Again,
> >
> > It works in IE10 also.
> >
> > Eric
> >> On August 29, 2013 at 10:43 AM
> >> marie-ange.demeulemees...@bnpparibasfortis.com
> >> wrote:
> >>
> >>
> >>
> >> Hi,
> >> How can I use position fixed in IE 8+ without changing the doctype:
> >>  >> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >, and without using
> >> jQuery?
> >> This code doesn't work:
> >> .test{
> >> z-index:2147483647;
> >> position:fixed;
> >> bottom:0;
> >> left:0;
> >> }
> >> Thanks a lot.
> >>
> >> Regards,
> >>
> >> Marie-Ange
> >> ==
> >> BNP Paribas Fortis disclaimer:
> >> http://www.bnpparibasfortis.com/e-mail-disclaimer.html
> >>
> >> BNP Paribas Fortis privacy policy:
> >> http://www.bnpparibasfortis.com/privacy-policy.html
> >>
> >> ==
> >> __
> >> 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-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 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/
__
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] IE10 Compatibility mode

[Eric]

I do have a  here. With IE7 having a 0.6% share right nowwhy bother with it
at all? Many of the big name pros in the Web Design/Dev industry no long check
for UA versions. Most don't even support the ancient UAs at all.

Just wondering.

> On September 4, 2013 at 3:19 PM Tom Livingston  wrote:
>
>
> Terrific! This just keeps getting better! LOL.
>
> I have multiple VMs running XP, Vista and 8. One XP is 7, one is 8.
> That 7 looks fine, while my 10 VM in compatibility mode breaks...
>
> On Wed, Sep 4, 2013 at 3:15 PM, Chris Rockwell 
> wrote:
> > It renders the same for me using IE7 or IE10CM
> >
> >
> > On Wed, Sep 4, 2013 at 3:12 PM, Tom Livingston  wrote:
> >>
> >> On Wed, Sep 4, 2013 at 3:11 PM, Chris Rockwell 
> >> wrote:
> >> > And it looks like "box-sizing: border-box" is the ultimate culprit,
> >> > maybe
> >> > IE7 doesn't handle it well?? Was the box-sizing property added in later
> >> > maybe?
> >> >
> >> >
> >> > On Wed, Sep 4, 2013 at 3:08 PM, Chris Rockwell 
> >> > wrote:
> >> >>
> >> >> I see ".ie7 .wrapper {width: 940px}"
> >> >>
> >>
> >> Thing is, as I mentioned, it renders correctly in IE7. I need to
> >> distinguish IE10CM from IE7 apparently...
> >>
> >>
> >> --
> >>
> >> Tom Livingston | Senior Front-End Developer | Media Logic |
> >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> >
> >
> >
> >
> > --
> > Chris Rockwell
>
>
>
> --
>
> 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/
__
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] Site check please IE9/10

[Eric]

David,

I really don't see how the three HTML errors would case his problem. And, you
might want to check the CSS before running a validation. He's using CSS3 that
validation does not appear to have been run under CSS3 but rather CSS2.1 making
the error irrelevant. And, even if they were the only time I've run into
problems like he describes they had to do with overlapping elements and the use
of z-index, which validation won't find.


> On September 3, 2013 at 8:59 AM David Postill  wrote:
>
>
> On Tue, 03 Sep 2013 14:20:01 +0200, Albert van der Veen wrote:
>
> | Hi all,
> |
> | I'm working on a new site and just found out it looks (and works, as you
> | can't even click any link) awful in IE8/9 and good in IE10. Can anyone
> | see whether IE8/9 are choking on something that IE10 has no problems
> | with? I can't imagine css differences between IE9 and 10 being so huge
> | it looks this awful.
> |
> | http://ideabooks.albertvanderveen.com/
>
> Validation?
>
> http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fideabooks.albertvanderveen.com%2F
> 3 errors
>
> http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fideabooks.albertvanderveen.com%2F
> 42 errors
> --
> David Postill
> Dance your Life - Biodanza in Alkmaar, Holland - 
> __
> 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-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] Site check please IE9/10

[Eric]

Albert,

I'm not seeing your problem. Have your fixed it?

> On September 3, 2013 at 8:20 AM Albert van der Veen 
> wrote:
>
>
> Hi all,
>
> I'm working on a new site and just found out it looks (and works, as you
> can't even click any link) awful in IE8/9 and good in IE10. Can anyone
> see whether IE8/9 are choking on something that IE10 has no problems
> with? I can't imagine css differences between IE9 and 10 being so huge
> it looks this awful.
>
> http://ideabooks.albertvanderveen.com/
>
> Thank you for your time!
>
> best regards,
> Albert
> __
> 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-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] Where do you cut-off your browser support?

[Eric]

> On September 21, 2013 at 6:47 PM Freelance Traveller
>  wrote:

> >On 9/21/13 2:44 PM, Freelance Traveller wrote:
> >> I'd just tend to write
> >> to the standard,
> >And what would that standard be? It's almost as though there are two:
> >the w3c-compliant world, and the IE world.
> 
> Less so now than formerly, I think; recent versions - IE7 and later,
> really - have done a far better job of compliance with the W3C standard
> than earlier versions. And that largely seems to have been because of
> developer pressure. Yes, there are still - and probably always will be -
> areas where IE diverges from W3C, but I think that, more and more, it's
> for legacy support rather than future lock-in.
> 
> --
> Jeff Zeitlin, Editor

Well, I only study and test the standards compliance of the the most recent UA
versions in preparation for their much wider use. I also have the advantage of
not having to satisfy clients and/or management. Beginning with IE9 more and
more standards compliance has been included. But IE11, in my analysis, is more
up-to-date with W3C standards(un-prefixed)  than the other modern UAs available
right now. Webkit requires far too many prefixes and Moz is playing catchup is
some areas and is not addressing non-support in others. Chrome also fell behind
but has recently begun to catch up too. All of this is just 'IMHO' stuff.

Eric
__
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] Good HTML / CSS3 books

[Eric]

I also use online resources most of the time. But if I need a quick syntax
and/or usage reference I always reach for these two:



CSS Pocket Reference 4th Edition
<http://www.amazon.com/CSS-Pocket-Reference-ebook/dp/B005EI866S/ref=la_B001H9RS4E_1_1?s=books&ie=UTF8&qid=1382989122&sr=1-1>




The HTML Pocket Guide
<http://www.amazon.com/The-HTML-Pocket-Guide-Peachpit/dp/0321699742>

Around the first of they year Eric Meyer's publisher was offering three huge
chapters from his upcoming edition of  CSS: The Definitive Guide for free.
They're offering them for a couple of US$ each HERE
<http://search.oreilly.com/?i=1;q=meyer;q1=Books;x=0;x1=t1;y=0&act=fc_contenttype_Books>
. I use the PDF's for searches.

Hey Mr. Meyerany word on when the full new edition will be available?


> On October 27, 2013 at 9:00 PM The Doctor  wrote:
>
>
> What would you recommend for a good HTML5 CSS3 reference?
>
> --
> Member - Liberal International This is doc...@nl2k.ab.ca Ici doc...@nl2k.ab.ca
> God,Queen and country!Never Satan President Republic!Beware AntiChrist rising!
> http://www.fullyfollow.me/rootnl2k Look at Psalms 14 and 53 on Atheism
> 23 Nov 2013 a Big day indeed
> __
> 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-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] IE issue!

[Eric]

Ed,

I'm surprised that IE11 would be the source of your problem, the last I read
it's the most standards compliant UA in the wild. I've had less problems with it
than Mozilla or Chrome UAs.

Anyway, could provide a link to the page in question so it can be looked at?

Eric Miner


> On January 22, 2014 at 1:34 PM Ed Pybus  wrote:
>
>
> Hiya,
>
> I've building a very simple internal website for work. Unfortunately they
> use IE11.
>
> I've encounter an odd problem with display:inline-block. When I have the
> website on a USB stick and open it in IE11 it opens as expected, when I
> transfer it to the server and open it the elements that should be display
> as inline-block are displaying just as a block. The elements in questions
> is a list of s.
>
> The website isn't online so I can't post a link but i wondered if anyone
> had any ideas what might be causing this.
>
> If it's helpful I can post the code.
>
> TIA
>
> Ed
> __
> 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-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] Background image on body appears to be in viewport or HTML

[Eric]

Interesting Chris. I'v always styled the  with margins, positioning,
sometimes padding...etc and it always has an effect.

Rachel, Tim will need to give his element a position of absolute, relative (and
maybe fixed but I'm sure about that one) for z-index to kick in.
Eric


> On February 9, 2014 at 2:54 PM Chris Rockwell  wrote:
>
>
> oThis has never come up for me, so I can't explain (yet) why this happens,
> but it appears, at least in Chrome, that some style attributes don't honor
> widths, margins, [and other things I don't know of] of the body element.
>
> The reason this has never come up for me, is that I would always use a
> wrapper of sorts so that styling of the body element was not necessary:
>
> 
>  
> 
> 
>
>
> On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson  wrote:
>
> > I've been playing around with a few menu design ideas, and mocked up a
> > site to try them out. The menus are OK as far as they go, but I'm having
> > trouble with a background image.
> >
> > I have been trying to set up a background image in the  (or in  > class='plain'>), but when I do so it appears outside the body, as if it
> > were attached to the viewport or perhaps the HTML. If I move the background
> > image to appear in the  there's no problem. I've tried several
> > variants without success.
> >
> > CSS is like this:
> > body {
> > background-color: #FFF;
> > background-image: url(../img/clouds_3677.jpg);
> > background-repeat: no-repeat;
> > margin: 0 auto;
> > width: 100%;
> > max-width: 900px;
> > padding: 0;
> > }
> >
> > body.plain {
> > max-width: 900px;
> > border: 0;
> > border: 1px dashed red; /*(temporary)*/
> > border-radius: 5px;
> > }
> >
> > div#outer {
> > /* background-color: #DFEFFF; */
> > width: 100%;
> > margin: 0 auto;
> > padding: 0.25em 0.25em;
> > padding: 0;
> > }
> >
> > /* HEADER */
> > header#banner {
> > /* when the background image is set here, all is well */
> > /* background-color: #FFF;
> > background-image: url(../img/clouds_3677.jpg);
> > background-repeat: no-repeat;*/
> > margin-bottom: 1em;
> > width: 100%;
> > float: left;
> > }
> >
> > I can live with the background being in the  if necessary, but I
> > would like to know why it doesn't work correctly in the . I suspect
> > it may be very simple, but I can no longer see the wood for the trees. Any
> > suggestions, please ?
> >
> > It can be seen at http://www.webadit.co.uk/newhmi
> >
> > Tim Dawson
> >
> > --
> > Tim Dawson
> > Maolbhuidhe
> > Fionnphort
> > Isle of Mull PA66 6BP
> >
> > 01681 700718
> > __
> > 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/
> >
>
>
>
> --
> Chris Rockwell
> __
> 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-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?

[Eric]

I agree with Colin...I don't like them either.
But, they do remain in HTML5
 <http://html5doctor.com/i-b-em-strong-element/>

Eric
> On February 15, 2014 at 5: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/
__
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] child width exceeding parents' ?!

[Eric]

Just to be the contrarian that my family and friends often say I am...Let me add
this to the thread:

It's been a long while since I've even thought about the convoluted math that
needs to be done when using the counter-intuitive W3C box model. These days I
just add this to the top of all my stylesheets and off I go -

* { -moz-box-sizing: border-box;
 box-sizing: border-box; }

A few years ago I read some place that the W3C box model came down to a decision
by a single member. I don't know if that's true or not but I'd like to get some
history on the topic.

Eric

> On March 9, 2014 at 7:59 PM Georg  wrote:
>
>
> Den 10.03.2014 00:32, skrev Philippe Wittenbergh:
> > The box model John. Adding the padding makes the box wider.
>
> Same thing with the border. The 1px border on that image makes it 2px
> wider and taller than 100%.
>
> regards
> Georg
>
> __
> 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-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] Google font use

[Eric]

Tom,

You're not using the strong tag for styling are you?

> On March 27, 2014 at 12:34 PM Tom Livingston  wrote:
>
>
> I was doing this simple test with google fonts (via @import method).
>
> body{
> font-family: $roboto;
> }
>
> .bold{
> font-weight: 500;
> }
>
> Hi there bolded text
> I'm bold
>
> The strong tag above was rendering wrong in FF and Chrome. FF was
> 'double-bolding' the text, and Chrome showed odd char spacing.
>
> Am I implementing something wrong, or do I need to write rules like
> strong{font-weight:500;font-style:normal;} to have this work right?
>
> Thanks in advance.
>
>
> --
>
> 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/
__
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] Google font use

[Eric]

Yes, I realize that. I was just checking to see if a different CSS approach
might be used.

> On March 27, 2014 at 2:53 PM Philip Taylor  wrote:
>
>
>
>
> Eric wrote:
>
> > You're not using the strong tag for styling are you?
>
> I very much suspect that the browser neither knows nor cares
> why any particular tag has been used, Eric; it almost certainly
> renders the tagged element identically, regardless of the
> motivation for the tag's use.
>
> 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/
__
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] Google font use

[Eric]

This (small font families...few included weights) and the fact that the bulk of
the Yahoo Fonts are not the highest quality is the reason I moved to Typekit.
Personally I'll do anything to avoid a UA's faux bold and italic rendering.

If you need to use Google Fonts there are a couple of good articles that add to
the topic"

On Smashing
<http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/>
and
ALA <http://alistapart.com/article/say-no-to-faux-bold>

An interesting article on efficient use of web fonts
"Web Fonts and the Critical Path"
<http://ianfeather.co.uk/web-fonts-and-the-critical-path/>

Hope this helps a git,
Eric


> On March 27, 2014 at 3:23 PM David Hucklesby  wrote:
>
>
> On 3/27/14, 9:34 AM, Tom Livingston wrote:
> > I was doing this simple test with google fonts (via @import method).
> >
> > body{
> > font-family: $roboto;
> > }
> >
> > .bold{
> > font-weight: 500;
> > }
> >
> > Hi there bolded text
> > I'm bold
> >
> > The strong tag above was rendering wrong in FF and Chrome. FF was
> > 'double-bolding' the text, and Chrome showed odd char spacing.
> >
> [...]
>
> Does this address your problem? -
>
> <http://css-tricks.com/watch-your-font-weight/>
>
> --
> Cordially,
> David
>
>
> __
> 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-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] Firefox and page inflation

[Eric]

Could you please post a URL to an example?

Thanks
> On April 4, 2014 at 6:01 PM "Davies, Elizabeth" 
> wrote:
>
>
> Looking for insight into (and potential correction to) the latest Firefox
> browsers inflating the overall size/resolution of webpages. We use a mobile
> first responsive upwards, and in the newest Firefox browsers, what is a
> reasonable font size in every other browser becomes ludicrously large in
> Firefox on high resolution monitors. From what I'm seeing on the dev pages,
> this is intentional for sites that do not use large font sizing (most) at the
> high resolutions. But we are doing so in our newest sites.
>
> I'd rather not deliver FF specific font sizing, but will if I must. Any ideas?
> Fixes? Things to avoid?
>
> ELIZABETH DAVIES
> Input | Intellection | Learner | Achiever | Belief
>
>
> All information in this message is confidential and may be legally privileged.
> Only intended recipients are authorized to use it.
>
>
> __
> 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-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] Firefox and page inflation

[Eric]

Tom,

Setting the root element's font-size to 62.5% results in a REM unit being equal
to 10px assuming that the users UAr default font-size is set to 16px which what
overwhelming majority of browsers in the wild are set to. Some folks prefer to
do it this way because it's easy to think in base 10. Also, by setting the root
element's font-size using a percentage allows the user to change the UA's
default size while retaining a design build using the REM unit.

As for the OP's question. I don't see what Elizabeth describes in Mozilla
Nightly (still need to try in on FF). The diffs I did see between Nightly and
Chrome are minor and appear to be due to the usual diffs in UA font rendering
engines.

Eric

> On April 7, 2014 at 10:41 AM Tom Livingston  wrote:
>
>
> On Mon, Apr 7, 2014 at 10:30 AM, Davies, Elizabeth
>  wrote:
> > I've not used PX sizing for well over a decade. We did recently change to
> > using REM's off of a % on the HTML.
> >
> > The site in question uses a % on the HTML and REM's on the typography with
> > PX in a legacy IE-only (for those that don't support REM). I can't post an
> > URL as its internal, but it uses similar base to
> > http://www.gallupstrengthsfinder.com (except the GSC site cascades PX to
> > REM's instead of having a separate conditional, the internal site has them
> > separated out with a conditional.)
> >
> > html { font-family: Arial, Helvetica, sans-serif;
> > font-size: 62.5%;
> > -ms-text-size-adjust: 100%;
> > -webkit-text-size-adjust: 100%;
> > }
> >
> > P (etc etc) {
> > font-size: 1.6rem;
> > line-height: 1.5;
> > }
> >
> > ELIZABETH DAVIES
> > Input | Intellection | Learner | Achiever | Belief
> >
>
>
> I'm sure Felix can give an in depth explanation as to what's
> happening, but I have to ask...
>
> What's your reasoning for using 62.5% on the HTML element, then sizing
> body copy back UP with 1.6 rems? What is accomplished over 100% on
> HTML and 1rem on body copy? Did you try this to see if FF behaves
> better?
>
> As I said, Felix can give far more knowledge on this than I can, but
> to my eye, you are working harder to achieve the same thing and 100%
> on the HTML respects a users default browser settings.
>
>
> --
>
> 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/
__
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] Firefox and page inflation

[Eric]

Hello Elizabeth,

I tested again this time using FF28 latest Chrome, Canary and IE10 (will boot
Win7 later to check IE11). The results are the same - the only diffs I see are
due to font rendering as far as I can tell.

Based on the material the Philippe posted there may be an issue when using a
higher density monitor which I don't have access to (unless I try it on my
wife's iPad...when she's not playing WwF that is).

However, keep in mind that high density displays are still a tiny fraction of
what's being used in the wild. For a little while that is...until 4K takes off.

Eric
> On April 7, 2014 at 4:41 PM "Davies, Elizabeth" 
> wrote:
>
>
> Tom sent me some screenshots and is also not seeing the effect on a Mac. I
> checked around on our in house Macs, and this appears to be a Windows OS with
> Firefox effect. What we're seeing is an overall inflation of the entire page
> (not just font size). Where on a 1920 resolution screen, Firefox is behaving
> as if it's at 1280 and using that media query break point instead of
> continuing on to the higher one. For the same container, Firebug shows a
> computed width of 1505px / Chrome tools shows a computed width of 1905px on
> the exact same screen (1920X1080 screen resolution on the device).
>
> I hugely appreciate the feedback. It's brought to light that it's not just my
> sites, but also the old ones as well as every single web site I've visited on
> Windows high resolution with Firefox past version 28. I would love to say its
> only inside this building, but my home computer has the same results. I'm
> going to chalk it up to a hardware/browser combo issue and move on. For those
> that can't see the inflation:
>
> Chrome: http://i59.tinypic.com/rwnfc6.png
> Firefox: http://i60.tinypic.com/200cs2d.png
>
> @Eric: You are correct, the 62.5% is done for the base10 standardization as
> this section of the stylesheet is used by non-CSS developers who will simply
> use PX measurements if it requires any math. I get better compliance and less
> downstream cludge by making it so.
>
> @Felix: The CSS on the Gallup sites are under my control (at launch anyway -
> after that it escapes until a major evolution/redesign. That site is a first
> crack at mobile first and is about half the size of the previous traditional
> desktop first stylesheet. It contains about 1/3 of the typographic fiddling
> than previously (and has already begun to bloat). The bulk of the weight on
> that particular stylesheet is in the private pages where there are extremely
> complex dashboard layouts and wizards.
>
> ELIZABETH DAVIES
> Input | Intellection | Learner | Achiever | Belief
>
>
>
> All information in this message is confidential and may be legally privileged.
> Only intended recipients are authorized to use it.
>
>
> __
> 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-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] Firefox and page inflation

[Eric]

Mickey,

I've tested on Win8 and reported my findings. I'll test later on Win7, but I
seriously doubt there will be a diff. Especially on my standard density
1920x1080 screen.

Eric
> On April 7, 2014 at 8:59 PM Micky Hulse  wrote:
>
>
> On Mon, Apr 7, 2014 at 1:41 PM, Davies, Elizabeth
>  wrote:
> > Tom sent me some screenshots and is also not seeing the effect on a Mac. I
> > checked around on our in house Macs, and this appears to be a Windows OS
> > with Firefox effect. What we're seeing is an overall inflation of the entire
> > page (not just font size). Where on a 1920 resolution screen, Firefox is
> > behaving as if it's at 1280 and using that media query break point instead
> > of continuing on to the higher one. For the same container, Firebug shows a
> > computed width of 1505px / Chrome tools shows a computed width of 1905px on
> > the exact same screen (1920X1080 screen resolution on the device).
>
> Ok, so, to clarify:
>
> The problem can be reproduced using Firefox > 28 (but what version of
> Windows)?
>
> The demo page is here:
>
> <https://www.gallupstrengthscenter.com/>
>
> With that said, here are some screen shots:
>
> 1. Chrome 33, Mavericks OS X:
>
> <https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/chrome-33-mavericks.png>
>
> 2. Firefox 28, Mavericks OS X:
>
> <https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-28-mavericks.png>
>
> 3. Firefox 29, Beta, via Browserstack emulation:
>
> <https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-29.0-beta.png>
>
> 4. Firefox 30.0, Aurora, via Browserstack:
>
> <https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-30.0-aurora.png>
>
> Maybe it's just me, but the above screens appear to show the same size
> in terms of overall scale, no?
>
> One thing to note: Firefox 29 is marked as "Beta" via Browserstack. I
> wonder if this problem will go away when it's officially released?
>
> I'm personally interested in this issue because I subscribe to the
> same font sizing technique(s) ... It would be nice to know how to best
> reproduce this problem. Maybe I need to preview your site using a high
> PPI monitor?
>
> Let me know if you want more screens from Browserstack.
> __
> 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-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] Font-Sizes - Golden Rule ?

[Eric]

Not not correct - The value of a REM is taken from the font-size of the root
element...thus the HTML element, not the BODY element.


> On April 9, 2014 at 12:05 PM Shari  wrote:
>
>
> If you use rem's it stays consistent from the body tag... correct?
>
> Shari
> __
> 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-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] Font-Sizes - Golden Rule ?

[Eric]

Opps, forgot to add this:

Yes, if you use REM the value will stay consistent with the value of font-size
set on root element. If you use a percentage for the root element's font-size
your other font-sizes will vary depending on the browser's default font size
setting...Some have no problem with that, others do.

> On April 9, 2014 at 12:05 PM Shari  wrote:
>
>
> If you use rem's it stays consistent from the body tag... correct?
>
> Shari
> __
> 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-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] Ready for Pre-processors?

[Eric]

I'll raise my hand and say I'm against it. Not because I have a problem with CSS
pre-processors rather because this is a CSS list. Pre-processors are simply a
tool used to write CSS in a more programmatic way and then 'compile' it CSS for
use by the UA.

I just think it would be a thick layer of static on this list.

Just my US$0.02 worth.

Eric

> On April 24, 2014 at 11:46 AM "Andrew C. Johnston" 
> wrote:
>
>
> Hello All:
>
> I have been a bit busy and haven't been keeping up, how does the list feel
> about discussions involving LESS, SASS and SCSS? I have a Sass project where I
> have to make some changes and feel a little lost.
>
> Not sure if I would have any specific question to ask here, but is the list
> open to these technologies as well?
>
> Cheers!
>
> __
> 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-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] Pre-processor discussion

[Eric]

Andrew,

I'm not following what you mean by this -

"Why can't there be a code for all browsers, to do something like transparency
or rounded corners."

Are you talking about something outside of CSS? Something else maybe?

Eric

> On April 28, 2014 at 3:52 AM "Andrew C. Johnston" 
> wrote:
>
>
> Nice to see some thoughtful replies. Under the circumstances, I don't want to
> be the one to push this issue and start a holy war.
>
> I do wonder if CSS itself could at least potentially come to make the
> pre-processors obsolete. Why can't there be a code for all browsers, to do
> something like transparency or rounded corners. But I don't know if that is
> possible.
>
> Anyway, nice discussion, thanks!
>
> Andrew
> __
> 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-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] IE 10 issue

[Eric]

I don't think running IE 9, 10 or 11 is a good idea right now until they fix the
new security bug issue that was announced

Here's a short article about it
<http://gizmodo.com/new-vulnerability-found-in-every-single-version-of-inte-1568383903?utm_campaign=socialflow_gizmodo_facebook&utm_source=gizmodo_facebook&utm_medium=socialflow>

Eric

> On April 28, 2014 at 2:01 PM Russ Peters  wrote:
>
>
>
> Have an issue with the fieldset not expanding to contain the radgrid. It is
> working as expected in Chrome, but I need it to work in IE. Any suggestions?
> I'm also not able to get rounded corners on the fieldset in IE.
>
> CSS:
> fieldset{margin-bottom: 10px;width: 65%;
> border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;-ms-border-radius:5px
> }
> fieldset legend{padding: 0 2px;font-weight: bold;}
> fieldset ul{border: 0;margin: 0;padding: 0;}
> fieldset li{list-style: none;padding: 2px;}
> fieldset label{width: 150px;display: inline-block;line-height:
> 1.8;vertical-align: top;}
>
> http://www2.redcanoecu.com/fieldsetissue.gif
> This electronic mail message and attachments (if any) are confidential and
> legally privileged. The information is intended solely for the addressee(s).
> If you have received this email in error, please contact the sender and delete
> all copies of it. Any unauthorized use or disclosure may be unlawful.
> __
> 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-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] IE 10 issue

[Eric]

While my message mI am a big fan of IE11ay be a bit off-topic it was a sincere
effort to keep everyone here safe. And, by the way I'm a big fan of IE11.

I would be happy to take a look at Russ' code but I won't be testing it for now.

Eric


> On April 28, 2014 at 3:26 PM MiB  wrote:
>
>
>
> apr 27 2014 20:12 Eric :
>
> > I don't think running IE 9, 10 or 11 is a good idea right now until they fix
> > the
> > new security bug issue that was announced
> >
> > Here's a short article about it
> > <http://gizmodo.com/new-vulnerability-found-in-every-single-version-of-inte-1568383903?utm_campaign=socialflow_gizmodo_facebook&utm_source=gizmodo_facebook&utm_medium=socialflow>
> >
> > Eric
>
> Please don’t get off topic. This is a list about CSS, not about browser
> security.
> __
> 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-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] IE 10 issue

[Eric]

Sorry something got cropped

It should have read -

While my message may be a bit off-topic it was a sincere
effort to keep everyone here safe. And, by the way I'm a big fan of IE11.

> On April 28, 2014 at 6:14 PM Eric  wrote:
>
>
> While my message mI am a big fan of IE11ay be a bit off-topic it was a sincere
> effort to keep everyone here safe. And, by the way I'm a big fan of IE11.
>
> I would be happy to take a look at Russ' code but I won't be testing it for
> now.
>
> Eric
>
>
> > On April 28, 2014 at 3:26 PM MiB  wrote:
> >
> >
> >
> > apr 27 2014 20:12 Eric :
> >
> > > I don't think running IE 9, 10 or 11 is a good idea right now until they
> > > fix
> > > the
> > > new security bug issue that was announced
> > >
> > > Here's a short article about it
> > > <http://gizmodo.com/new-vulnerability-found-in-every-single-version-of-inte-1568383903?utm_campaign=socialflow_gizmodo_facebook&utm_source=gizmodo_facebook&utm_medium=socialflow>
> > >
> > > Eric
> >
> > Please don’t get off topic. This is a list about CSS, not about browser
> > security.
> > __
> > 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-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-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] font-variant:small-caps;

[Eric]

Is that first letter more 'bold' or is it actually a bit larger?

Is that first letter a cap in the HTML? If so this is normal...Since there is no
Arial SC the UA is transforming the lowercase letters to uppercase and then
shrinking them a bit.

HTH

> On June 12, 2014 at 5:42 PM Richard Wendrock Forum
>  wrote:
>
>
> It appears there is an optical illusion when using font-variant:small-caps;
>
>
>
> The first letter of each word appears more bold than the other letters in
> the word.
>
>
>
> .fonttext23 {
>
> font-size: medium;
>
> font-family:Arial;
>
> text-align:left;
>
> font-variant:small-caps;
>
> font-weight:bold;
>
> }
>
>
>
> I cannot find a way to make all letters uppercase and have the same bold
> weight.
>
>
>
> Can you solve this problem?
>
>
>
>
>
>
>
>
>
>
>
> __
> 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-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] W3C errors. in application....

[Eric]

Technically the error was thrown correctly:

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element

http://html5doctor.com/the-section-element/

Eric

> On July 9, 2014 at 8:32 AM Nancy Johnson  wrote:
>
>
> I do application development and the W3C throws an error:
>
> 1 with an Accessible counter I pulled off the web, that goes with a textarea
> box
> name="" is used with span or div
>  class="fontsize085"> 2000
>
> The back-end developer used rid='1' with a datepicker
> 

Re: [css-d] why are ems rendering large?

[Eric]

Yep this is what I have done for a long time.

The support for the REM unit is now pretty much universal in modern UAs, except
for bugs (one of which I found and reported on pre-IE11). And, in that case the
REM unit was only being ignored for font-size.

If you have to support ancient UAs than use a fixed value fallback or an EM if
you don't mind the hassle that imposes. But, of course that raises the question
why support ancient UAs when their usage is so low these days? :-)


> On July 25, 2014 at 7:39 AM Tom Livingston  wrote:
>
>
> Lack of rem support is easily taken care of with a fallback declaration
> using px:
>
> Font-size:16px;
> Font-size:1rem;
>
> This allows MOST browsers to use a relative font unit - honoring a users
> preference for font size - without the compounding issues (and any
> other) of the em.
>
>
>
> --
>
> 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/
__
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] SVG background-image with fallback

[Eric]

I realize that this thread has gone off in other direction but I have a question
-

Given that SVG is support universally except for very ancient UAs (IE8 is south
of 5% now) why bother with a fallback image? Why not just give them a
background-color?

Seems like a whole lot of wasted work for a drop int he bucket of users.

Eric

> On August 5, 2014 at 9:00 AM Tom Livingston  wrote:
>
>
> List,
>
> I was having a discussion in the comments of an article about using
> svg as a background-image in CSS, and using a png as fallback. I was
> writing it like this:
>
> background-image: image.png;
> background-image: image.svg;
>
> But this fails in IE8 (and presumably in other non-svg-supporting browsers).
>
> My thought was that it would work like background-color does.
>
> Sample page:
> http://tomliv.com/nick-test/
>
> Just trying to learn here. Why does the cascade not work in both cases?
>
> --
>
> 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/
__
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] SVG background-image with fallback

[Eric]

Hope they've seen the MS press release about EOLing IE 8 in about 18 months ;-)

Eric

http://www.zdnet.com/microsoft-to-drop-support-for-older-versions-of-internet-explorer-732437/?s_cid=e589&ttag=e589&ftag=TREc64629f

> On August 7, 2014 at 7:00 PM Tom Livingston  wrote:
>
>
> Our clients still use IE8. I think all most all of them. That's the
> only reason that matters to my superiors, or my clients.
>
__
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] rem units and %

[Eric]

Did you read on this list that the REM unit is only for type? - It's a relative
unit like any other relative unit. I use it for everything except element widths
(they get %s) and line-height that should be unitless.

There are some strange "rules of thumb" floating around out thereTake a look
at the spec:
http://www.w3.org/TR/css3-values/#rem-unit


> On September 16, 2014 at 5:11 PM John  wrote:
>
>
> If rem units are for font size and margins and padding get % values, does it
> get fairly hairy knowing what % you need for your margin/padding? Always of
> the parent, of course, but what if you have an ul in your sidebar and another
> in a main content div, which is much wider than the sidebar..
>
> I guess through the use of descendent selectors, you dial in on the correct %
> value for each instance?
>
> am I making this out to be more difficult than it really is?
>
> Thank you!
>
> John
> __
> 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-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] custom fonts not working in Chrome

[Eric]

Arno,
 
You need to load more than just .TTF files. Take a look at this page from CSS
Tricks it's more up to date.
 
Eric
 
http://css-tricks.com/snippets/css/using-font-face/
 

> On October 7, 2014 at 7:28 AM "Stuff @ arnoenzerink.com"
>  wrote:
>
>
> Hi list,
>
> I made a new website in which I used custom fonts.
> It works in Firefox, Opera and IE, but in Chrome the fonts default to
> the standard webfont.
>
> Not sure if I'm missing something.
>
> Website: http://www.reconnectdiscover.com
> CSS: http://www.reconnectdiscover.com/css/styles.css
>
> Any pointers would be greatly appreciated!
>
> Arno
> __
> 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-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] Flex box help

[Eric]

Darren,
 
I've been working with flex-box for some time now. It does take a bit of
re-thinking how layout works.

flex-basis is the sub-property you'll need for this issue -
http://css-tricks.com/almanac/properties/f/flex-basis/
 
Solved By Flexbox
<http://philipwalton.github.io/solved-by-flexbox/?utm_source=Responsive+Design+Weekly&utm_campaign=ff809ca1ec-Responsive_Design_Weekly_125&utm_medium=email&utm_term=0_df65b6d7c8-ff809ca1ec-58974505&goal=0_df65b6d7c8-ff809ca1ec-58974505>
Some commonly used layouts translated to flex-box
 
Hope those help, I have a lot more if you need them. Just keep practicing, it'll
click with you soon.
 
Eric

> On October 9, 2014 at 1:10 PM Darren Brierton 
> wrote:
>
>
> Thanks for replying Chris. My answers are below:
>
> On 9 Oct 2014, at 18:59, Chris Rockwell  wrote:
>
> > >> (Does anyone have the faintest idea what I'm talking about? ;-)
> > I'm not sure I follow, actually. Are you only talking about the 3rd column,
> > #external? What do you expect to happen when the width of the container
> > forces the li to break to another line?
>
> Yes, I was mostly talking about the 3rd column.
>
> What I was hoping for was that the width of the li would be just wide enough
> to accommodate the wrapped line and no longer, and that as the parent
> container has justify-content: flex-end, that everything would scoot over to
> the right so that final word of the line before the wrap would still be flush
> against the right edge of the footer.
>
> It looks to me that the width of the li is determined by the point at which
> the line wrap is forced, as opposed to the wrapped content.
>
> I understand what the designer is hoping for: that, whether there is
> word-wrapping or not, in the third column the last character of the longest
> line should be flush against the right edge. Maybe it is not possible.
>
>
> > >> Lastly, does anyone know a really good explanation of the properties
> > >> flex-grow and flex-shrink?
> > Have you seen http://css-tricks.com/snippets/css/a-guide-to-flexbox/?
>
>
> Yes, I have, thanks. It's pretty good, but I still don't feel I have a full
> grasp of how flex-grow and flex-shrink (especially the latter) work.
>
>
>
> >
> > Chris Rockwell
> >
> > On Thu, Oct 9, 2014 at 12:27 PM, Darren Brierton 
> > wrote:
> > Hello
> >
> > I've been trying to familiarise myself with the new Flexible Box Layout
> > stuff now recent browser support is getting good. I thought I would start
> > with a layout I am often asked to do (or some variant):
> >
> > - A footer with three columns, the 1st flush against the left edge of the
> > footer, the 2nd exactly centred in the footer, and the 3rd flush with the
> > right edge of the footer. The complication being that the 2nd and 3rd
> > columns have content that should be left aligned and that may be quite short
> > in length, typically a series of links. The easiest way to explain is if you
> > look at this JSFiddle
> >
> > http://jsfiddle.net/3eajh33k/embedded/result/
> >
> > at a window width of around 1200px. Note that the last li in the 3rd column
> > ("SISTER COMPANY WITH A LONG NAME") is flush against the right edge of the
> > footer, and that in the 2nd column if you were to imagine a left border on
> > the ul it would be exactly in the centre of the footer.
> >
> > My problem is that if I reduce the window size until the final li in the 3rd
> > column wraps I no longer have the layout I want.
> >
> > I'm not sure at that point how the content width of the li is being
> > calculated. I thought it still would have a width equivalent to "auto", i.e
> > just wide enough to contain its content and no wider. That way the last
> > character of the line would still be flush against the right edge of the
> > footer. Clearly that is not the case.
> >
> > You can see the JSfiddle with source here:
> >
> > http://jsfiddle.net/3eajh33k/
> >
> > Does anyone have any suggestions? (Does anyone have the faintest idea what
> > I'm talking about? ;-)
> >
> > Lastly, does anyone know a really good explanation of the properties
> > flex-grow and flex-shrink? The explanation at both
> >
> > http://www.w3.org/TR/css3-flexbox/
> >
> > and
> >
> > https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
> >
> > is far from clear to me. I understand that the value specifies how much the
> > box can shrink or grow, but other than that I have no idea what exactly is
> > calcu

Re: [css-d] Styling a menu

[Eric]

Peredur,
 
I looks like this is a university's directory page/site.

If so:
university = younger people
younger people = modern browsers
 
So, if this were my page I'd use flexbox and make life easy and lighten the code

Flexbox on caniuse.com <http://caniuse.com/#feat=flexbox>
 
Just my US$0.02 worth
 
Eric

> On October 15, 2014 at 1:04 PM Peredur  wrote:
>
>
> I imagine that this will turn out to be a very simple question, but
> never one to avoid displaying my own ignorance, here goes...
>
> I'm trying to create a layout for a website that is in dire need of
> attention and this (URL below) is a mockup of something approaching what
> I'm aiming for:
>
> http://peredur.net/unidirectory/
>
> The only thing that I really don't like about it is that the navigation
> menu is over to the left and so looks a bit odd. In the tutorial from
> which I got most of the code (http://demo.ourtuts.com/menu/), the menu
> is centered, but I'd rather not do that if I don't have to - especially
> as it would mean, I think, giving the menu a fixed width, which I'm not
> keen on doing as it might mess up the display on mobile devices.
>
> What I think I'd prefer to do is to put a full-width background the same
> width as the #wrapper div and the same height as the menu, and the same
> colour as the footer background, behind the menu. As yet, though, I've
> failed to find a way to do that.
>
> I imagine that the problem is because the menu is floated and so any
> block element I put around it has no height, but I've no idea what to do
> to get around this. Giving a surrounding div a height does not seem an
> option since it would have to correspond to something like 20px plus the
> height of the box containing the menu item text and I'm not sure how to
> do that - or if it would even work.
>
> Thanks in advance
>
>
>
> Peter
> --
> *Peter Bradley*
> peredur.net <http://www.peredur.net>
> __
> 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-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] Why is child wider than parent?

[Eric]

"Darn box model!"

Well, the box model isn't set in stone you know.

> On November 6, 2014 at 5:43 PM Angela French  wrote:
>
>
> Darn box model!
>
> Thanks.
>
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
> Sent: Thursday, November 06, 2014 2:40 PM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Why is child wider than parent?
>
> You have...
> #band {padding-right:20px; width:100%;}
> ...which makes the band 20px wider than its parent.
>
> regards
> Georg
>
> __
> 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-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-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] Responsive Images

[Eric]

That's right David. If you have:
 
img {max-width: 100%;
 
The image will not exceed the width of its parent.
 
Eric

> On November 6, 2014 at 11:42 AM David Hucklesby  wrote:
>
>
> On 11/5/14, 9:22 PM, Felix Miata wrote:
> > Crest Christopher composed on 2014-11-05 23:45 (UTC-0500):
> >
> >> If I want to use images on a responsive site, the images should be in
> >> the largest size possible then set the style to {max-width:100%} ? If
> >> they are not the largest size possible and the page is viewed at 1700px
> >> by 1450px (fictional resolution, I didn't verify if it is a logical
> >> resolution) then the obvious result will be a stretched, blurred
> >> image(s) due to interpolation, correct ?
> >
> > It may or may not appear "stretched" and/or "blurry", depending on a myriad
> > of factors that include physical display size, viewing distance, OS/DE
> > settings and viewer acuity. It may appear "streched" or "blurry", but in
> > practical effect it won't necessarily appear to the visitor's eye any worse
> > than being too small. Either way, too small for detail to be discernable, or
> > over-enlarged and blurry, is similarly less than satisfactory.
> >
> > If you don't limit its size to some arbitrary px value (actual physical
> > display resolution available at retail is up to at least 5120x2880 now[1]),
> > at least you retain the possibility of the relative placement and size of
> > the
> > image within your layout, and possibly the layout itself, being preserved.
> >
> > [1] http://support.apple.com/en-us/HT5266
> >
>
>
> It’s not unlikely I am wet behind the ears, but I thought max-width simply
> prevented the image from expanding to its natural size in smaller containers.
> AFAIK the image will not stretch.
>
> Correct me if I am wrong.
>
> --
> Cordially,
> David
> __
> 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-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] Numbered lists with unique numbers per line

[Eric]

Have you tried CSS counters...might just work for you.
 
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
 
http://caniuse.com/#search=counter

> On November 28, 2014 at 11:06 AM Øyvind Teig  wrote:
>
>
> Hi!
>
> I'd like this list http://www.teigfam.net/oyvind/home/technology/ to look like
> this:
>
> 092 Not so blocking after all (and a conditional admission)
> 091 To reset a plane
> 090 Atomic for all?
> Go-style concurrency (at embedded.TRD 26March2014)
> 084 CSP on Node.js and ClojureScript by JavaScript
> 081 Rich interface component modeling
> 079 WYSIWYG semantics
> 078 HTML5 and concurrency
> rtx-51 (1988) and JavaScript(?)
> 077 A reactive manifest
>
> I have tried something at the bottom of that page, but the line margin is too
> large between the individual lists:
>
> 
>  href="http://www.teigfam.net/oyvind/home/technology/092-not-so-blocking-after-all/";
> target="_blank">Not so blocking after all (and a conditional
> admission)
> 
> 
>  href="http://www.teigfam.net/oyvind/home/technology/091-to-reset-a-plane/";>To
> reset a plane
> 
>
> Ideally I'd even like leading zeros and empty space..
>
> I have got help from this list before. It's at
> http://www.teigfam.net/oyvind/home/technology/061-wordpress/
>
> Øyvind TEIG
> Aclassifier
> Trondheim, Norway
> http://www.teigfam.net/oyvind/home
>
> __
> 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-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] Rotating along Z

[Eric]

Check this one out, it helped me understand how it works...

http://thewebrocks.com/demos/3D-css-tester/

> On November 28, 2014 at 1:40 AM Crest Christopher 
> wrote:
>
>
> I need some help, why this  doesn't
> rotate along the Z, I know it's flat but instead it's rotating along the
> Y instead of the Z, which should give the appearance it's shrinking ?
>
> Christopher
> __
> 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-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] I'd like to do something impossible

[eric]

Hi,

I think you should have a look at this :

http://meyerweb.com/eric/css/edge/slantastic/demo.html

Regards,

Éric Vesque

Theresa Mesa a écrit :
> Sorry - very late.
> 
>>> http://mdh-test.com/compTextWrap.png
> 
> 
>>>> Can you mock it up in photoshop and post the image? It would be
>>>> easier to
>>>> envision what you are trying to achieve.
>>>>
>>>> Russ
>>>>
>>>> - Original Message -
>>>> From: "Theresa Mesa" 
>>>> To: "css-d Group" 
>>>> Sent: Monday, September 28, 2009 7:59 PM
>>>> Subject: [css-d] I'd like to do something impossible
>>>>
>>>>
>>>>> http://mdh-test.com/PV_web/index.shtml
>>>>> http://mdh-test.com/PV_web/pvg.css
>>>>>
>>>>> I know, I'm thinking like a print person, but here you go:
>>>>>
>>>>> I want to take that circuit board image and pull it out about half
>>>>> its
>>>>> width into the right side, and have the text wrap around the edge
>>>>> that's left in the content div. In other words, half the photo is  
>>>>> in
>>>>> the text with the text wrapping around it (10px padding), and half
>>>>> the
>>>>> photo is to the right, in the white area. I've been playing around
>>>>> with negative margins and absolute positioning, and as expected,  
>>>>> it's
>>>>> not working.
>>>>>
>>>>> I know CSS is powerful, but is it this powerful? My client hates  
>>>>> boxy
>>>>> - he wants more of an organic flow. If it can't be done, it can't  
>>>>> be
>>>>> done, but I sure would like to try - AND have it work across most
>>>>> browsers.
>>>>>
>>>>> Impossible? Can anyone help me? Please?
>>>>>
>>>>> Theresa
>>>>>
> 
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 



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

Re: [css-d] floating right class not going all the way to the right

[eric]

Stuart King a écrit :
> Hi CSS-Der's:
> 
> 
> URL:
> http://www.clarksburgwineco.com/pages/contact.html
> 
> floating right class not going all the way to the right (.mc_66r). I am
> trying to get it to line up with the right edge of the page, justified with
> the footer.
> 
> help!
> 
> thanks
> 
> --Stuart

Hi Suart,

If you make your div# "container" begin after your div# "header" and just 
before 
your div# "mainContent", it should work as expected.

Regards,

Éric Vesque



__
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] Using CSS to customise an image in a Typepad theme

[eric]

Le 22/11/2010 10:58, Seamus McCauley a écrit :

Hi, I'd be grateful if someone could help me out with this one. I'm using the
Typepad theme Journal (http://qurl.com/s42g5) on my blog at
http://www.virtualeconomics.co.uk. I've just started using CSS to customise this
theme - taking off the indent, changing the font, very basic stuff (see
http://qurl.com/q2zb3). On every post there's a background image
(http://qurl.com/4dg99) that appears under the title. It seems to be added in
the entry-header h3, but I can't find where in the source code or the stylesheet
the image is coming from so I can't work out how to remove it from posts.
Needless to say, I want rid of it. Any help greatly appreciated. Thanks.
_
Seamus McCauley


Hi Seamus,
You may find it here :
http://static.typepad.com/.shared:v20101118.03-0-g249515c:typepad:en_us/themes/jim/theme-journal.css

.entry-header {
font-size: 2.4em;
line-height: 1.3;
margin: 0 20px 10px;
background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% 
bottom;
padding: 0 0 20px 0;
text-align: center;
}
HTH.

Éric Vesque

__
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] CSS and IE 6

[Eric Heitz]

Having some issues with IE 6 and my latest site layout. I am a newbie when it 
comes to fixing issues with IE and CSS. If anyone can give me some suggestion 
would be great.

Having issues with the image replacement on the l/h nav and the entire center 
and r/h nav content being pushed to the bottom of the page.

Tried the IE bug fix Doubled Float-Margin but don't think I applied it 
correctly. Tried to change the DOCUTYPE but the added a whole list of issues.

Here is where the site is being held at this time: 
http://www.kucia.com/bcs/BC_Surgical_08

Thanks
Eric
__
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] IE 6 Showing Character that should be hidden?

[Eric Heitz]

Under the top nav of the following link IE 6 is placing an <S> type 
character?

Can anyone give me a hint on why?

Link: http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html

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

Re: [css-d] IE 6 Showing Character that should be hidden?

[Eric Heitz]

Okay I have it down to one error in the HTML validation.
CSS is valid 2.1.  <-- it feels good when you pass the test.

Removed the comments from the main.css and bcs_insights.css.

Can anyone look at this in IE6?

http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html

Question: Why does the HTML validation not like the <embed> mark-up that 
Adobe uses for flash files?

Eric


--- On Fri, 6/6/08, Jukka K. Korpela <[EMAIL PROTECTED]> wrote:
From: Jukka K. Korpela <[EMAIL PROTECTED]>
Subject: Re: [css-d] IE 6 Showing Character that should be hidden?
To: css-d@lists.css-discuss.org
Date: Friday, June 6, 2008, 8:23 AM

Eric Heitz wrote:

> Under the top nav of the following link IE 6 is placing an
&lt;S&gt;
> type character?
>
> Can anyone give me a hint on why?
>
> Link: http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html

I don't use IE 6 any more, but I have a few suggestions:

1) Are you sure this is a CSS problem? That is, does it appear even when 
you switch CSS support off (e.g. by removing all CSS code and references 
from a test copy).

2) Validate the markup. There are 32 markup errors, and some of them 
look like potential causes of rendering problems.

3) Then check the CSS code using the W3C CSS Validator.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/ 

__
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] IE 6 Showing Character that should be hidden?

[Eric Heitz]

Got it.

Updated the css and html file for this link.

When reading the update it talks about elements with display: one applied would 
show.
I used that for my print.css, so I removed it from the HTML and will use it in 
my print.css only.

Need another review of the layout in IE 6 to see if it works.

http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html


Thanks!
Eric

--- On Fri, 6/6/08, Christian Kirchhoff <[EMAIL PROTECTED]> wrote:
From: Christian Kirchhoff <[EMAIL PROTECTED]>
Subject: Re: [css-d] IE 6 Showing Character that should be hidden?
To: css-d@lists.css-discuss.org
Date: Friday, June 6, 2008, 9:14 AM

Unfortunately the character is still there.

It's definitely the "s" from the third menu item
"HJVs". Cause if you 
place "HJVsx" in there, the hideous character turns into an
"x" as well 
(or whatever character you put as the last one in that menu item.

Look at the "Update" section on the page I send you: 
http://www.positioniseverything.net/explorer/dup-characters.html. it 
says that other things can trigger the bug as well.

Best regards,

Christian
*Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza


Eric Heitz schrieb:
> Okay I have it down to one error in the HTML validation.
> CSS is valid 2.1.&nbsp; &lt;-- it feels good when you pass the
test.
>
> Removed the comments from the main.css and bcs_insights.css.
>
> Can anyone look at this in IE6?
>
> http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html
>
> Question: Why does the HTML validation not like the &lt;embed&gt;
mark-up that Adobe uses for flash files?
>
> Eric
>
>
> --- On Fri, 6/6/08, Jukka K. Korpela &lt;[EMAIL PROTECTED]&gt;
wrote:
> From: Jukka K. Korpela &lt;[EMAIL PROTECTED]&gt;
> Subject: Re: [css-d] IE 6 Showing Character that should be hidden?
> To: css-d@lists.css-discuss.org
> Date: Friday, June 6, 2008, 8:23 AM
>
> Eric Heitz wrote:
>
> &gt; Under the top nav of the following link IE 6 is placing an
> &amp;lt;S&amp;gt;
> &gt; type character?
> &gt;
> &gt; Can anyone give me a hint on why?
> &gt;
> &gt; Link: http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html
>
> I don't use IE 6 any more, but I have a few suggestions:
>
> 1) Are you sure this is a CSS problem? That is, does it appear even when 
> you switch CSS support off (e.g. by removing all CSS code and references 
> from a test copy).
>
> 2) Validate the markup. There are 32 markup errors, and some of them 
> look like potential causes of rendering problems.
>
> 3) Then check the CSS code using the W3C CSS Validator.
>
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/ 
>
> __
> 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/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 6 Showing Character that should be hidden?

[Eric Heitz]

I was having an issue with IE throwing my center and right columns down below 
the l/h nav. Would the height not be the initial cause?

Just curious.

Learning as I go along.

Thanks
Eric


--- On Fri, 6/6/08, David Laakso <[EMAIL PROTECTED]> wrote:
From: David Laakso <[EMAIL PROTECTED]>
Subject: Re: [css-d] IE 6 Showing Character that should be hidden?
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Date: Friday, June 6, 2008, 11:31 AM

Eric Heitz wrote:
> Got it.
>
>
> Need another review of the layout in IE 6 to see if it works.
>
> http://www.kucia.com/bcs/BC_Surgical_08/insights/index.html
>
>
>
> Eric
>
>   


It is close enough in IE/6. For those users in IE/6 & IE/7 who ignore 
your frozen-fonts, using pixel line-height is not a good idea. Opera has 
trouble with px line-height, too. A raw number works better (no unit of 
measure). Deleting the height on the below selector will keep the column 
text from shooting out the bottom of the footer when the fonts are 
scaled in compliant browsers.

#leftcolumn {
 /*height: 622px;*/
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 6 Showing Character that should be hidden?

[Eric Heitz]

Barrett,

Plan to set up a virtual IE environment on my mac using VMware Fusion.

My only issue is getting a hold of IE 6. But the tredosoft.com may work.

Thanks!
Eric


--- On Fri, 6/6/08, Barrett <[EMAIL PROTECTED]> wrote:
From: Barrett <[EMAIL PROTECTED]>
Subject: Re: [css-d] IE 6 Showing Character that should be hidden?
To: css-d@lists.css-discuss.org
Date: Friday, June 6, 2008, 1:01 PM

You can get an install of all the old IE's here assuming you have a  
windows box laying around.
I found it recently; works great.
http://tredosoft.com/Multiple_IE

Thanks,
Barrett
AOL/AIM handmadepaperus

On Jun 6, 2008, at 12:52 PM, Sandy wrote:
>
>> Can anyone look at this in IE6?
> Eric, you can check it in IE6 yourself using this free service:
> http://ipinfo.info/netrenderer/index.php
>
> I find it very helpful.
>
> Sandy
>
__
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] IE 6 Showing Character that should be hidden?

[Eric Heitz]

Amazing!

Thank you so much for this site link.

This would have saved tons of times yesterday!

Thanks
Eric

--- On Fri, 6/6/08, Sandy <[EMAIL PROTECTED]> wrote:
From: Sandy <[EMAIL PROTECTED]>
Subject: Re: [css-d] IE 6 Showing Character that should be hidden?
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Date: Friday, June 6, 2008, 12:52 PM

> Can anyone look at this in IE6?
Eric, you can check it in IE6 yourself using this free service:
http://ipinfo.info/netrenderer/index.php

I find it very helpful.

Sandy
__
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] Nav under header in IE 6 - z-index?

[Eric Heitz]

Trying to fix my l/h nav to stack on op of the header above.
I am using negative margins to move the l/h nav up. Works in IE 7 but IE 6 
shows it under the the header. I know this could have been set up different and 
currently brainstorming another way but I would like to fix this issue.

http://www.kucia.com

I started playing with the z-index with no luck and will play with other 
layouts to try and fix.

Any help would be great.

Eric
 
__
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] IE Copy issues and margin shifts

[Eric Heitz]

I have a simple one-page site that looks great in Firefox but of course there 
is a few shifts in IE.
With Safari my  disappears, assuming this is because of my z-index.

I need some help with the ul list and my main intro copy shift at the top.

http://www.kucia.com/erh/SeniorSolutions

Any help would be great.


Thanks
Eric
__
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] ie6 killing my l/h nav

[Eric Heitz]

IE6 is adding more height to my l/h nav and is showing the rest of my sliding 
images.

IE7 is displaying the l/h correctly and is okay on the mac side.

Any thoughts on why IE6 is extending the nav?

beta site here:

http://www.kucia.com/bcs/BCS_08B/insights/index.html

CSS: http://www.kucia.com/bcs/BCS_08B/css/main_new.css


Thanks
Eric
__
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] IE6-7 not seeing margin/height in header...

[Eric Heitz]

Simple one page site that is using a large barkground for my layout. Looks 
great in FF and Safari.
Noticed that IE6-7 is not liking my header height or margin to keep it out of 
the header area. Also applied to the content div.
Tried applying margins to the logo and the header which works but adds a large 
gap in FF and Safari.


Site: http://www.kucia.com/kucia/concentrate/

CSS: http://www.kucia.com/kucia/concentrate/conmain.css

HTML & CSS are valid.

Any thoughts would be great.
Thanks
Eric
__
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] which ie bug is it?

[Eric Cash]

I'm under the gun to convert a page to standards, and I'm using blueprint to
maintain my design.

I'm hitting some weird ie display bugs, and my tricks to stop them aren't
working.

I can't get ie to correctly honor a relative position rule on a text type
input, nor can I get it to nudge it up via a negative margin,
but the really weird part is the div and form in the header seem to have
come OUT of the containing div.  I thought this was a clear problem, used
div {overflow: auto} and no luck... and on the SECOND nav list, ie/Win is
somehow repeating the last character of on a new line... I've never seen
that before.  I can't seem to get firebug lite to work correctly, to inspect
the rules,  anyone be able to help me out here, or at least point me in the
right direction?

Here is the test page:
http://ericcash.dreamhosters.com/outside/mk/opinionsBoard.html

thanks for your help!
__
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] which ie bug is it?

[Eric Cash]

oops, I did something, and now ie is failing to recognize the width property
again

On Wed, Jan 7, 2009 at 3:13 PM, Eric Cash  wrote:

> I'm under the gun to convert a page to standards, and I'm using blueprint
> to maintain my design.
>
> I'm hitting some weird ie display bugs, and my tricks to stop them aren't
> working.
>
> I can't get ie to correctly honor a relative position rule on a text type
> input, nor can I get it to nudge it up via a negative margin,
> but the really weird part is the div and form in the header seem to have
> come OUT of the containing div.  I thought this was a clear problem, used
> div {overflow: auto} and no luck... and on the SECOND nav list, ie/Win is
> somehow repeating the last character of on a new line... I've never seen
> that before.  I can't seem to get firebug lite to work correctly, to inspect
> the rules,  anyone be able to help me out here, or at least point me in the
> right direction?
>
> Here is the test page:
> http://ericcash.dreamhosters.com/outside/mk/opinionsBoard.html
>
> thanks for your help!
>
__
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 correct way to declare textarea width

[Eric Cash]

I hate form elements...

I've run into this problem before, I don't think I've ever actually
understood it.

On this page

http://scotaganda.com/work/MineKey/opinionsBoard.html

the "Express your opinion" textarea is fine in firefox, but both safari and
ie place "control" on the right hand side of the textarea, which makes it
grow about 8px, and break the layout.

I'm not sure of the correct way to get this thing to behave, and I'd rather
not keep poking around in the dark here

I have a div wrapped around it, with the correct width, and I'm not sure why
just setting the textarea's width to 100% won't correctly display, any help
here?
__
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] firefox micro versions

[Eric Cash]

I just got an email from a company I'm contracting through, from their
"engineers" (don't get me started on these guys).  My html/css is 100%
standards compliant, and looks identical in firefox 3.0.5, safari, opera,
and all versions of ie.  Great, right?  But they just sent me a series of
screenshots showing weird display inconsistencies in firefox 3.0.1, 3.0.2,
and 3.0.3, some of which are just plain wacky, and shouldn't even exist, but
doesn't ff auto-update, do you guys think I REALLY need to worry about this?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Review site for IE

[Eric Heitz]

Please review the following site in IE 6.

http://www.kucia.com/kucia/sua/

I am able to test in Mac FF, Safari and Opera as well as Windows IE 7.
Would like to get feedback in IE 6 environment.

Noticed on IE 6 render site that IE 6 stacks the main nav.

Any feedback would be great.

Thanks,
Eric
__
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] CSS Lists and Sprites

[Eric Katz]

Hello! I am fairly new at this mailing list sort of stuff along with css as
well but I have been receiving emails and reading/learning a lot.

For reference this is the page i am working on right now:
http://www.team-identity.org/akathletics/newcode/
<http://www.team-identity.org/akathletics/newcode/%20>

And the problem I have is I cannot get the list to display properly or do
anything that I want it to do.

This is a picture of what the list im trying to make is supposed to look
like:
http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg

Here is a link to the image i am trying to use as a sprite:
http://team-identity.org/akathletics/newcode/images/contentnavbuttons.jpg

When I make it display:block; instead of display:inline; it shows each
'button/icon' list item properly except that it is vertical along the page
and I am trying to make it horizontal. When I make it display:inline; it
doesn't show the image in the background, i even tried changing the
line-height thinking that if it was inline and just had a taller line-height
it would show the background image, but it doesn't. :(

Anyways, any help would be greatly appreciated!

Thanks,

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

Re: [css-d] CSS Lists and Sprites

[Eric Katz]

2009/2/21 Gunlaug Sørtun 
- Hide quoted text -

Eric Katz wrote:

http://www.team-identity.org/akathletics/newcode/


This is a picture of what the list im trying to make is
supposed to look like:
http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg

1: keep all 8 list-items in one ul -  - in the
source-code.


2: apply 'display: inline-block' (and centering), followed by the
necessary fixes for IE7 and older.

This will do...

#navbuttons {
   width:770px;
   margin:0 auto;
   list-style:none;
   text-align: center;
}

#navbuttons li {
   display:inline-block;
   width:220px;
   height:180px;
   padding:0;
   margin:0 10px;
   background : url(../images/contentnavbuttons.jpg) no-repeat;
}

/* IE6 fix */
* html #navbuttons li {display: inline;}

/* IE7 fix */
*+html #navbuttons li {display: inline;}


3: sprinkle in background positions, using the class on the individual
list-items - like you have started.
However, strengthen selector-specificity like the following...

#navbuttons li.gym-mats {
   background-position:0px -200px;
}

...to override the general #navbuttons li position.

You can then also fine-tune side-margins for the individual list-item to
get it all lined up just as in your example-image.


4: delete 'height' on #area so that container can expand freely and push
the footer down.

regards
   Georg
--
http://www.gunlaug.no


Thanks so much it looks like that fixed it pretty well! The height
dimension to #area was just so I could visualize a content area coming
down before I coded it.

Also thanks Philippe I added those additional fixes you mentioned!

I think next I want to try and incorporate the background images as
part of the link, is there a way I could do that easily? I just
started playing around with it and will work on it some more tomorrow.

Thank you so much guys!

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

Re: [css-d] CSS Lists and Sprites

[Eric Katz]

It worked perfectly! Thanks a lot guys. Hopefully I can learn this stuff
good enough to pass some help to other people too.

Eric

2009/2/22 Philippe Wittenbergh 

>
> On Feb 22, 2009, at 3:05 PM, Eric Katz wrote:
>
>  Thanks so much it looks like that fixed it pretty well! The height
>> dimension to #area was just so I could visualize a content area coming
>> down before I coded it.
>>
>> Also thanks Philippe I added those additional fixes you mentioned!
>>
>> I think next I want to try and incorporate the background images as
>> part of the link, is there a way I could do that easily? I just
>> started playing around with it and will work on it some more tomorrow.
>>
>
> (assuming the link is the only content in the )
> Sure: just set the link to display:block, and move of the styling to the
> link (padding, background, ...).
>
>
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css list

[Eric Katz]

So I think I have really screwed up some stuff right now, i can't either of
my lists formatted properly the way I want them to be in the Products by
Genre Window here:
http://team-identity.org/akathletics/newcode/

The lists of genres and the products are supposed to look something like
this:
http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg

And in Firefox they are flying all the way horizontal and in internet
explorer they are just listing straight down the page.

I also have some jquery tabs set up in a way that should be only displaying
the correct div selected via the genre, and in internet explorer it
completely ignores the jquery.

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

Re: [css-d] css list

[Eric Katz]

Because I am a noob and forget to reply to all, what do you mean by
Validate? :(

2009/2/27 Eric Katz 

> I'm using the
>
>  #specific-products li:before {
> content: "»";
> }
>
> and
>
> #genres li:after {
> content: "|";
>
> }
>
> to add the additional double arrows and pipes i want for the lists but they
> appear way off line, i feel like this is probably because of the line-height
> adjustments I made but without that then the lines are spread out too far.
>
> -Eric Katz
>
> 2009/2/27 David Laakso 
>
>> Eric Katz wrote:
>>
>>> So I think I have really screwed up some stuff right now, i can't either
>>> of
>>> my lists formatted properly the way I want them to be in the Products by
>>> Genre Window here:
>>> http://team-identity.org/akathletics/newcode/
>>>
>>>
>>> Any ideas.
>>>
>>>
>>>
>>
>>
>> Attack the obvious first while we both wait for someone to actually solve
>> the problem(s) :-) . Validate.
>>
>> --
>>
>> A thin red line and a salmon-color ampersand forthcoming.
>>
>> http://chelseacreekstudio.com/
>>
>>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css list

[Eric Katz]

So I think I fixed everything and validated via HTML 4.01 strict and CSS 2.1

http://validator.w3.org/check?uri=http://team-identity.org/akathletics/newcode/
http://jigsaw.w3.org/css-validator/validator?uri=http://team-identity.org/akathletics/newcode/

And it still is having display issues, firefox and ie look completely
different.

-Eric Katz

2009/2/27 Eric Katz 

> Oh okay, definietly ;D sorry guys im just so out of it, I had an abcess on
> my head a few days ago and I am still loopy from the drugs and stuff after
> they cut it out.
>
> Thanks,
> Eric Katz
>
> 2009/2/27 MEM 
>
> >> I'm using the
>> >>
>> >> #specific-products li:before {
>> >> content: "»";
>> >> }
>> >>
>> >> and
>> >>
>> >> #genres li:after {
>> >> content: "|";
>> >>
>> >> }
>> >>
>> >> to add the additional double arrows and pipes i want for the lists but
>> they
>> >> appear way off line, i feel like this is probably because of the
>> line-height
>> >> adjustments I made but without that then the lines are spread out too
>> far.
>> >>
>> >> -Eric Katz
>> >>
>> >> 2009/2/27 David Laakso 
>> >>
>> >> Eric Katz wrote:
>> >>
>> >>> So I think I have really screwed up some stuff right now, i can't
>> either
>> >>> of
>> >>> my lists formatted properly the way I want them to be in the Products
>> by
>> >>> Genre Window here:
>> >>> http://team-identity.org/akathletics/newcode/
>> >>>
>> >>>
>> >>> Any ideas.
>> >>>
>> >>>
>> >>>
>> >>
>> >>
>> >> Attack the obvious first while we both wait for someone to actually
>> solve
>> >> the problem(s) :-) . Validate.
>> >>
>> >> --
>> >>
>> >> A thin red line and a salmon-color ampersand forthcoming.
>> >>
>> >> http://chelseacreekstudio.com/
>> >>
>> >>
>> >
>>
>>
>> >2009/2/27 Eric Katz  Wrote:
>> >
>> >Because I am a noob and forget to reply to all, what do you mean by
>> >Validate? :(
>>
>>
>> I believe you must use w3c Validator to see the errors. Correct them. And
>> if
>> you see your issues don't disappear, post here the questions.
>>
>> Regards,
>> Márcio
>>
>>
>>
>>
>>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css list

[Eric Katz]

2009/2/27 Gunlaug Sørtun 

> Eric Katz wrote:
>
>> So I think I have really screwed up some stuff right now, i can't
>> either of my lists formatted properly the way I want them to be in
>> the Products by Genre Window here:
>> http://team-identity.org/akathletics/newcode/
>>
>
> Same as for the part above: IE7 and older need a hack to render *as*
> inline-block. Also some margins and paddings to fix for intended line-up...
>
> #genres {
>   width:675px;
>   margin:0 auto;
>   list-style:none;
>   text-align: center;
>   padding: 0 0 8px 0;
> }
>
> #genres li {
>  display:-moz-inline-box;
>   display:inline-block;
>   padding:0 10px;
>   margin: 3px 0;
>   border-right: solid 1px #bbb;
>  vertical-align: bottom;
> }
>
> /* fix IE6 */
> * html #genres li {display: inline;}
> /* fix IE7 */
> *+html #genres li {display: inline;}
>
> #genres h3 {
>font-size:1em;
>color:#929292;
>margin: 0;
> }
>
> *Important*: keep the non-valid 'display:-moz-inline-box;' in there, or
> else all the numerous browsers based on slightly older Gecko engines
> will not render it well - see Philippe's post on earlier case for your
> layout.
> Working solutions _are_ more important than validity in such cases.
>
> BTW: why are you using an  in those lists? I can't see any reason
> whatsoever for headlines to be used there, but maybe you have one..?
>
> regards
>Georg
> --
> http://www.gunlaug.no


I guess they don't have to be there ^_^ I wanted it set up so the 'genres'
were an h3 in relevance to what the actual site is for, selling the products
which are set up with h2 tags in their respective lists, with h1 being the
'our genre products,'  and of course the h1s at the top of the page that
make up the original list buttons i had set up. Do you think this is a poor
idea, or ? I really just started playing with it not sure how seo friendly
it is or if its even all that proper. I went ahead and put the -moz
inline-block hack again.

Also do you know any reason why my javascript tabs set up through jquery
aren't showing properly in internet explorer? Maybe it has to do with the
other list problems I have already set up with the target #divs each link in
#genres are supposed to display.

Eric Katz
__
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] container help (BB)

[eric cash]

RKN Studio wrote:
> Hello - I'm having a little trouble with an image being the larger portion
> of content within a div container.  I'm not sure why it is that text
> content will extend the container as necessary, but not an image.  Am
> I missing something?
>
>   
#nav is floated left, used to be you needed a clearing element after
#content.  Some useless thing like a  or  with a class of
"clear" with a property of clear: both.

Those days are over, apply "overflow:auto;" to #main-text.

If I'm not mistaken, this guy came up with it first http://pmob.co.uk/

cheers!

ec

__
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] container help (BB)

[eric cash]

RKN Studio wrote:
> Thanks Eric - That appears to work for Moz/FF, but not IE6...  :/
>
>
I'm still too groggy too test this, but if I remember correctly, the
trick to getting ie6 to jive with the overflow: auto trick is to give
that same element a width.  Try a width on #main-text and let us know if
that works.  Or wait until someone who's had their coffee shows up!

ec

__
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] Showing and Hiding CSS divs - Safari issue

[Eric Hassler]

Hi list,

Apologies if this gets double posted. I sent it about six hours ago,  
but from the wrong email address. I suspect posting from an email  
address that hasn't subscribed to the list won't work...

 


I'm having a bit of trouble with Safari, and I'm not sure if it's a  
javascript or CSS oversight on my part.

The site in question: http://atomiccomics.com/

Scroll down to the "Latest Releases" section on the home page. Notice  
even farther down (above the footer) the Captain American graphic.  
He's supposed to stay right there above the footer regardless of the  
length of the Latest Releases div. Everything is positioned fine  
until clicking the "Last Week" or "Next Week" link (which uses  
javascript to display and hide divs). At that point, Captain America  
is no longer positioned at the bottom. This oddity only occurs in  
Safari. I checked it in Windows IE6 and FF, plus Mac FF, and all is  
well. Any ideas?

Thanks,
Eric
__
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] dropdown menu check, iCab & Opera

[Tribou, Eric]

I'm trying to create a super-compatible dropdown menu system. Please
give it a go and let me know (off-list please) of any bugs that you
observe. The demo is at
http://webhost.bridgew.edu/etribou/layouts/rmenu/

I've run into a few bugs in working on it that I was hoping someone
might be able to help me with.

iCab seems to be rendering dropdowns in the wrong location until you
mouse-over the sub-menu, then it renders it in the right position. If I
mouse onto a menu item with a sub-menu from above (except for the menu
item at the top of the list) it's rendering in the correct position
immediately. I've tracked it down to the top property. Setting top to 0
or auto seems to work fine but set it to a specific value and this
problem starts to happen. I could use margins to position things but
I've found using position attributes much more compatible across
browsing platforms. I'm using v3.03 and this bug was also present in
3.01. Does anyone know of a CSS hack to either hide from or show only to
iCab specific CSS? Or perhaps know more about what might be causing this
bug?

Have there been any workarounds for older versions of Opera where
positioning was based on the root document dimensions and not the parent
element? This is causing a problem with the position of dropdowns on a
right-aligned horizontal menu (pre 7.5). I don't think it's a big
problem since Opera users pre 7.5 have probably upgraded to 7.5 or later
but I'd like to work around it if possible.

Also Opera 9.02 seems to have a bug. If I mouse over menu options, in a
blank (non-text) area of the block the menu item takes up, the
underlying anchor should take focus giving a yellow background. But if a
dropdown menu is over text and I mouse over the menu item in a blank
area, the anchor doesn't take focus but the LI element that contains the
anchor does (giving an orange background). Moving over the text of that
menu item then triggers the anchor to take focus and keep it even if you
mouse back over a blank area. Any ideas what could be causing this and
is it really a bug or have I just done something odd?

Thanks for any help, input, or insight.

--
Eric Tribou
"The Forgettable Mister Ruthsarian"
__
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] Float clearing and negative bottom margin

[Eric Hassler]

Hi all,

Working on a new layout, but having a little problem in IE6.

http://erichassler.com/mommytalk_v2/

The issue concerns "the News" and "meet Lorraine" boxes. They're  
built basically like this:

 (container and bkg)
 (top curvy rect gradient bkg image)
 (graphic header)
 (left floated head shot image)
 (some content)
(bottom curvy rect gradient bkg image)
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] why margin-top/bottom don't work for span class?

[Tribou, Eric]

How vertical padding and margins are applied vary between browsers. The
typical reaction I see is  that vertical padding/margins/borders are
applied, but they do not change the dimensions of the inline element.
Meaning if an inline element is 1em tall, it remains 1em tall and it is
rendered as if it's 1em tall regardless of how much vertical spacing you
add.

It's like the vertical padding is absolutely positioned, that is removed
from the flow of the document.

Here's a quick example:
http://webhost.bridgew.edu/etribou/temp/inlines.html

Span 1 has 10px padding and margin. 

Span 2 has 1000px vertical padding. Some browsers will generate a
vertical scrollbar to fit the padding, other's clip at either the
viewport or the document boundaries.

Span 3 has 2000px vertical margins. You'll see that doesn't trigger
scroll bar in those that do with padding because you'd see a longer
document with empty space below the green of span 2.

And if you test this across multiple browsers you'll see the reactions
vary.

Margins, it appears, are collapsing or being ignored entirely. Since
horizontal margins are being applied I belive the vertical margins are
applied as well except they're collapsed.

CSS 2.1 spec doesn't state how vertical padding/borders/margins should
be rendered, in fact it seems to explicitly say the spec doesn't cover
it. Horizontal values, it does say, should be respected.

See:
http://www.w3.org/TR/CSS21/visuren.html#inline-formatting
http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced

Hope that explains what you're experiencing.


--
Eric Tribou
Web Developer
Bridgewater State College
http://www.bridgew.edu   

> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On Behalf Of Tee G. Peng
> Sent: Wednesday, October 18, 2006 10:06 AM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] why margin-top/bottom don't work for span class?
> 
> Hi Alex, thanks for the quick response.
> On Oct 18, 2006, at 6:42 AM, Alex Bienz wrote:
> 
> >  span is an inline element, and top and bottom paddings and margins 
> > don't apply to inline elements.
> 
> But according to my example, it does work for top/bottom 
> padding. In the example I have background color declared, 
> when I increase pixels for top/bottom padding, the 'box' 
> expands vertically.
> 
> 
> tee
> __
> 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/

Re: [css-d] Sticky footer kinda sorta

[Tribou, Eric]

http://webhost.bridgew.edu/etribou/layouts/exp/diane/one.html

That's my attempt at sticky footer (and header). There are some browsers
that don't handle it well but it might be something that could be worked
around (or the "sticky" part just not applied to older browsers).

--
Eric Tribou

> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On Behalf Of ~davidLaakso
> Sent: Wednesday, October 18, 2006 3:35 PM
> To: CSS Discussion Group
> Subject: Re: [css-d] Sticky footer kinda sorta
> 
> Tom Livingston wrote:
> > I am in need of a footer that sticks to the bottom of the viewport, 
> > but when content runs deep, the footer is pushed down accordingly.
> > Here, for example:
> > http://66.155.251.18/mlinc.com/06/
> Anything is possible. Getting it to work reliably 
> cross-browser without throwing yourself through a closed 
> window is yet another matter :-) . 
> You might take a look at Paul O'Brien's 
> work.<http://www.pmob.co.uk/temp/mac3column.htm>.
> This turkey
> <http://www.chelseacreekstudio.com/ca/cssd/height-100-percent.
> html> that I floundered with is based on his stuff.
> Regards,
> ~dL
> 
> --
> http://chelseacreekstudio.com/
> 
> __
> 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] Tweaking Lists

[Eric Price]

Hi;
I don't know if this is possible, but I know this is the right list to ask 
;) I don't like the out-of-the-box behavior (or interpretation by the 
browsers) of lists. I would like to tweak it so that it only gives one  at the beginning and end of the list, instead of the default of two. 
Possible? If so, how?
TIA,
Eric

_
The MSN Entertainment Guide to Golden Globes is here.  Get all the scoop. 
http://tv.msn.com/tv/globes2007/?icid=nctagline2

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

[css-d] firefox odd width problem in unordered list

[eric cash]

I just got yanked into this job as
a last minute emergency.  I'm spending most of my time reading the css 
and trying to figure out what the guy before me was trying to do.

So I got this here page, http://www.mentallyregarded.com/advo and a comp
that I have to make it look like.  I have two days, and slowly but
surely, I'm making my way through it, no prob.  But there's this odd
behavior in the footer menu, firefox is giving the logo li a width
that's not right, and I can't figure out why, it's not the li width 
that's declared.  And the first two items in the menu aren't picking up 
the a:hover's,  I'm suspicious that the two might be related, if anybody 
out there can point me in the right direction, that'd be great.  I 
apologize, I know the css is a bit messy, that's what happens when you 
plug a new guy in five days after deadline, and the old guy leaves the 
continent for a month.

Thanks guys

ec

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

[css-d] a:hover not working in first two items of ul, plis IEMac sitecheck

[eric cash]

Never again will I take a "finish it" job.
Thanks to philippe for pointing out the obvious that I couldn't see past 
my red haze of anger.

Hopefully, I'm done with this thing, 
http://www.mentallyregarded.com/advo , except for one problem, the first 
two items in the menu won't rollover to their hover states.  This is 
true for the menu in the header as well as the footer, and I can't for 
the life of me figure out why.  Any help would be highly appreciated.  
Also, a site check for IEMac would be great, just to make sure I didn't 
brek it again.  My usual source for mac site-checking is the guy that 
handed me this job 10 minutes before he flew to new zealand.

Thanks!

ec
__
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] a:hover not working in first two items of ul, plis IEMac sitecheck

[eric cash]

I forgot to mention, the rollover problem is only in firefox, although I 
swear it was in IE earlier...
__
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] Complex layout works on MSIE 5 & 6 but not 7

[Tribou, Eric]

Hi, original author of that layout here.

The layout in question is located at:
http://webhost.bridgew.edu/etribou/layouts/2col_colors/beta/index.html

This is a very old layout, when I was experimenting with means to create
a float-based layout that allowed for separate background colors for the
columns. This layout is marked deprecated on the site because I haven't
touched it in several years and have since found a better method.

Your best bet Stephane is to look at Skidoo Too,
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html, which
is more up to date. I'm working on a much newer version of that layout
with better documentation on the CSS hacks that are used and takes IE7
into consideration. The HTML/CSS are ready, the documentation is not,
but if you're up for it you can find it at
http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/.

For completeness sake, the IE condition statement used in that old
layout was a workaround to hack in support for fixed-positioning, which
IE (pre 7) didn't support. The idea that the background is a color mask
fixed to the page and the content scrolls on top. I thought it was a
novel approach, but was much too complicated. 

--
Eric Tribou
"The Forgettable Mister Ruthsarian"

> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On Behalf Of 
> Stephane Bortzmeyer
> Sent: Monday, January 29, 2007 3:09 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] Complex layout works on MSIE 5 & 6 but not 7
> 
> The Web site is http://www.bortzmeyer.org/. It uses a complex 
> layout which I did not write myself but copied from 
> http://webhost.bridgew.edu/etribou/layouts/index.html. I do 
> not really master it, unfortunately.
> 
> It has a special rule for MSIE:
> 
> 
> 
> which works fine (well, at least it is bearable) for MSIE 5 & 
> 6. But on MSIE 7, it is awful. (If you do not have MSIE 7, 
> you can see it at 
> http://browsershots.org/screenshots/269c8db1bd945c2f8456c348f1
> 20e0eb/).
> 
> Any advice?
> __
> css-discuss [EMAIL PROTECTED] 
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by 
> evolt.org -- http://www.evolt.org/help_support_evolt/
> 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Floats and Overflow

[Tribou, Eric]

Anyone using floated layouts have any tricks to share regarding the use of 
images or other objects within your floats that go wider than the float allows? 
That seems to be my biggest problem; things like images are thrown into columns 
that get too narrow and force columns to drop/wrap.

I've used some tricks like negative right margins on images to fake their width 
to 0 or setting an image as the background to a 100% wide DIV. Hopefully there 
are tricks out there I'm just not aware of. Any suggestions you might offer 
would be appreciated. 

--
Eric Tribou
"The Forgettable Mister Ruthsarian"
__
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] last letter repeat in span ie.6-7

[Tribou, Eric]

Problem is, this layout has no comments. So it's the dup bug, but
there's a new trigger in IE7.

I've found a few things. Setting the position property to relative for
the .status-sold element resolves the issue. Also removing any
whitespace (including carriage return) between the .status-sold and
.media elements will also relieve the problem.

The bug does seem to involve multiple floating elements. Perhaps it has
something to do with the fact that SPAN elements are being converted to
block elements and then floated. 

--
Eric Tribou
Web Developer
Bridgewater State College
http://www.bridgew.edu   

> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On Behalf Of cFA
> Sent: Tuesday, January 30, 2007 9:13 AM
> To: Julian Merrow-Smith
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] last letter repeat in span ie.6-7
> 
> yeah thats that blasted IE6 duplicate characters bug:
> 
> http://www.positioniseverything.net/explorer/dup-characters.html
> --
> iron sharpens iron
> __
> css-discuss [EMAIL PROTECTED] 
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by 
> evolt.org -- http://www.evolt.org/help_support_evolt/
> 
__
css-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/