[css-d] Hover state persisting on anchor with target="_blank"

[Kevin A. Cameron]

http://www.kacevisual.com/files/hover-test/

On hover, link turns orange (CSS :hover).
Click link opens in new tab (target="_blank")
Now going back to the original tab, if you don't mouse into the page,
you'll see the link is still in it's hover state.

Default and expected browser behavior IMO, but some people here are
wondering if there's a way to have the link revert to the non-hover state
automatically.

Kevin
__
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] 1-px rule after last paragraph?

[Kevin A. Cameron]

I think an  makes the most sense actually. Add left/right margin so
it's the correct width.

Kevin
__
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] Opera Type and Menu issues [+1]

[Kevin A. Cameron]

Sadly all browsers have their idiosyncrasies, bugs, or interpret
(occasionally vague) HTML/CSS specs differently.

Kevin
__
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] 'letter-spacing' - pixels only?

[Kevin A. Cameron]

Interesting test.

Anyway, I would think that there would be a gradient of string length
between equally stepped letter-spacing values, so IMO it's a bug in
Webkit/Presto.

Kevin
__
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] 'letter-spacing' - pixels only?

[Kevin A. Cameron]

I don't think it's a bug, just a poorly defined spec:
http://www.w3.org/TR/CSS2/text.html#spacing-props
"Character spacing algorithms are user agent-dependent." & "Values may be
negative, but there may be implementation-specific limits."

It's logged as a bug with Webkit, though 'unconfirmed':
https://bugs.webkit.org/show_bug.cgi?id=20606

I have font-smoothing turned off, not sure if UAs would/could handle this
differently if it's on...?

Kevin
__
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] 'letter-spacing' - pixels only?

[Kevin A. Cameron]

Aha! Appears to be browser specific:
Gecko - Good!
Webkit - Bad!
Trident - Good!
Preso - Bad!

http://www.kacevisual.com/files/letter-spacing/

My disdain for Webkit grows...

Kevin
__
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] 'letter-spacing' - pixels only?

[Kevin A. Cameron]

I use em all the time, and by that I mean I only use em when letter-spacing.
Just today I used:

p {letter-spacing: -0.08em}

Kevin
__
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] Opera Type and Menu issues

[Kevin A. Cameron]

I also hate the whole-site-zoom effect... It can make sense: text in a small
side bar becomes unreadable if there are 3 characters per line. It would be
nice if there was a balance, at least so that site was never increased more
than the size of the viewport.

Kevin
__
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] Webkit Bug...?

[Kevin A. Cameron]

Is this a bug in Webkit?

Check the 3rd item in the 2nd ordered list (or search for "Use the W, A, S,
and D"):
http://na.cityofheroes.com/en/freedom/user-guide/index.php

In other browsers the list-item bullet - "3." - is to the left of the image,
in Webkit browsers the floated image is to the left of the bullet.
I found a work around by enclosing the image and text in a div, and adding a
clear div before that parent div's closing tag.

ie:



Lorem ipsum dolor sit amet..




I tried searching for this, but didn't really find anything (or look that
hard either...).

Kevin
__
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] Opera Type and Menu issues

[Kevin A. Cameron]

Browser preference. Most browsers now-a-days zoom the entire site (layout,
graphics and all) not just text. I know in FF you can specify text only
zoom. Apple looks to use JS or CSS transitions to scale up some layout
elements as well.

The line break due to font-rendering differences in different browsers could
be resolved with white-space:nowrap;. Check if browser support meets your
needs.

Kevin


On Wed, Oct 26, 2011 at 4:28 PM, John  wrote:

>
> On Oct 26, 2011, at 3:05 PM, Chris F.A. Johnson wrote:
>
> >   The H1 also breaks in Firefox because, like many people, I use a
> >   larger font-size than you do: .
>
> OK..well, how does a site like Apple.com prevent the local browser's font
> size setting from altering the type on their page. *and I am talking about
> actual, "live" type, and not the type on their site that's raster graphics.
>
> if you zoom on the apple.com page, everything gets bigger together.
>
> what's the trick to doing that? Is this something members on this list do
> for their pages to preserve the type relationships regardless of what the
> end user does with their browser?
>
> 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] Best way to add image elements?

[Kevin A. Cameron]

float:left wont work..? (being sure to clear the containing/red bordered
div)

Kevin


On Wed, Oct 26, 2011 at 4:09 PM, John  wrote:

> http://coffeeonmars.com/testing/pix/widgets.jpg
>
> I am not sure how to implement this idea, shown at the link above. the
> image elements are within the red line.
>
> My guess is that it should be within the content area, but it can't push
> anything else around...IOW, its positioning shouldn't affect the positioning
> of what's already there, if that makes sense..the reason being that if I
> need to remove one of all of the image elements, the rest of the layout will
> stay put.
>
> would this be done by creating a div for the first image, set its
> positioning by margin values, then rinse and repeat for as many other images
> I want to add horizontally?
>
> 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] Opera Type and Menu issues

[Kevin A. Cameron]

I don't really think this should be seen as a bug. Long strings break,
unless you used  ...
Just make sure your line-heights accommodate, which I'd say they do.

Kevin


On Wed, Oct 26, 2011 at 3:05 PM, Chris F.A. Johnson wrote:

> On Wed, 26 Oct 2011, John wrote:
>
>  
> http://coffeeonmars.com/**testing/index.html
>> http://coffeeonmars.com/**testing/WPR_Wire.html
>>
>> When Opera 11.51 opens these pages, the H1/H2 headline is bigger/fatter
>> and breaks whereas all other browsers (Even pesky win IE6) don't do this to
>> my type.
>> Opera also does weird things with the menu at the left, where "next in
>> project" gets so large it takes up 2 lines.
>>
>
>   The H1 also breaks in Firefox because, like many people, I use a
>   larger font-size than you do: 
> 
> >.
>
> --
>   Chris F.A. Johnson, 
>   Author:
>   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
>   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
>
> __**__**__
> 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] help with positioning text in bottom right corner of content area

[Kevin A. Cameron]

Oops, left:0 should be right:0.
Kevin


On Fri, Oct 21, 2011 at 2:29 PM, Kevin A. Cameron
wrote:

> Try making the parent element position relative, and the AF element
> position absolute, bottom:0, left:0.
>
> Kevin
>
>
>
> On Fri, Oct 21, 2011 at 2:15 PM, Angela French  wrote:
>
>> I need to position a very small text item in the bottom right hand corner
>> of my content area.
>> I've tried positioning it relative with bottom:0 and right:0, but that
>> didn't work.  So then I just positioned it like so:
>>
>> AF.
>>
>> This does move it to the right, but not to the bottom of my page content
>> area.  I can't determine what is keeping it from sitting on the bottom.  Any
>> advice appreciated.  Here is my test page:
>>
>> http://sbctc.edu/college/test.aspx
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.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] help with positioning text in bottom right corner of content area

[Kevin A. Cameron]

Try making the parent element position relative, and the AF element position
absolute, bottom:0, left:0.

Kevin


On Fri, Oct 21, 2011 at 2:15 PM, Angela French  wrote:

> I need to position a very small text item in the bottom right hand corner
> of my content area.
> I've tried positioning it relative with bottom:0 and right:0, but that
> didn't work.  So then I just positioned it like so:
>
> AF.
>
> This does move it to the right, but not to the bottom of my page content
> area.  I can't determine what is keeping it from sitting on the bottom.  Any
> advice appreciated.  Here is my test page:
>
> http://sbctc.edu/college/test.aspx
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> http://www.checkoutacollege.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] Is padding-left Inherited?

[Kevin A. Cameron]

It's an inline style in the markup.

Also probably want to try to pick away at the HTML errors, there's a lot!

Kevin
__
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] Best Practices For Sprites?

[Kevin A. Cameron]

You also have to consider bandwidth vs likelihood of the image being
required.

I had been putting together a sprite of hundreds of icons. This image ended
up being very large, and didn't make sense for every user to download all
these images when perhaps they only needed 1.

I ended up breaking the mega-sprite into 10 smaller sprites, grouping the
icons by association.

Kevin
__
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] apply class to parent when children are in focus?

[Kevin A. Cameron]

Looks like there is some JS that is adding class 'selectedanchor' on hover.
Just modify that class to also have white text.

If you're looking to recreate something like this with just CSS, maybe
check http://css.maxdesign.com.au/listamatic/

Kevin


On Thu, Sep 22, 2011 at 8:37 AM, Debbie Campbell 
wrote:

> In this page:
>
>  
> http://kittymunson.com/acbl/**newsite/clubs/acblscore.php#
>>
>
> If you click on the Learn & Improve tab, then on any of the menu items with
> a >>, you'll see the parent item changes to white with a colored background.
> But if you mouse down into the menu, the parent item returns to a dark
> color. How would I keep the white text color in the parent while the user is
> mousing over the menu?
>
> --
> Debbie Campbell
> www.redkitecreative.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] Expand parent width to contain floated elements

[Kevin A. Cameron]

Pretty sure if you float the parent, it will grow to fit the content.

Kevin


On Fri, Sep 16, 2011 at 8:40 AM, Stevio  wrote:

> Hi is there a way to expand the width of a parent container so that it fits
> the contents of the floated elements within it?
>
> If I have two floated elements within a parent element, and the width of
> those two floated elements can change depending on their content, I would
> like the width of the parent element to expand to contain them.
>
> At the moment, the floated element would stick out the right of the
> container.
>
> Thanks.
> __**__**__
> 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] Form styling: best practices

[Kevin A. Cameron]

Check how they do it on http://wufoo.com/ - a popular form builder.

Kevin


On Thu, Sep 15, 2011 at 12:42 AM, Jukka K. Korpela wrote:

> 15.9.2011 6:29, Dark Phoenix wrote:
>
>  I want to be able to add hints to any form elements that may
>> need them, and have them only show up when they're needed (using some sort
>> of hover mechanism).
>>
>
> That's an interesting and important issue but largely outside the scope of
> CSS. Or, rather, just a part of it is CSS, and the design issue and other
> implementation issues need to be solved first, before the CSS aspects can be
> discussed. In design, CSS considerations may be important, because the
> impossibility or difficulty of doing some things in CSS may affect the
> design choices. But I don't think that's the case here.
>
>
>  I do know that I'm going to indicate errors with a
>> popup on the right side of the form element (that shows up when the
>> element
>> is focused or the error icon which will appear on the right side of the
>> field is hovered), so I'm not sure if putting the information indicator to
>> the right of the element is the right move.
>>
>
> Well that's a design issue too, but styling may help: if you use the same
> notification area for both status information and error messages, you could
> style it differently depending on contents. For example, error messages with
> red borders and yellow background.
>
> Instead of popup, it has become more common to use information areas that
> become visible or change content as controlled by JavaScript and CSS.
> (Popups may annoy people, may get blocked etc.) Yet another possibility is
> to use  for them, as that way things can work without JavaScript.
>
> I don't want to start a discussion on such design issues in this list -
> just mention a few of alternatives, to illustrate why it's too early to
> discuss CSS aspects - the different approaches have rather different CSS
> implications.
>
> --
> Yucca, http://www.cs.tut.fi/~**jkorpela/ 
>
> __**__**__
> 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] Dropdown Menu Hover Link Sticks

[Kevin A. Cameron]

What ver of browsers? On FF 3.6 it's not sticking (and by sticking I assume
you mean the drop down stays even after mouseout), though it does seem to be
unresponsive - ie the drop down takes a little work to get it to show...

Kevin


On Wed, Sep 14, 2011 at 4:13 PM, Mary Villanueva wrote:

> Hello!
>
> Can anyone tell me why the hover link in a CSS drop-down menu sticks in
> Firefox and Safari? Can it be fixed? It's working fine in IE9 which is
> surprise.
>
> Here's the website - I'm still putting the template together:
> http://www.byronsbyte.com/SPCA_SanPat/
> Go to the SPCA Services Navbar (the orange one) and you'll be able to see
> how all the links stick.
>
> Here's the stylesheet:
> http://www.byronsbyte.com/SPCA_SanPat/CSS/spca_global.css
>
> Thank you for your kind assistance.
>
> Best regards,
> Mary
> __
> 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] converting frame style website to tables and css

[Kevin A. Cameron]

Most people nowadays use something like lightbox, thickbox or fancybox
(there must be a generic term for these...?), these use JS to open a large
image in an overlay (similar to clicking an image in a status feed on
Facebook).

We use fancybox quite a bit here: http://fancybox.net/

The markup is extremely simple:


Kevin


On Fri, Sep 9, 2011 at 10:58 AM, Brahm Friedlander wrote:

> This is my first post.
>
> In the past I've used frames to make web sites. My site -
> http://www.brahmfriedlander.ca  uses frames.
>
> Other artists have asked me to make similar sites for them but I know
> "frames" are not the way to go and css is. How would I go about creating a
> site with the same features as mine i.e. displaying photos on a split
> screen
> rather than having thumbnail opening to large jpg on different page.
>
>
>
> Being new to this site and css and web design in general I hope this is not
> too outrageous a request.
>
>
>
> Best regards,
>
>
>
> Brahm
>
>
>
> brahmf...@gmail.com
>
>
>
> http://www.brahmfriedlander.ca 
>
> br...@brahmfriedlander.ca
>
>
>
> __
> 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] Pure CSS Drop Down Menu Help

[Kevin A. Cameron]

Something along the lines of
#main-nav li:hover ul {display:block;}
should help. May also want to check the support for the :hover pseudo
element on LIs to make sure it accommodates your audienc (
http://www.quirksmode.org/css/contents.html).

Kevin


On Fri, Sep 9, 2011 at 9:46 AM, Elli Vizcaino  wrote:

> Hello CSS Discuss,
>
> I have a site all coded up and the only besides cross browser checking left
> to do is integrate a drop down behavior to one of the menu items: About. I
> found a couple of articles and I can't the sub menu to work and drop when
> one hovers over "About". I have tried the methods in the following two
> articles:
>
> http://www.htmldog.com/articles/suckerfish/dropdowns/ - the code semi
> works for this one with the exception that once the sub menu drops down once
> and is hovered over again, it won't stay open if you try to hover over it
> again the second time around.
>
> So I then decided to give this one a try:
> http://matthewjamestaylor.com/blog/centered-dropdown-menus -even though my
> menu isn't center aligned thought I could still incorporate the part for the
> drop down behavior but I can't get that one to work either.
>
>
> Please take a look here for the coded page and try hovering over About -
> nothing happens: http://e7flux.com/dfd/index.html
>
> Here is the snippet of code related to the navigation:
>
>
> #main-nav {
> overflow: hidden;
> margin-top: 106px;
> padding: 0 98px;
> }
> #main-nav li {
> float: left;
> list-style-type: none;
> font-family: Arial, Helvetica, sans-serif; /* Whitney Medium */
> font-size: 12px; /* 14pt in Whitney Medium */
> text-transform: uppercase;
> color: #FFF;
> }
> #main-nav li.home, #main-nav li.about {
> margin-right: 72px;
> }
> #main-nav li.about a {
> display: block;
> }
> #main-nav li.get-involved {
> margin-right: 326px;
> }
> #main-nav li.blog, #main-nav li.donate {
> margin-right: 72px;
> }
> #main-nav a {
> color: #FFF;
> font-style: normal;
> }
> #main-nav a:hover {
> color: #023f3b;
> background: none;
> }
> #main-nav li ul#sub-nav {
> display: none;
> position: absolute;
> right: auto;
> background:  url(../images/subnav-bg.png) no-repeat;
> margin-top: 3px;
> width: 117px;
> height: 136px;
> padding: 11px 15px 0;
> }
> #main-nav li ul#sub-nav li {
> margin: 0 0 9px;
> left: auto;
> }
> #main-nav li ul#sub-nav, #main-nav li ul#sub-nav a {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 12px;
> font-style: italic;
> text-transform: none;
> color: #0c4440;
> }
> #main-nav ul#sub-nav a:hover {
> background: url(../images/link-hover-bg.png) bottom repeat-x;
> }
>
>
>
> If anyone can help I'd greatly appreciate it - this is due today and this
> is the one issue that is holding me up!!! I am working off of FF3.6
>
> TIA,
>
>
> Elli Vizcaino
> Web Designer & Developer
> http://www.E7Flux.com
> The Best Compliment We Can Receive Is A Referral!
>
> __
> 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-d] Trick to Reduce Image File Size

[Kevin A. Cameron]

Could be considered OT, but front end devs are usually chopping images in
their day to day, and this trick has become standard practice for me.

Using the posterize layer effect (in Photoshop) will let you constrain the
number of unique colour values.
For example instead of an image having 200 different unique colour values,
you can limit it to 100 or whatever, and still save as a PNG-24.

Eg
http://www.kacevisual.com/files/img-test/not-posterized.png - 14.19KB (256+
colours)
http://www.kacevisual.com/files/img-test/posterized.png - 5.94KB (40
colours)
http://www.kacevisual.com/files/img-test/compare.tif - both, can you tell
which is which?

There are certainly many other tricks to reduce image file size, but this is
just so easy and almost always makes a huge difference.

Another step can be to duplicate the layer, posterize 1, and use the other
with a mask to fill in the areas where you can see steps between the colours
(often in a gradient).

Further reading:
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

Kevin
__
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] text in different color?

[Kevin A. Cameron]

#5 would be the way I'd do it. There was a great presentation (by Nicole
Sullivan) posted here last week about the difficulties of specificity war in
CSS. Keep your selectors' specificity as low as possible.

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

Re: [css-d] CSS Organization

[Kevin A. Cameron]

I'm guessing that was preprocessors, the likes of LESS or SASS.

Kevin


On Wed, Aug 31, 2011 at 10:53 AM, Tim Dawson  wrote:

> On 31/08/2011 17:34, Kevin A. Cameron wrote:
>
>> My favourite part from that presentation was when she said (paraphrased)
>> what's between the brackets is trivial, it's the selectors that are the
>> tricky part.
>>
>> Kevin
>>
>
> The talk was interesting, but the camera work poor. Too much presenter, it
> was difficult to see the slides.
>
> Did anyone catch what she talking about towards the end; it sounded like
> 'pre-' something.
>
> Tim
>
> --
> 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<http://www.css-discuss.org/mailman/listinfo/css-d>
> List wiki/FAQ -- 
> http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/>
> List policies -- 
> http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html>
> Supported by evolt.org -- 
> http://www.evolt.org/help_**support_evolt/<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] CSS Organization

[Kevin A. Cameron]

My favourite part from that presentation was when she said (paraphrased)
what's between the brackets is trivial, it's the selectors that are the
tricky part.

Kevin
__
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] Off-topic : h1 replacement -- which one is recommended?

[Kevin A. Cameron]

I'm guessing this is referring to replacing text with a (background)
image..?

Kevin


On Fri, Aug 26, 2011 at 9:20 AM, Philip TAYLOR (Webmaster, Ret'd) <
p.tay...@rhul.ac.uk> wrote:

>
>
> Scott Hamm wrote:
>
> > I've been looking all over websites -- a lot of good h1 replacement
> > suggestions.  But which one is more practical, validated in all aspects
> i.e.
> > bobby approved, html5, etc?
>
>  is HTML, not CSS, but that said, why might anyone want to replace it ?
>
> 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] can style sheets be too long?

[Kevin A. Cameron]

Nice!

And thanks Tim for the clarification, I'll definitely be incorporating that
syntax in future projects.

Kevin


On Thu, Aug 25, 2011 at 6:06 PM, John  wrote:

>
> On Aug 25, 2011, at 9:10 AM, Kevin A. Cameron wrote:
>
>  +1 for the OOCSS mentality...Start with a base class that defines the most
>> common use, then use additional classes in conjunction with the base class
>> to define the variations.
>>
>
> this is working *very* well for me, both solving problems and giving me
> flexibility at the same time.
>
> I re-named my styles improving their descriptiveness and with CamelCase,
> the whole thing much easier to read and make sense of.
>
>
> J
> __**__**__
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/**mailman/listinfo/css-d<http://www.css-discuss.org/mailman/listinfo/css-d>
> List wiki/FAQ -- 
> http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/>
> List policies -- 
> http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html>
> Supported by evolt.org -- 
> http://www.evolt.org/help_**support_evolt/<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] can style sheets be too long?

[Kevin A. Cameron]

In an attempt to head off a flame war  I'll say it completely depends on
your audience. Many corporate internal websites depend on IE6, as well some
developing nations are using it (on older systems).

Majority of all others are using newer browsers..

Kevin


On Thu, Aug 25, 2011 at 1:47 PM, Greg Wilker  wrote:

> -Original Message-
> > From: Tim Climis
> > Sent: Thursday, August 25, 2011 1:12 PM
> > Subject: Re: [css-d] can style sheets be too long?
> >
> > This might be nitpicking but wouldn't it be more like this? (Or is this
> one of the cases that makes IE6 choke and die?)
>
> I've been thinking that developing with IE6 in mind is in the past - my
> experience and data shows that people using IE/Windows have left IE6.
> Windows has been diligent in including browser upgrades as part of its
> "important" software updates.
>
> Are people seeing data contraire to this?
>
> Inquiring minds,
> Greg
>
> __
> 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] OperaMini

[Kevin A. Cameron]

Had this issue a while back and I believe it was related to a meta tag.
I googled this article - might be of help
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Kevin


On Thu, Aug 25, 2011 at 3:48 AM, David Laakso
wrote:

> Greetings from San_Miguel de Allende...
>
> We've got ourselves a "whittle" problem on this site[1] that is driving us
> nuts...
>
> In OperaMini landscape view the font-size, for some unknown reason, is
> larger and requires a page reload to correct. This does not happen in
> landscape view in Android/2.2.2 nor in Opera Mobile.
>
> What to do?
>
> [1]
> markup
> >
> css
> 
> >
>
>
> Best,
> Milagros Sanchez
> Creative Director
> Mexico
>
>
> __**__**__
> 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] can style sheets be too long?

[Kevin A. Cameron]

+1 for the OOCSS mentality.

A simple example: lets say you have 3 types of linked headers. Start with a
base class that defines the most common use, then use additional classes
in conjunction with the base class to define the variations.


/* Default linked header */
.headerLink {
text-decoration: none;
font: 1.2em/1 tahoma, sans-serif;
color: red;
}
.headerLink a:hover {
text-decoration: underline;
}

/* Alternate linked header 1 */
.headerLink-alt1 {
color: blue;
}
.headerLink-alt1 a:hover {
background-color: yellow;
}

/*Alternate linked header 2 */
.headerLink-alt2 {
color: orange;
font-size: 2em;
}


default header
alternate header
1
alternate header
2


At least that's how I think it would apply in the context of this
conversation.

Kevin


On Thu, Aug 25, 2011 at 2:52 AM, Ghodmode  wrote:

> On Thu, Aug 25, 2011 at 5:29 AM, John  wrote:
> > As I evolve my site, I'm differentiating styles by altering the name so
> that
> > I can adjust attributes.
> >
> > example: home page head and sub-page head might be mostly the same, but
> one
> > might need different positioning or color.
> >
> > can my style sheet get too long? It only measures about 2K in size right
> > now, but what if it got to a whopping 16K?
>
> As far as I know, there's not a limitation on the size.  As Philippe
> Wittenbergh, mentioned, Internet Explorer limits the number of rules
> to 4095 and the number of stylesheets to 31 (not 32).
>
> Here are a couple of links that refer to this limitation in IE:
>  -
> http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ad1b6e88-bbfa-4cc4-9e95-3889b82a7c1d/
>  - http://support.microsoft.com/kb/262161
>
>
> > is that a big concern, or is the human angle a bigger deal in terms of
> > keeping everything straight?
>
> It's annoying when IE imposes a limitation on us that none of the
> other browsers do, but I think that almost all sites should fit within
> the 31/4095 limit.
>
> Having said that, I have run into the stylesheet limitation on a large
> Django-based site with lots of developers working on lots of different
> parts of the site.  But the problem only happened in development
> because we minified and combined the stylesheets before pushing into
> production.  Also, there was a lot of room for optimization of all of
> the code that would have eliminated the problem entirely.
>
> Something that might help is the concept of Object-Oriented CSS which
> was presented by one of the Yahoo developers.
>
> The GitHub Wiki:
>  - https://github.com/stubbornella/oocss/wiki
>
> The presentation:
>  -
> http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/
>
> Or just the slides:
>  - http://www.slideshare.net/stubbornella/object-oriented-css
>
> > thanks!
> >
> > J
>
> --
> Ghodmode
> http://www.ghodmode.com/blog
> __
> 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] getting an image in back of text (z-index)

[Kevin A. Cameron]

Maybe this has been asked, but why not use a BG image?

Kevin


On Wed, Jul 27, 2011 at 2:36 PM, John  wrote:

>
> On Jul 26, 2011, at 10:29 PM, Mark Henderson wrote:
>
>  Honestly John, all things considered, I recommend /starting over/ and
>> to that end if you can take the time to create and upload a graphical
>> representation of what you want the page to look like, someone here
>> (including myself) can probably get you heading in the right
>> direction.
>>
>
> Here is a jpg I've uploaded, taking you up on your generous offer. I worked
> up 1 design with 2 pages/variations.
>
> http://www.coffeeonmars.com/**testing/grafrep.jpg
>
> I sure do appreciate any tips you can offer on the right way to start this
> thing out...then maybe I can use that to learn from that point.
>
> 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] clumpy loading

[Kevin A. Cameron]

Looks like there are a bunch of images are aren't being found, which would
certainly slow the load. subpage1_01.jpg and the like...

Kevin
__
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] tables in print.css file

[Kevin A. Cameron]

Are you testing by looking at a physical printout or a PDF? Sometimes a
light grey wont be noticeable in print.

You've set the media type in the style sheet link?
eg: 

Kevin
__
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] tables in print.css file

[Kevin A. Cameron]

Shouldn't there be a space before the '!' ?

Kevin
__
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] vertically align two floated divs to top of container

[Kevin A. Cameron]

Remove the  between the 2 divs with class "wpcol-one-half halfColumn"
Kevin


On Tue, May 24, 2011 at 4:40 PM, Debbie Campbell 
wrote:

> Can someone tell me what I need to fix to get the two yellow divs to align
> to the top of the blue-bordered div?
>
>  http://hachdrinkingwater.com/
>>
>
> --
> Debbie Campbell
> www.redkitecreative.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] can someone explain?

[Kevin A. Cameron]

Oh LOL! Serves me right for using an ...

Kevin


On Tue, May 17, 2011 at 5:44 PM, Philippe Wittenbergh wrote:

>
> On May 18, 2011, at 9:26 AM, Kevin A. Cameron wrote:
>
> > While testing I came across this weird bug/artifact. the contents of the
> >  s (1 2 3) are shown twice:
> > http://www.kacevisual.com/files/float-test/float-test.html
> >
> > Does anyone understand why?
>
> They are not really rendered twice. Change the textual contents of your ol
> > li elements to read ‘x’ ‘y’ ‘z’ instead of ‘1’ ‘2’ ‘3’ and you’ll see what
> is happening.
>
> The first digit you see in your test case is the list marker, the second
> one is the textual content of the li.
>
> 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] can someone explain?

[Kevin A. Cameron]

While testing I came across this weird bug/artifact. the contents of the
 s (1 2 3) are shown twice:
http://www.kacevisual.com/files/float-test/float-test.html

Does anyone understand why?

Kevin


On Tue, May 17, 2011 at 5:04 PM, Sara Haradhvala  wrote:

> Thanks so much for the explanation, Kevin.  What you're saying totally
> makes sense!  And it explains why that negative margin acts differently from
> the positive margin (in the latter case, the 2nd li bumps into the margin).
> But I'm wondering why putting a1px border on the list elements makes the
> anchors align - even with the negative margin. The uls are still zero
> height.
>
> Sara
>
>
>
> On May 17, 2011, at 6:58 PM, Kevin A. Cameron wrote:
>
> I think this makes sense. Because the s are floated the s have 0
> height, so they both start at the same location. When you add negative
> margin to the first  it's pulled above the containing . The second
>  when floated left only sees the beginning of the  and then is
> pulled up, and thereby overlapping.
>
> I'm sure someone here knows more about box model implementations by
> browsers and could provide a more technical answer.
>
> Kevin
>
>
> On Tue, May 17, 2011 at 12:13 PM, Sara Haradhvala wrote:
>
>> Hi Jim,
>>
>> Margins and padding are 0.
>>
>> Here is the HTML:
>>
>> 
>>
>>
>>a1
>>a2
>>
>>
>>
>>
>>b1
>>b2
>>
>>
>> 
>>
>> The CSS is:
>>
>> * {margin:0; padding:0}
>> #menu {margin-top:20px}
>> ul {list-style:none}
>> ul  *  {float:left;}
>> li {margin-top: -20px}
>>
>> Thanks,
>> Sara
>>
>>
>>
>>
>> On May 17, 2011, at 2:11 PM, JWN wrote:
>>
>> > Morning Sara
>> >
>> > You wrote
>> >
>> >
>> >> Hi,
>> >>
>> >> I have two unordered lists, where each list has 1 list item with 2
>> links. If I float the list items and anchors left, all 4 anchors line up
>> horizontally as expected. If I add a margin to the list items (but not the
>> anchors), all anchors move down and are still horizontally lined up as
>> expected.  But if I put a negative margin on the list items instead, the
>> anchors move up as expected, but the anchors from the 2nd list  overlay the
>> anchors from the first list instead of sitting to the right of them. I'm not
>> understanding why this is, and hope someone can explain.
>> >>
>> >> I'm using firefox 4 on the Mac.
>> >>
>> >> Thanks,
>> >> Sara
>> >
>> >
>> > Just a guess but you might try zeroing out margins and padding on the
>> body.
>> >
>> > body {
>> >   margin:0;
>> >   padding:0;
>> >   }
>> >
>> > Can you provide a link to an actual page or at least a test page showing
>> the problem? It's always easier to help when we can see what is going on
>> with the rest of CSS /  xHTML.
>> >
>> > Best
>> >
>> > Jim Nannery
>> > www.oldcurmudgeon.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] can someone explain?

[Kevin A. Cameron]

I think this makes sense. Because the s are floated the s have 0
height, so they both start at the same location. When you add negative
margin to the first  it's pulled above the containing . The second
 when floated left only sees the beginning of the  and then is
pulled up, and thereby overlapping.

I'm sure someone here knows more about box model implementations by browsers
and could provide a more technical answer.

Kevin


On Tue, May 17, 2011 at 12:13 PM, Sara Haradhvala wrote:

> Hi Jim,
>
> Margins and padding are 0.
>
> Here is the HTML:
>
> 
>
>
>a1
>a2
>
>
>
>
>b1
>b2
>
>
> 
>
> The CSS is:
>
> * {margin:0; padding:0}
> #menu {margin-top:20px}
> ul {list-style:none}
> ul  *  {float:left;}
> li {margin-top: -20px}
>
> Thanks,
> Sara
>
>
>
>
> On May 17, 2011, at 2:11 PM, JWN wrote:
>
> > Morning Sara
> >
> > You wrote
> >
> >
> >> Hi,
> >>
> >> I have two unordered lists, where each list has 1 list item with 2
> links. If I float the list items and anchors left, all 4 anchors line up
> horizontally as expected. If I add a margin to the list items (but not the
> anchors), all anchors move down and are still horizontally lined up as
> expected.  But if I put a negative margin on the list items instead, the
> anchors move up as expected, but the anchors from the 2nd list  overlay the
> anchors from the first list instead of sitting to the right of them. I'm not
> understanding why this is, and hope someone can explain.
> >>
> >> I'm using firefox 4 on the Mac.
> >>
> >> Thanks,
> >> Sara
> >
> >
> > Just a guess but you might try zeroing out margins and padding on the
> body.
> >
> > body {
> >   margin:0;
> >   padding:0;
> >   }
> >
> > Can you provide a link to an actual page or at least a test page showing
> the problem? It's always easier to help when we can see what is going on
> with the rest of CSS /  xHTML.
> >
> > Best
> >
> > Jim Nannery
> > www.oldcurmudgeon.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] Drop Cap missing in FF4

[Kevin A. Cameron]

Would the :first-letter pseudo class work?

Kevin


On Wed, May 11, 2011 at 12:53 PM, Lesley Lutomski
wrote:

> Hi all,
>
> I have a site which uses drop caps at the start of some pages.  The code
> for this is taken more or less straight out of Dan Cederholm's "Web
> Standards Solutions", apart from the font-family line.
>
> A
>
> .drop {float: left;
>font-size: 300%;
>line-height: 1em;
>margin: 4px 10px 0px 0;
>padding: 4px 10px;
>border: 2px solid #3F006F;
>font-family: "ChromaSSK", Georgia, "Times New Roman", "Nimbus Roman
> No9 L", serif;
> background-color: #FF;
> }
>
> In FF4 on Linux, the drop cap doesn't display when the first font in the
> list is not available, even though the other fonts are all installed. The
> coloured background and the border are displayed, but the letter itself is
> missing.   Chromium and Epiphany both display it using the first available
> font.  I can't test in anything else just now.
>
> Any ideas why this is happening?  I'm probably missing something obvious.
>  HTML & CSS both validate.
>
> Thanks.
>
> Lesley
> __
> 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 6 /5.5 problem

[Kevin A. Cameron]

IE5.5 and 6?!?! Kidding, kidding (but not really).

I'd try defining those widths in px, instead of em.

Kevin


On Mon, Apr 25, 2011 at 2:23 PM, Sol Sinclair wrote:

> Hi all;
>
> I am having trouble with a float drop in IE 5.5 and 6 -- don't know about
> IE7, as I don't have that. Right now, I want to get it looking right in 5.5
> and 6 (IE). The page is at:
>
> http://www.robertsmart.ca/ZZnew/index.html
>
> I don't know why the #content is not floating up beside the #menu. There is
> more than enough room for it to sit there. It is inside #wrapper which
> contains both #menu and #content (both floated left.
>
> Can someone please let me know what bug this is so i can find a solution.
>
> Thanks in advance. I appreciate you help.
>
> Sincerely,
>
> Sol Sinclair
> __
> 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] padding in vertical menu

[Kevin A. Cameron]

line 250 of style.css
.left_primary p, #subcontent li {

   1. padding: 0 0 0.675em 0;

}

That might be your problem.

Kevin


On Fri, Apr 22, 2011 at 1:35 PM, Martin  wrote:

> Hi there,
>
> I'm trying to do a vertical menu. The thing I'm struggling with is that
> there is some padding/margin between the  elements. How can I get rid of
> it?
> I'm no expert on css, but there shouldn't be any padding there:)
> Here's the page in question:
> http://www.slackword.net/am/qualifications.html
>
> It's at the bottom on the left hand side.
>
> thanks
>
> regards
> Martin
> __
> 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] problem with "overflow: visible" under IE8 resizing the containing node

[Kevin A. Cameron]

Is the doctype on line 1?

Kevin
__
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] Reflection effect

[Kevin A. Cameron]

This raises an interesting question: the reflected text in HTML or CSS?

Arguments could be made both ways: In CSS is good as it is a visual flourish
(not content). In HTML is good as then it keeps the CSS generic/reusable.

Perhaps this is a good use of an inline style (for the
content:"blah"portion). Oh wait, you can't do an inline style for a
pseudo element, can
you...?

Kevin


On Fri, Apr 15, 2011 at 11:42 AM, Alan Gresley  wrote:

> On 16/04/2011 4:16 AM, Tim Climis wrote:
>
>> Yeah... I was about to point out the same thing.  A 180 degree
>> rotation is not the same as a vertical reflection.  The "e" should be
>> below the "e", not the "s."
>>
>> Really, to get the desired effect, you'd want transform: scaley(-1);
>> It works in webkit.  Haven't tried anything else.
>>
>> ---Tim
>>
>
>
> This is to simple. Sorry Gabriele. Try the below and the text is truely
> mirrored. Also you don't need another element.
>
>
> 
>
> 
>
> h1 {
>text-align: center;
>font-size: 200%;
>font: normal 6em Impact, sans-serif;
>position:relative;
>line-height: 0.9;
>color: #333;
> }
>
> h1::after {
>-webkit-transform: rotateX(180deg);
>left:0;
>right:0;
>top: 100%;
>position:absolute;
>content: 'Test';
>color: #999;
>opacity: 0.3;
> }
>
> 
>
> Test
>
>
>
> --
> Alan http://css-class.com/
>
> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
> __
>
> 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] CSS navigation/"menu"/selection

[Kevin A. Cameron]

Thanks all :)

Definitely imperfect, which I'll correct sometime when I get my portfolio up
and together.

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

Re: [css-d] CSS navigation/"menu"/selection

[Kevin A. Cameron]

Check out this:
http://www.kacevisual.com/files/CSSContentSlide/

Something I put together
to emulate a Flash site a client had asked me to recreate. It uses a single
div with a fixed height with overflow:hidden, and the content in divs with
page jumps.

Kevin
__
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 Issue with IE8

[Kevin A. Cameron]

Have a link to a working example? Would be easier to trouble shoot.

Kevin
__
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] Web Pages Shift

[Kevin A. Cameron]

I think this is acceptable and expected behaviour, and not something that
needs to be 'fixed'. But to each their own... :)

Kevin


On Wed, Mar 30, 2011 at 10:20 AM, David Hucklesby wrote:

> On 3/30/11 12:57 AM, Markus Ernst wrote:
>
>> Am 30.03.2011 09:25 schrieb PL:
>>
>>> Bob,
>>>
>> [...]
>
>
>>> html, body { height: 100%; margin: 0 0 1px; padding: 0; }
>>>
>>> But I will do a bit of research to discover what this is all
>>> about.
>>>
>>
>> It is not too complicated:
>>
> [...]
>
>  - The CSS rules you provide give the page a height of 100% of the
>> viewport, + a margin of 1px, which makes a total height of 1px more
>> than the viewport height. Like that you force a scrollbar even if
>> there would be none necessary.
>>
>
> Another possibility that works slightly differently, giving a "ghost"
> scroll bar on short pages (like in IE) -
>
> html {
>  overflow-y: scroll;
> }
>
> --
> 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] how the page comes up in IE

[Kevin A. Cameron]

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

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

Kevin


On Thu, Mar 31, 2011 at 11:52 AM, Sandy  wrote:

> hey all,
>
> I have a problem in ie that I hope you can help with
>
> http://burlmannconstruction.com/test/
> http://burlmannconstruction.com/test/css/burlmann.css
>
> the client is bothered by how the site comes up. Sometimes the background
> image loads right away, other times you see a flash of solid gray background
> colour before it comes up.
>
> also, intermittently the #wrapper div displays right at the top of the
> screen and then pops down 20px to where it goes.
>
> Is there anything I can do about that?
>
> Thanks,
> Sandy
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-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 display problem

[Kevin A. Cameron]

- Try floating the img left, and add something to clear the parent div.
- Or putting the cork board before the image, which seems contrary to normal
flow, but with the cork board floated right, the img shouldn't bump down.

Kevin


On Thu, Mar 24, 2011 at 1:26 PM, Rory Bernstein wrote:

> On 3/23/11 5:28 PM, Rory Bernstein wrote:
> > On this page:
> > http://motherloadshow.com/
> >
> > There is a div called id="bulletin_board" that should display an image of
> papers pinned to a cork board ...>
> >
> > Thanks, Rory
>
>
> Philip Taylor kindly sent me this screenshot showing how the bulletin board
> content gets shifted vertically downward (see URL below). That box with the
> cork background and text that says, "this hilarious..." should be up
> directly above where it shows up in the screenshot, in the dark blue box.
>
> http://rorybernstein.com/motherload_ie_problem.jpg
>
> There have been a few responses about this problem, but no solution yet.  :
> (
>
> Can anyone tell me what is wrong with the code that makes the bulletin
> board move down in some versions of IE? Thanks again!  Rory
> __
> 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] Same CSS, Same Browser But Looks Different Locally/Online

[Kevin A. Cameron]

Wait, are you comparing the preview in Dreamweaver to what you see in a
browser? I don't use Dreamweaver, but IIRC the appearance of the preview
should be taken with a grain of salt, and to look at the page in whatever
browsers you are planning to support.

Kevin


On Thu, Mar 24, 2011 at 11:45 AM, Chetan Crasta wrote:

> Install Firebug and then inspect the CSS that is applied to the
> elements in question.
>
> Regards,
> Chetan Crasta
> __
> 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] Ignore white-space between inline and/or inline-block elements in WebKit

[Kevin A. Cameron]

Could float:left; each span.

Kevin


On Sat, Mar 19, 2011 at 6:16 AM, Jarek Foksa  wrote:

> > Perhaps something with the flex-box model might help you?
> > for example: http://help.dottoro.com/lckcfgbc.php
> > there are many more examples floating around.
>
> Thanks, this seems to be the most elegant solution. The only caveat is
> that the children must be either block-level elements or have display
> set to block in CSS.
>
> 
>  A
>  B
>  C
> 
>
> .text {
>  display: -webkit-box;
> }
> __
> 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 Background Position

[Kevin A. Cameron]

So looks like it was an issue with overflow: hidden and text-indent.
IE<8 still considers the element to be be large enough to enclose the text,
so the background-position: right 0 means the BG is off screen. Adding an
IE7 *+html {overflow:visible} fixed the issue for this browser.

Fixed version up if anyone's interested :) Comments/criticism always
appreciated.

http://www.kacevisual.com/files/Anime-Planet/drafts/lovehate/lovehate.html

Kevin
__
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 Background Position

[Kevin A. Cameron]

Thanks John,

Anyone using IE7?

Kevin
__
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 Background Position

[Kevin A. Cameron]

Oops, wacky Doctype. Updated with same results:
http://www.kacevisual.com/files/Anime-Planet/drafts/lovehate/lovehate.html

Kevin


On Fri, Mar 18, 2011 at 8:51 AM, "G.Sørtun"  wrote:

> On 18.03.2011 06:05, Kevin A. Cameron wrote:
>
>> Can someone explain why the background image of the right button is not
>> showing correctly in certain versions of IE?
>> http://www.kacevisual.com/files/Anime-Planet/drafts/lovehate/lovehate.html
>>
>
> For that page all IE versions are in quirks mode, and have the same missing
> right bg-image.
> Trigger standards mode first, and then test.
>
> 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-d] IE Background Position

[Kevin A. Cameron]

Can someone explain why the background image of the right button is not
showing correctly in certain versions of IE?
http://www.kacevisual.com/files/Anime-Planet/drafts/lovehate/lovehate.html

In most other browsers the buttons line up correctly :
http://i.imgur.com/eRUyT.png
Works in IE9, but not IE8 (from what I've been told), though works in IE9
with IE8 browser mode, but not when in IE7 mode.

Kevin
__
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] s now a legitimate presentational device for layout according to W3C

[Kevin A. Cameron]

I think in the low-end mobile space this makes sense. Those devices for the
most part don't support a lot of the CSS layout methods that are used in the
high-end mobile and desktop environments. Though it's not like those devices
would recognize role="presentation" either...

Interesting info, thanks for posting it.

Kevin
__
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] Stop supporting IE 6 and 7

[Kevin A. Cameron]

Thread, must, die

Kevin
__
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] Centring headings of various lengths

[Kevin A. Cameron]

Wait, what? How can you center text in an inline element? If inline the
element is the same size of the text, so technically it's centered, aligned
left/right and justified! :)

Just to make sure we are on the same page, I'm talking about this:
My Centered Text

not this:

My Centered Text


Kevin

And yes, I reply failed again...

On Wed, Feb 23, 2011 at 3:50 PM, Tim Dawson  wrote:

> Good question. In theory it doesn't work on block elements unless you also
> apply 'display: inline', but in practice it does (in Firefox, at least, I've
> yet to try others).
>
> Tim
>
>
> On 23/02/2011 20:55, Kevin A. Cameron wrote:
>
>> What's wrong with text-align:center on the header element itself?
>>
>> Kevin
>>
>
> --
> 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/

Re: [css-d] font-size html

[Kevin A. Cameron]

Just as a note, I ('and many other people') like small fonts in some cases.
Anything between 10px and 25px can be appropriate for main copy depending on
it's usage. You can't accommodate all users. And although
maximum readability is important, small compromises to meet design needs is
acceptable and expected.

Where you declare font-size and what size it is, is not as important as it
being able to scale up/down properly in the browser (ie, not breaking the
layout when a user does this).

Line height, font-face/weight, letter spacing, colour, line width and rag
can all play a factor in how readable your text is (and a million other
typographic terms I probably don't know).

Kevin

PS - list mod: can you change the list options so the 'from' field is the
mailing list instead of the recent poster?
__
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] open blockqoute issue - open and close qoutes placement issue resolved/code coming soon

[Kevin A. Cameron]

In most cases, the best practice is to leave line-height unitless, ie
line-height:1.3;

Some info from the legendary Eric Meyer himself:
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Kevin


On Wed, Feb 2, 2011 at 12:42 PM, Matthew P. Johnson wrote:

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of ??
> Sent: Wednesday, February 02, 2011 11:34 AM
> To: Matthew P. Johnson
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] open blockqoute issue
>
> Yeah, Philippe is right.
>
> put
>
>  line-height: 1.3em;
> or
>  line-height: 130%;
>
> in the blockquote CSS selector
>
> then you know what to do later.
>
> Wish it works!
>
> Best
> ~d
>
>
> [Matthew P. Johnson]  OK I think I have it. Let me format the sucker and I
> will up the changes. Thanks guys/girls. :)
>
> __
> 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] Need some CSS help

[Kevin A. Cameron]

You need a doctype.

try:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

Needs to be on LINE ONE of all html pages.

Kevin


On Tue, Feb 1, 2011 at 3:46 PM, Mark Collins  wrote:

> Okay I did that and now it shows up fine in IE7 except my fonts are
> extremely huge...
>
> I've tried editing the CSS to no avail.
>
> Thanks,
>
> Mark
>
> On 1/27/2011 6:31 PM, Kevin A. Cameron wrote:
> > Not to be a jerk, but first step is to validate your code, with any
> > luck that will solve the problem!
> >
> >
> http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nowitnesses.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
> > <
> http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nowitnesses.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
> >
> >
> > Kevin
> >
> >
> > On Thu, Jan 27, 2011 at 4:13 PM, Mark Collins  > <mailto:msheek...@gmail.com>> wrote:
> >
> > I'm having trouble with my website, http://www.nowitnesses.org/.
> > It comes up
> > fine in every browser I've tested except IE7. Then it cuts off the
> > page
> > right after the overall_header template code in PHPBB3.
> >
> > Could someone look at it and tell me how I screwed it up?
> >
> > Thanks,
> >
> > Mark
> >
> > UN Issues Joint Statement on
> > WikiLeaks<
> http://www.cidh.oas.org/relatoria/showarticle.asp?artID=829&lID=1
> > <http://www.cidh.oas.org/relatoria/showarticle.asp?artID=829&lID=1
> >>-
> > Inter-American Commission on Human Rights
> > "For every complicated problem there is a solution that is simple,
> > direct,
> > understandable, and wrong". - H. L. Mencken
> >
> > "The Dunning–Kruger effect is a cognitive bias in which an
> > unskilled person
> > makes poor decisions and reaches erroneous conclusions, but their
> > incompetence denies them the metacognitive ability to realize their
> > mistakes." - Wikipedia
> >
> > Mark Collins, US2002045450
> > ADC Tech, Austin Camarilla: http://www.nowitnesses.org/
> >
> __
> > css-discuss [css-d@lists.css-discuss.org
> > <mailto: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://evolt.org> --
> > http://www.evolt.org/help_support_evolt/
> >
> >
>
>
> --
> "For every complicated problem there is a solution that is simple, direct,
> understandable, and wrong". - H. L. Mencken
> "The Dunning–Kruger effect is a cognitive bias in which an unskilled person
> makes poor decisions and reaches erroneous conclusions, but their
> incompetence denies them the metacognitive ability to realize their
> mistakes." - Wikipedia
>
>
> Mark Collins, US2002045450
> ADC Tech, Austin Camarilla: http://www.nowitnesses.org/
>
>
> __
> 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] Graphic background issue

[Kevin A. Cameron]

Not quite:http://blogs.sitepoint.com/2007/09/18/png8-the-clear-winner/

PNG-8 have the possibility of multiple translucent palette entries, but only
Fireworks has a PNG-8 export that supports this. Or use smush.it to convert
down.

In browsers that support PNG alpha you get the full translucency, and in
http://blogs.sitepoint.com/2007/09/18/png8-the-clear-winner/>
Kevin


On Mon, Jan 24, 2011 at 9:02 AM, "G.Sørtun"  wrote:

>
>  I'm thinking (accurately or not  :)  that an 8-bit PNG offers translucency
>> (if that's the right word) if the original file has it. With a smaller file
>> size than 24-bit. Right? Applicable?
>>
>
> An 8-bit PNG is somewhat like a "refined GIF" - transparency is "on/off".
>
> Example...
> 
>
> ...and we are drifting off declared list-topic (CSS) now.
>
> 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] A CSS calendar with an unordered list

[Kevin A. Cameron]

IE 9 beta has IE7/8 rendering along with compatibility mode. I've used it a
lot, though I've never done a side-by-side with the real browsers.

Kevin
__
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] (no subject)

[Kevin A. Cameron]

Post link.
Could be 1 of many things: linking local files (that are on your computer
but no one else's), invalid CSS or markup, different browser/version...

Kevin


On Sat, Jan 15, 2011 at 11:33 AM, amitabha ghosh  wrote:

> I have designed a page layout in css by using s. but i am finding
> while
> opening in another browser computer it is breaking all the designs. can
> anybody help me to sort it out?
> --
> amitabhaghosh
> __
> 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] [Test]: Positioning an object element

[Kevin A. Cameron]

Dang it, did it again - sent to individual and not the list. What's up with
that?!

Not sure if the W3 browser stats are accurate, but ignoring chrome (and or
> safari) seems to be ignoring a large % of potential users...
>
>  2010 Internet 
> Explorer
> Firefox  
> Chrome
> Safari  
> OperaDecember27.5 
> %43.5%22.4%3.8%2.2%
>
> Kevin
>
> Sent from Gmail in google chrome ;)
>
>
> On Wed, Jan 12, 2011 at 11:09 AM, Philip Taylor (Webmaster, Ret'd) <
> p.tay...@rhul.ac.uk> wrote:
>
>>
>>
>> Gabriele Romanato wrote:
>>
>>  Don't get me wrong but ... What is the percentage of use of Seamonkey?
>>> ;-)
>>> Philip, as a rule of thumb, you should always test in major league
>>> browsers, like IE, Firefox, Opera, Safari and Chrome.
>>>
>>
>> Of course, it /could/ be something to with the following,
>> and nothing to do with my choice of browser at all :
>>
>>  Validation Output: 5 Errors
>>>
>>>   1. Error Line 44, Column 37: Element object is missing one or more of
>>> the following attributes: data, type.
>>>
>>>  http://www.yout…
>>>
>>>   2. Error Line 44, Column 128: Stray end tag param.
>>>
>>>  …nFl0nlHaWa4?fs=1&hl=en_US">>> name="allowFullScreen" value="tr…
>>>
>>>   3. Error Line 44, Column 179: Stray end tag param.
>>>
>>>  …"allowFullScreen" value="true">>> name="allowscriptaccess" value="…
>>>
>>>   4. Error Line 44, Column 234: Stray end tag param.
>>>
>>>  …n" value="true">>> value="always">
>>>
>>
>>5. Error Line 45, Column 192: Stray end tag embed.
>>>
>>>  …wscriptaccess="always" allowfullscreen="true" width="480"
>>> height="385">
>>>
>>
>> ** Phil.
>> --
>> Not sent from my i-Pad, i-Phone, Blackberry, Blueberry, or any
>> such similar poseurs' toy, none of which would I be seen dead
>> with even if they came free with every packet of cornflakes.
>> __
>> 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] Right column drooping

[Kevin A. Cameron]

Guess I should send this to the list, not just the individual...

rightcopy and leftcopy both need to be floated; either both left, or one
> left and the other right. And get rid of the margin on rightcopy.
>
> But then the container div wont clear. Two simple ways to accomplish this.
>
> One way is to have a clearing div after right/left copy:
>  (.clear { clear: both; } )
>
> The other is to apply a clearing class to the container such as the one
> from OOCSS:
> .clear-fix{clear:both;display:block;visibility:hidden;overflow:hidden;height:0
> !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x
> x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
> x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
> x x x x x ";}
>
>
> Kevin
>
__
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] HTML, CSS, JavaScript: Model-View-Controller

[Kevin A. Cameron]

To be honest this 'discussion' on the merits of this post was a far greater
waste of time than the post in question! :P

Signal to noise ratio of this list tilts to the wrong side sometimes...

Kevin


On Wed, Jan 5, 2011 at 1:23 PM, David Laakso
wrote:

> On 1/5/11 4:02 PM, Gabriele Romanato wrote:
>
>>
>> I'll stop it. From now on, no more posts from my blog.
>>
>>
>>
>>
> Well, no need to throw yourself through a closed window on the top floor of
> a tall building...:-) .
> Your "on-topic" posts to CSS-D are always informative and thought
> provoking. I do hope you will keep those coming...
>
> Best,
> ~quasimodo
> Paris
>
> --
> http://chelseacreekstudio.com/
> http://chelseacreekstudio.com/fa/
>
>
> __
> 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/