Re: [css-d] Media queries

[Tim Arnold]

On Wed, Jun 22, 2016 at 11:06 AM Tom Livingston  wrote:

> List,
>
> Do you use separate css (or LESS or Sass) files for each breakpoint, or
> MQ's blended in with the rest? Why?
>
> Up to this point, I have always used separate scss files for each
> breakpoint and used Sass imports to make them into a single css file. With
> changes made to our browser support here where I work, I am now wondering
> if I should change my method and if there are any significant efficiencies
> with working MQs in with the rest of my styles in a single scss file.
>
> Thoughts?
>
>
>
I break all my SASS files out into separate components now (navigation,
header, footer, forms, feature-widget, etc.) so it really only makes sense
to also include the mediaqueries for each component in the same file. The
question of whether to do them inline as I need them, or group them all
together in a single block for each breakpoint is still kind of up in the
air. Kind of depends on how big the component file is and whether it's more
clear to group all the breakpoint rules together, or mix them all in.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 technique for: Any number of columns, plus fixed margin, in a responsive parent container

[Tim Arnold]

You can download a customized bootstrap (http://getbootstrap.com/customize/),
or simply comment out the components that you don't want to use if using
LESS or SASS:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss
https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less

Commenting out the "@import "bootstrap/grid";" is what I've done when
replacing it.

NOTE: this only, as far as I know, removes the CSS related to those
components. I believe you get the same JS file when you customize your
download.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 technique for: Any number of columns, plus fixed margin, in a responsive parent container

[Tim Arnold]

On Fri, Jan 22, 2016 at 5:50 AM Karl DeSaulniers 
wrote:

> There is also...
>
> http://getskeleton.com
>
> ..which is about as basic a grid system.
> Found this one when I had gotten tired of bootstrap's bloat.
>
>
I agree with Karl that Bootstrap is overkill if you're just looking for a
grid system and Skeleton is a really good one. I use Bootstrap a lot, but
only for sites where I'm going to want to use more of the framework than
just the grid (heck, I've even used bootstrap for its UI patterns but
swapped in a different grid system when I wanted something more flexible).

Also check out https://github.com/at-import/Singularity if you like SASS
and don't want to have to add any classes to your markup (as Skeleton and
Bootstrap both require).

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 help with proper HTML markup

[Tim Arnold]

On Wed Feb 11 2015 at 6:30:09 AM Adam Ambrus  wrote:

> The specific part I would like the advice on is the short CV part
> underneath the white header. It seems easiest to use a , however
>
>
Hey Adam,
Since your question is specifically about markup, rather than CSS, you'd be
much better served posting to a list concerned with those questions.  Check
the "Off Topic" page for suggestions about where to post HTML questions:
http://css-discuss.incutio.com/wiki/Off_Topic
Best,
Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Floats

[Tim Arnold]

On Sat Jan 17 2015 at 8:42:22 AM Philip Taylor  wrote:



Crest Christopher wrote:

> How come, with or without the pseudo-element of clearing float to the
> left, it doesn't appear to make a difference ? Everything still floats
> to the left, shouldn't some of the class=box be floating to the right,
> especially the orange box ?
>
> [Link ]

Question 1 : which element has class "after-box" ?
Question 2 : in which browser(s) is the orange box not rendered as
floating right ?

Philip Taylor
__



I don't see a pseudo-element in that jsfiddle. All blue boxes are floating
left, orange box is floating right. Just as expected from the code. Perhaps
the fiddle has changed since you posted the question, Crest Cristopher?


Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 Inconsistencies

[Tim Arnold]

On Sat Dec 20 2014 at 4:49:08 PM Crest Christopher <
crestchristop...@gmail.com> wrote:

> I'd like to know what is wrong, that this
> 
> page, doesn't look the same in IE 7 / 8 so I can be on the correct path
> to fix it ?
>
>
At a glance, I'd suggest the culprit is your Media Queries. You are using
mobile first (min-width) MQs. Since MQs are not supported by IE7&8 none of
the styles within them are being read.  If you need to support these
browsers, you'll have to either switch to max-width queries, or include
those styles (with no media queries) in conditional comments as well.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Tablets use Cursor for Touch ?

[Tim Arnold]

On Wed Dec 03 2014 at 12:13:56 PM Tom Livingston  wrote:

> I've never heard of a touch screen tablet with a cursor.
> On Wed, Dec 3, 2014 at 12:11 PM Crest Christopher <
> crestchristop...@gmail.com> wrote:
>
> > Do most tablets use a "cursor" for touch screen ? If so then :hover
> > should work, correct, unlike phones ? The only exception may be iPad !
> >
> > Christopher
>


> I think Christopher is referring to the "cursor" css property. Yes, I do
> believe that setting "cursor: pointer" on an element *should* help
> touchscreens to translate ":hover" to "click" (or is it "touchstart"?).
> Displaying children on click, for example, when your desktop browser shows
> then on hover.
>
> Tim
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

Though this discussion is interesting (as it is every 6 months when it
comes back again) it isn't really on the topic of CSS. Any other thoughts
for Christopher about media queries?

On Tue, Nov 25, 2014, 6:58 AM Philip Taylor  wrote:

> I don't seek to excuse such an error for one second, but there is an
> important difference between the two :  the Wordpress site is written
> in XHTML 1.0 Transitional, a stable specification against which the
> Validator can check pages accurately; the W3C site, on the other hand,
> is written in HTML 5, a "work in progress", and as both the draft
> specification and the validator can (and do) change on a daily basis,
> validation here is very much a moving target.  One error is indeed
> inexcusable :
>
> > Error Line 9, Column 39: No space between attributes.
> > http://validator.w3.org/check?uri=http://www.w3.org/blog/
> dpub/2014/10/01/new-draft-for-the-requirements-for-latin-
> text-layout-and-pagination-published/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

On Nov 23, 2014 11:01 AM, "Tom Livingston"  wrote:
>
> While testing on devices is important, you get a long way using the dev
tools in Chrome or Firefox.

The new dev tools in Chrome also provides some pretty amazing device
emulation. It's certainly not perfect but miles closer to real than simply
resizing the viewport as you work which, as Tom says, will get you a long
way.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

On Sunday, November 23, 2014, Crest Christopher 
wrote:

> I don't have any site analytics, although that probably does help narrow
> things down, although you never know who will visit your site on a device
> that is not in your analytic.
>
> This is the confusing part Tim :)
> You say focus on the most popular devices but be sure your design works
> well at any width !
>
> Christopher
>
>
>
Absolutely correct , Christopher ;)  Make sure it works at any width
regardless of device and also focus on popular devices.  This is the
dichotomy I am faced with every day. When I have control over the design it
tends to be more simple, but working on a team it's never so
straightforward.

Making the site flow perfectly at every width regardless of device is the
ideal I work toward. When I have to rely on MQs and trickier tricks, I
recognize the failure, try to do my best, and test on devices.

It is confusing, you are totally right. The one should make the other
unnecessary, but things are often more complicated. And fun!

Tim


-- 

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

Re: [css-d] Don't miss a space

[Tim Arnold]

On Nov 23, 2014 6:52 AM, "Philip Taylor"  wrote:
>
>
>
> David Laakso wrote:
>
>> No issue seen this end Windows SeaMonkey/2.30.
>
>
> Unless your browser  / geometry / font settings / font scaling /  screen
resolution / a million other possibilities are identical to mine, David,
you may not see the same artifacts.  My point was not that all viewers will
see the artifacts that I did, but that others /might/, and therefore an
investigation into what triggers that particular aberrant behaviour might
be worthwhile.  I find it trivial to replicate by starting with my browser
full-screen and then slowly narrowing it until the panels start to overlap.
>
> ** Phil.

You are correct Phil, there are a few widths on the way down where things
overlap a bit. There is an A/B test currently running that displays a
different herospace image and layout of the form and three blocks. As a
result of having to pull off three designs with the same markup there are
simply more variables than we could reasonably account for. As a result I
accepted that there would be some discrepancies (as you have observed) and
as long as they did not prevent the user from interacting with the form
and, more importantly, did not occur on the actual devices we tested on,
that they were acceptable. It is definitely not ideal.

This site was a pretty fun challenge: The design is not mine and Drupal
presents some interesting hurdles as far as the markup goes. Trying to pull
this off with those constraints was actually pretty fun.

Come Monday, I'll see if I can dial in the behavior you noted, Phil. Thanks
for the feedback.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

On Saturday, November 22, 2014, Crest Christopher <
crestchristop...@gmail.com> wrote:

> In other words I need to test my site on many difference devices until as
> you said, the layout looks poor, hence all the mobile testing sites online.
> I didn't expect to already begin to need it, I suppose it came sooner then
> later !
>
> Christopher
>
> I wouldn't even worry about testing on devices at first. Just resize your
browser until problems arise then add MQ break points to address those
problems. Test on devices based on what information you can glean from site
analytics (if you have them) to be sure things are ok on those devices.
Otherwise just focus on the most popular devices but be sure your design
works well at ANY width. Keep the design as simple as possible and you will
have a much easier job.

Tim


-- 

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

Re: [css-d] Don't miss a space

[Tim Arnold]

On Sat, Nov 22, 2014 at 9:51 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

>  (why the reference to Steve Martin ?)
>
>
Most likely because it's Saturday night and I am very, very old. But
specifically the reference to "getting small" made me think of
http://en.wikipedia.org/wiki/Let%27s_Get_Small and I couldn't stop myself.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

On Sat, Nov 22, 2014 at 9:14 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> Percentage values scale the width of the viewport unlike pixel values.
>
> Tom / I assume when you say use max-width you mean;
>
> img {
> max-width: 123px
> }
>
> If so why do that, if you know the image size just give the container the
> size of the image ?
>
> Christopher
>

Christopher,

If you just give the image "max-width: 100%" it will only start "getting
small" (thank you, Steve Martin) when its container forces it to. What do
you mean by "scale the width of the viewport?" Percentage widths on
containers have no affect on the width of the viewport, they scale
proportionally to the viewport.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

On Sat, Nov 22, 2014 at 8:47 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> Percentages does help make boxes/containers liquid but if you will be
> using boxes with images that have a limited width then percentages won't
> do, instead I'm left to do multiple MQ, arghh, ah well.
>
>
>
Hey Christoper,

Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Don't miss a space

[Tim Arnold]

I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.

I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.

This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).

Note the "Find Your Rate" form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)

Good luck!
Tim

On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
 wrote:
> I don't understand, I need multiple MQ ?
>
> Christopher
>
>> Tom Livingston 
>> Saturday, November 22, 2014 7:50 PM
>> This will be handled by the min-width MQs, as mentioned before. Base
>> styles for small screens like iPhone. Then, for example, the next MQ at 480
>> for landscape iPhone. The gap between base and 480 will take care of the
>> different width phones.
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

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

Re: [css-d] IE8/Netrenderer reveals huge problems

[Tim Arnold]

On Tue, Sep 16, 2014 at 3:50 PM, John  wrote:
> I just looked at a site I’m developing in IE 8 using Netrender and it looks 
> like an 18-car pile up…very not pretty. IE 9, 10, 11 appear to draw the page 
> the way other browsers do.
>
> Is IE8 a browser of concern anymore, IOW, should I work hard to fix whatever 
> is messing up my site in IE8, or will this mess up my site in modern, 
> well-behaved browsers?
>
> Thanks for any thoughts on this!
>
> John
>
> for the curious:
>
> http://netrenderer.com/?browser=ie8&url=http://www.coffeeonmars.com/170_su/client/category/design/
> __



I'm guessing the pile-up is due to using REMs for layout (or
anything). IE8 doesn't know what to do with a REM.

That said, I always look to the analytics to determine browser
support. Not general, internet-wide, analytics, but ones specific to
the audience I'm building for. I mostly work for non-profits and
occasionally come across cases where "decent" IE8 support is required.

Tim



-- 

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

Re: [css-d] Ready for Pre-processors?

[Tim Arnold]

On Apr 24, 2014 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!

I'd also vote no. Using SASS for more than a year now, I've found that
issues I run in to have less less to do with CSS per se, than SASS or
Compass, and would prefer this list purely CSS related.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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' ?!

[Tim Arnold]

On Sun, Mar 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%.
>

If you really need to have that 100% width and the padding on that
element, either adjust the width down so the padding and border don't
make it larger than 100%, or use "box-sizing: border-box;" so that the
width stays what you want it to regardless of padding.  Be sure to
check browser support and add any vendor prefixes needed!

-- 

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

Re: [css-d] Z-index or stacking issue

[Tim Arnold]

On Mon, Jan 13, 2014 at 5:24 AM, Mike  wrote:
> Good morning,
>
> I have a small problem with a site which I hope someone can assist.
>
> The site is www.deveron.org and the problem concerns the horizontal and
> left-hand navigation lists. I have just separated some of the navigation
> into the two menus from one horizontal one. Now the drop-down from the
> horizontal menu falls behind the left-hand menu and is inaccessible.
>
> I am assuming this is a relatively minor problem concerning the stacking
> contexts of the two lists and/or the z-index. The drop-down menu is using a
> set of scripts from the Live Web Institute and there are some slightly
> strange z-index values.
>
> Any help appreciated. I have tried looking using Firebug but so far can't
> see what needs to be changed.
>
> regards,
> Mike

It looks like you are trying to z-index the "ul.dropdown ul" higher to
fix things.  Instead, drop some "z-index: 600" on "div#menu".

Better yet, you can just get rid of the z-indexing that you've done
and you should be ok.  If you just take that "597" index off of
"ul.dropdown" entirely (which is applying to both topnav and lefnav
subs) then you should be fine.

Tim



-- 

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

Re: [css-d] The Simpsons in CSS

[Tim Arnold]

On Wed, Nov 13, 2013 at 2:15 AM, MiB  wrote:
>
> nov 13 2013 06.30 Theresa Jennings:
>
>> I think they're more proof of concept than anything else.
>
> Of course, but what about in three years? Someone will always be going there 
> first.

It's possible that graphics apps will eventually have an option to
export something like this, but I lean toward "probably not."  More
likely (particularly since it's already happening with Adobe) is that
illustrations will export to .  Illustrator can already export
to SVG which will probably fill in where  does not.

I could totally be wrong, but I think that those two are better for
that.  I love the CSS in the example, but am really not a fan of the
hundreds of empty divs with unique classes needed to accomplish it.
-- 

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

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

[Tim Arnold]

On Wed, Nov 13, 2013 at 7:26 AM, william drescher
 wrote:

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

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

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

700px would be the "breakpoint"

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

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

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

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

Tim




-- 

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

Re: [css-d] The Simpsons in CSS

[Tim Arnold]

On Tue, Nov 12, 2013 at 1:14 PM, COM  wrote:
> This is cool and all, but…seriously, is CSS being touted as an illustration 
> tool?
> Am I missing a concept here?
>
> I am very impressed by the samples shown…
>

I think impressing was the main goal.  That, and to an an exercise in "what if?"

Tim

-- 

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

Re: [css-d] Where do you cut-off your browser support?

[Tim Arnold]

On Sat, Sep 21, 2013 at 3:52 PM, John D  wrote:
> It's time to dump IE8 and below.  People are buying new machines and they all 
> come with new browsers like IE9 and above.  IE10 is becoming the de-facto 
> standard these days IMO.
>
> By all means support FF version 15 and above.
>
>> My question is, how would you all approach this? Right now I'm thinking IE
>> 7 can't be ignored, but I'd have to consider time/value when deciding what
>> is acceptable.
>>
>> Thoughts?
>>
>> --
>> Chris Rockwell

I'd love to agree with dumping IE8, but Windows XP is still on way too
many computers to ignore.  And IE8 is the highest you can go on XP.

http://news.softpedia.com/news/Windows-XP-Remains-the-Second-Most-Popular-Operating-System-in-the-World-373001.shtml

http://www.techradar.com/us/news/software/operating-systems/windows-8-outpaces-vista-takes-third-on-os-popularity-podium-1162980

http://thenextweb.com/insider/2013/09/01/windows-8-rockets-to-7-41-market-share-as-windows-xp-falls-below-35-mark/

http://www.netmarketshare.com/report.aspx?qprid=11&qpaf=&qpcustom=Windows+XP&qpcustomb=0



-- 

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

Re: [css-d] responsive video

[Tim Arnold]

On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman  wrote:
> guys, thanks, but i'm pretty thick
> i've tried a few times with no success.
>
> here's the page: http://decal-bone.com/lab_stories.html
>
> the video lives in the center column under the text
>
> html for the vid:
>
> 
>  src="//www.youtube.com/embed/wbIe9tXo5wM" frameborder="0" 
> allowfullscreen="">
> 
>
> css in the style sheet:
>
> .video-container {
> position: relative;
> padding-bottom: 56.25%;
> padding-top: 30px; height: 0; overflow: hidden;
> }
>
> .video-container iframe,
> .video-container object,
> .video-container embed {
> position: absolute;
> top: 0;
> left: 0;
> width: 100%;
> height: 100%;
> }
>
>
> don't see where i'm messing up. insight appreciated
>
> ron
>
>
>

Get rid of that comma at the end of this rule.  I would have thought
it would still work, but it's definitely not being applied and when I
add the same rule without the comma, things happen.

div#content div div .video-container iframe, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



-- 

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

Re: [css-d] Implementing Responsive Design

[Tim Arnold]

On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole  wrote:
>
> FYI only recently has the 'smart phone' (all MQ capable) sales passed the 
> 'feature phone' in sales percentage.
>
> Many present day low end 'feature phones' and most older (sold in 2009-2012) 
> 'feature phones' lack the MQ support.
>
> As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are 
> much more powerful than the 'smart phones' of 2011 and before.
>

Keep in mind, if doing a mobile first approach, that IE8 (not exactly
an ancient browser) does not support media queries at all without a
polyfill.

Tim

-- 

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

Re: [css-d] background displays locally, but not remotely

[Tim Arnold]

On Wed, Jun 12, 2013 at 1:17 PM, Ron Zisman  wrote:
> http://ricochet.org/evolutionery.com/index.html
>
> stupidly simple, a background image with 2 links… only the links show (not bg 
> imgs)
> styles in the head of doc.
>
> thanks in advance
> ron

The path to the images that do show up:
http://ricochet.org/evolutionery.com/images/contact.jpg  Great!
Works!
The path to the image referenced in the css:
http://ricochet.org/evolutionery.com/images/index.jpg  Not Great!
File Not Found!

Move that "index.jpg" image up to the same directory that
"contact.jpg" is in and it should work.

tim



-- 

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

Re: [css-d] Question regarding the use of

[Tim Arnold]

On Thu, Apr 18, 2013 at 10:39 AM, Nancy Johnson  wrote:
>
> When I first went live with a website a few months ago, the following
> code validated and now it doesn't.   Why?
>
> 
>
> Thank you,
>
> Nancy Johnson


Nancy,

I'm not sure why it validated before, but generally ARIA roles do not
pass validation.  I'd just ignore the error in this case and just
ensure that you are using the roles correctly.  If that section is
wrapping your main content, and it contains a heading of some sort (h1
fer example) tag, you're good to go.  Smarter thoughts than mine from
Steve Faulkner:
http://blog.paciellogroup.com/2009/01/how-can-i-validate-xhtml-aria/

Tim


--

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

Re: [css-d] Can You Do This?

[Tim Arnold]

On Tue, Mar 5, 2013 at 9:15 AM, David  wrote:
> Hello, Thank you to all who replied; to my question. Firstly, can someone
> please inform me how replies are made, do you leave previous conversations,
> if so; top-reply; or bottom-reply?


"The list admin(s) will scowl heavily in the direction of any
Jeopardy-style quotations-- that is, putting your answer before the
quoted question to which you're responding-- but won't actually
unsubscribe you for doing it."

This and more, available at http://css-discuss.org/policies.html


-- 

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

Re: [css-d] clear content after non-floating items?

[Tim Arnold]

On Mon, Mar 4, 2013 at 12:15 PM, Laura Valentino  wrote:
> My main menu bar is not supposed to wrap (it doesn't on my 2nd gen ipod
> touch) - but I fear that on some device somewhere, it will wrap. This
> wouldn't be the end of the world except for the ugly way the wrapped menu
> item overlaps the following content. (you can see the effect if you size
> the browser window down far enough for the top menu to wrap - some browsers
> don't shrink that small though, chrome on windows 7 does).
>
> A puzzling thing is that the submenu also wraps, but the following content
> politely gets out of the way of the wrapped item...and I don't see the
> difference between the 2 menus!
>

>
> .mainmenu {
> background-color: #5a83c6;
> height: 2em;
> font-family: amblebold;
> }


>
>
> Best Regards,
> Laura

Take that "height: 2em;" off of ".mainmenu" and it will be able to
grow to what it needs to when items wrap.

-Tim

-- 

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

Re: [css-d] what is h1 small syntax?

[Tim Arnold]

On Fri, Feb 22, 2013 at 2:55 PM, Angela French  wrote:
> Could someone please explain the "small" in the example below:
>
> h1 small {
>   font-size: 24.5px;
> }
>
> I would understand h1.small,  but am confused by the syntax "h1 small"
>
> Thanks,
>
>
>
> Angela French


There is an HTML tag .

So: Big title here followed by a small bit in the same
line




-- 

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

Re: [css-d] white line related to overflow?

[Tim Arnold]

On Fri, Feb 22, 2013 at 10:34 AM, Chip at Caliber Communications
 wrote:
>
>  http://www.rsecllc.com
>
> There is a 1px white space between the nav menu and the image slider that I
> can't get rid of. I've tried all sorts of margin magicry, to no avail. I
> suspect it is related to the {overflow: hidden;} applied to the
> .menu-primary, which is a property leftover from the original theme. I do
> not really understand why it is needed (I don't know what content is
> overflowing), but when I get rid of that, the background disappears and
> reverts to white.
>
> Maybe the white line and the overflow are unrelated, but I am still
> confused by the overflow property, so any insight on that would be much
> appreciated regardless. Thanks very much!
>
> I think this is all the relevant CSS:
>

Sorry if this is a double-post, something went wonky the first time.

Get rid of those  box-shadow styles on the #inner div.  That oughtta do it.

Tim


--

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

Re: [css-d] Horizontal menus

[Tim Arnold]

On Thu, Feb 21, 2013 at 12:27 PM, David Hucklesby  wrote:
>
> On 2/20/13 4:34 PM, Anthony wrote:
>>
>> Hi all
>>
>> I am using a Superfish module for a horizontal menu in my Drupal 7 site.
>> I've currently got it set up so that the last menu item is floated to the
>> right, and there is a gap in between the last item and the second to last
>> menu item.
>>
> [...]
>>
>> What is the best way to space out the horizontal menu items, so that the
>> gaps between them are eaven, but at the same time the width of each of
>> the items as a whole varies?
>>
>
> As I don't know what a "Superfish module" is, it's hard to advise. Can you
> copy the markup and CSS and post it somewhere for us to look at?
>
> Depending on the situation, I'd say that inline-blocks or table display
> properties might work better than floats. OTOH perhaps floats will work fine
> - just declare the last item something like:
>
>   float: none;
>   overflow: hidden;
>
> (The hidden overflow won't work for you if that last item contains a
> sub-menu though. See why we need to view your code?)
> --
> Cordially,
> David
>
>

Superfish is a JS thingamajig to help an othwerwise pure CSS dropdown
nav work with dumb old browsers that don't support :hover on 
elements (http://users.tpg.com.au/j_birch/plugins/superfish/)

The answer to the question will almost certainly be a CSS answer and
not really have anything to do with superfish, per se.  That said,
without a demo as David asks for, there's really not much we can do.

Tim

--

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

Re: [css-d] absolutely positioned div in wordpress theme slides horizontally

[Tim Arnold]

On Tue, Jan 8, 2013 at 11:31 AM, Dina Derenshtein wrote:

> Hi,
>
> I have a problem with several absolutely positioned divs on a wordpress
> site I built based on the Thematic theme. Here is the link to the site:
> http://kasparovchessfoundation.org
>
> The 2 partner logos on the top right, as well as the 'like' button are
> sliding (and running over each other) when the window is re-sized or when
> viewed on a small screen. Also, the div above the image slider, with the
> text, "Kasparov Chess Foundation Inc. is a non-profit educational
> organization supported by charitable donations from concerned individuals
> and corporate sponsors." Needs to be affixed to the right bottom corner of
> the slider.
>
> Here is my code:
> In functions.php
> function partner_logo_1() {
>
> echo 'http://www.kcfe.eu/"; title="Kasparov Chess Foundation
> Europe">';
>
> }
>
> add_action('thematic_header', 'partner_logo_1');
>
>
>
> function partner_logo_2() {
>
> echo 'http://www.kcfafrica.com/en"; title="Kasparov Chess
> Foundation Africa">';
>
> }
>
> add_action('thematic_header', 'partner_logo_2');
>
>
>
> function facebook_like_btn() {
>
> echo ' scrolling="no" frameborder="0" style="border:none; overflow:hidden;
> width:450px; height:21px; position:absolute; right:111px; top:200px;"
> allowTransparency="true">';
>
> }
>
> add_action('thematic_header', 'facebook_like_btn');
>
>
>
>
>
> function wow() {
>
> if ( is_front_page() ) {
>
> ?>
>
> 
>
> 
> }
>
> }
>
> add_action('thematic_abovecontainer', 'wow');
>
>
> function donate(){
>
> if ( is_front_page() ) {
>
> ?>
>
> Kasparov Chess Foundation Inc. is a non-profit
> educational organization supported by http://kasparovchessfoundation.org/?page_id=20";>charitable donations
> from concerned individuals and corporate sponsors.
>
> 
> }
>
> }
>
> add_action('thematic_aboveheader','donate');
>
> In my CSS file:
> #donate {
> background: url(images/donations_back.png) no-repeat;
> font:11px "Trebuchet MS", Helvetica, sans-serif;
> line-height: 20px;
> /*background-color: #DAEFEE;*/
> position:absolute;
> top: 566px;
> right: 13%;
> */right: 466px;*/
> height: 100px;
> width: 290px;
> z-index:;
> padding: 14px;
> padding-top: 12px;
> }
>
> #europe-image {
> background:url("images/europe_logo_04.png") no-repeat transparent;
> height: 103px;
> width: 92px;
> position:absolute;
> cursor: pointer;
> top:85px;
> right: 29%;
> */right:600px;*/
> }
>
> #africa-image {
> background:url("images/africa_logo_06.png") no-repeat transparent;
> height: 102px;
> width: 113px;
> position:absolute;
> cursor: pointer;
> top:85px;
> right: 22%;
> */right:480px;*/
> }
>
> Please help!
> 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/



I got it working better, but not perfect, by making "#header {position:
relative; width: 0 auto; max-width: 990px;}"  Then adjust the top and right
positions on those two images:

#europe-image{top: 45px; right: 10px;}
#africa-image{top: 45px; right: 110px;}

The problem is that those two images are right positioned to a percentage
which is based, currently, on the browser window.  Putting that relative
position on #header (which the images are inside of) means that their
absolute positioning is based on that container instead of the browser
window.

-Tim



-- 

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

Re: [css-d] Link on A tag only active on the underline?

[Tim Arnold]

#header-2 is not containing the items within it because they are all
floated allowing the container to collapse.  This collapse is allowing
#header-3 to jump up to the top of the page.  It is #header-3 that is
covering up the top part of your links...only the bit that #header-3
doesn't cover is hoverable by your mouse.

Put "overflow: hidden;" on #header-2 and it will stretch out to
contain the links, shove #header-3 back down where it should be, and
your links will be clickeable.  You might want to change the red
background on it once you do.

Tim

On Mon, Dec 10, 2012 at 8:02 PM, Matthew Willis  wrote:
> Hey there,
>
> I was wondering if anyone knew why the link in an A tag would only activate 
> when the mouse is hovered over the underline, and not anywhere on the text it 
> is wrapped around?
>
> The reason I ask is because I'm working on the CSS on this amazon store:
>
> http://www.samystore.com/
>
> and the menu in the upper right corner of the page (Sign in, New Customer, 
> Your Account, Help) is behaving in this way. It's tricky to get one's mouse 
> to be in the necessary position to active the links.
>
> Thanks in advance to anyone who has any suggestions on fixing this!
>
> Thanks,
> Matthew
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

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

Re: [css-d] explain positioning of this tag

[Tim Arnold]

On Tue, Oct 30, 2012 at 2:06 PM, Angela French  wrote:

> On this page:
> http://wet-boew.github.com/wet-boew/demos/footnotes/footnotes-eng.html#fnb2the
>  example of the footnotes at the bottom has the link back to the
> original footnote appear first, but in the linear order of the code the 
> tag in which the link resides appears last.  This is great for a screen
> reader user.  I can't figure out how they did it though.  The css shows
> display:inline-block applied. But there must me more to it. That didn't
> work for me.
>
> Thanks for any help.
>
> The html:
>
> 
>   Example of a footnote containing multiple paragraphs
> (first paragraph).
>   Example of a footnote containing multiple paragraphs
> (second paragraph).
>   Example of a footnote containing multiple paragraphs
> (third paragraph).
>class="wb-invisible">Return to footnote 3
> referrer
>
>
>
>
Hey Angela,

On the  tag wrapping the readable text, there is some left margin and
padding which makes the space where that  is
going to end up living.

Then there is "position: relative; on the  that wraps each pair of s
in question which makes the next bit work correctly.

That next bit is that that the  then has
some absolute positioning on it (top: 0;) that pulls it up in to the space
created by the aforementioned left margin and padding.  Watch out,
though...withoug that "position: relative;" from step #2 these will end up
stacked on top of each other up in the top left of the entire page.

At least I think that's what's going on there.

Tim



-- 

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

Re: [css-d] Equal length columns?

[Tim Arnold]

On Oct 23, 2012 5:23 AM, "Joergen Lang"  wrote:
>
> In which way are borders neccessary for the construction of equal height
> columns?

Borders are only necessary if you use the "negative margins and borders"
technique described here, though "faux columns" works best for me:

http://www.vanseodesign.com/css/equal-height-columns/

Google can be your friend too ;-)

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

Re: [css-d] html5 use of

[Tim Arnold]

On Tue, Oct 16, 2012 at 11:05 AM, Nancy Johnson wrote:

> Hi,
>
> I have a question on appropriate use of  tag in HTML5  when it
> comes to wrapper containers.
>
>
Hi Nancy,

That's a really good question, but one that does not actually apply to this
list.  I'd suggest you either post the question at
http://webdesign-L.com/ or
check out http://html5doctor.com/

Tim



-- 

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

Re: [css-d] Firefox & Numerical Class Names

[Tim Arnold]

On Mon, Oct 1, 2012 at 12:37 PM, David Halliday  wrote:
>
> Hello,
>
> I have several class names that start with digits (e.g. .100, .200, .300
> etc). Firefox is not recognising them.  Is there a solution/hack to get
> round it?
> On w3.org, it says this:-
>  In CSS1, a class name could start with a digit (".55ft"), unless it was a
> dimension (".55in").   In CSS2, such classes are parsed as unknown
> dimensions (to allow for future additions of new units).   To make ".55ft"
> a valid class, CSS2 requires the first digit to be escaped (".\35 5ft") .
> http://www.w3.org/TR/CSS21/grammar.html
>
> I have tried to esacape the class name in the css file like so:-
>  .\100 { ... }
> but it soes not seem to work.
>
>
 Per: http://www.w3.org/TR/CSS21/syndata.html#characters

"In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, two hyphens, or a hyphen followed
by a digit. Identifiers can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"."
--

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

Re: [css-d] Pixels won't increase in IE

[Tim Arnold]

On Tue, Aug 7, 2012 at 2:23 PM, Angela French  wrote:
> Hello,
> I have encountered a circumstance where IE 8 will not increase text size of 
> the pixels in one area of my page.
>
> http://sbctc.edu/indexTESTAD.aspx
>
> The area with the issue is the div with the block of text that begins  "One 
> System. 34 Colleges"
>
> In IE8 when I try View >  Text Size  (select any other size than medium) the 
> text in this div does not change size. Also, my background gradient image 
> doesn't show either.

Hey Angela,

You have defined the font size in pixels instead of a relative font
size (% or em).  Other text on that page is sized using ems.  Switch
it up and you should be good to go.

-Tim

-- 

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

Re: [css-d] Food menus and definitions

[Tim Arnold]

On Thu, Jul 26, 2012 at 5:37 PM, John  wrote:
>
> On Jul 26, 2012, at 2:22 PM, Jay Tanna wrote:
>
>> In certain situation you have to use Tables and the food menus you have 
>> produced is the ideal candidate for this.  Consider using a table to do 
>> exactly what you want to do.  CSS can be applied to tables so first create a 
>> table structure and then post back to get further help in using the CSS.
>
>  OK, thank you, Jay...I can code me up some tables, but I thought they were 
> archaic, in disfavor, etc?  Still used and acceptable for cases like this?
>
>
> John

They are most definitely still de rigueur for data like you are
marking up.  Tabular data is for tables and likely always will be.

T

-- 

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

Re: [css-d] border-radius and image corners

[Tim Arnold]

On Wed, Jul 25, 2012 at 9:57 PM, Jay Tanna  wrote:

>> Actually you can apply the css to the img directly like
>> this:
>>
>> img {
>> border:1px solid red;
>> border-bottom-left-radius:20px;
>> display: block;
>> }
>>
>
> David's picture:
>
> http://www.mytechnet.talktalk.net/round-corners.html
>
> __

Actually, that's only "kind of" working.  The problem with rounded
corners on images is, if you want to add any kind of border as well,
you're screwed.  If you increase the border width on the demo at
http://www.mytechnet.talktalk.net/round-corners.html, you'll see that
the corner of the image will intrude, un-rounded, in to the border
color.  It certainly works if you are simply rounding the image
corners, but the only solution I've seen that works reliably to draw a
border around the rounded-corner image is to make the image a
background image and apply your rounding and borders to the container.
 Not a great solution for any number of reasons.

Any solutions not involving background images greatly appreciated!!

Tim

-- 

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

Re: [css-d] Wrapper DIV vs. BODY

[Tim Arnold]

On Fri, Jun 22, 2012 at 1:30 PM, Kyle Sessions  wrote:
> On Thu, Jun 21, 2012 at 10:47 AM, mem  wrote:
>
>> I'm taking the body element as the "viewport area" and the wrapper as the
>> "content container area"
>
>
> That's how I usually interpret it. I might want my content to have an
> explicit width, but I'd like an unlimited-width repeating background image.
> So  gets the background image and div#wrapper gets the width and
> margins.
>

You could use the  tag as your explicit width wrapper, and put
the repeating background on your  tag as well!  I always forget
this.

Tim

-- 

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

Re: [css-d] line widgets up horizontally

[Tim Arnold]

On Thu, May 24, 2012 at 1:10 PM, John  wrote:
>
> At this link:  http://coffeeonmars.com/testing/index.html
>
> You see 5 "widgets" all identical, lined up vertically. I would like them to 
> line up horizontally, the way the other, different widgets at the bottom of 
> the page do.
>
> The bottom-page widgets are .png files; the ones at the top are a combo of 
> image and live text handled with div tags and I can not get those little guys 
> to line up horizontally.
>
> I'd appreciate any clues about what the problem is.
>
> Thank you!
>
> John


Hey John,

Simply add "float: left;" to ".widget" and then probably adjust widths
and margins if you want them to match the ones below exactly.  1em
right margin, and a width of 136px seems about right.

.widget {float: left; width: 136px; margin: 2em 1em 2em 0; height:
auto; background: #fff; border-radius: 4px 4px 4px 4px; box-shadow:
3px 3px 15px #252525;}

Seems to do the trick nicely.

-Tim



-- 

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

Re: [css-d] position with div in stead of table

[Tim Arnold]

On Mon, Apr 9, 2012 at 1:11 PM, Marie-Ange Demeulemeester
 wrote:
> Hi,
> I need a block with two columns.
>
> Despite of the quite simple code by using a table, I’ve tried to have the
> same result with DIV.
>
> The requirements are:
>
> ·         The columns have an equal height
>
> ·         Each column has a different background-color
>
> ·         2 columns: first column always width 100px, second the rest of
> the screen (100% minus 100px)
>
> ·         The title and rule has to have the whole width of the second
> column, and not equal to the width of the text in that column. (Not OK in
> FF, in Chrome, )
>
> ·         This must be X-browser: IE6+, FF 3+; Chrome, Safari
>
> My tryout:
>
> http://users.telenet.be/MarieAnge/banner1.html
>
> If somebody can simplify the code, please don’t hesitate.
>
>
>
> Thanks.
> --
> Marie


Chris Coyier has a good roundup of the most common ways to achieve this:

http://css-tricks.com/fluid-width-equal-height-columns/



-- 

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

Re: [css-d] problem with positioning

[Tim Arnold]

On Sat, Mar 31, 2012 at 5:42 AM, Lisa Frost  wrote:
>>
> Thanks that works a treat, but i do not understand why i have to put a
> relative position on my container div and then why my bee image is taking
> its values from the container div and not the div it is contained in or the
> parent of that called masthead.
>
> Any explanation from anyone would be greatly received.
> Thanks
>
> Birdie

Hey Birdie,

The deal it pretty simple once the lightbulb goes off (I remember it
taking a while for me).  When you make an element "position:
absolute;" it will look for what container it should position itself
relative to.  That is, what element's top,left corner should it
consider top: 0, left: 0.  If none of its parent, grandparent, or
other elements have any positioning on it then it uses the 
container.  If it does find a parent with "position: something" on it,
then it's all, like "cool, I'll position myself based on you."

So, your Bee trots up the HTML structure asking each container that it
is inside of, in turn: "Are you my mother?"  If the container has no
position, then the little Bee marches up to the next container it is
inside of and asks "Are you my mother?" until it gets the answer, "yes
little Birdie, I have position too, I am your mother."

Tim



-- 

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

Re: [css-d] "classes"...?

[Tim Arnold]

On Fri, Mar 9, 2012 at 5:28 PM, Paceaux  wrote:
>
>
> Smashing Magazine has a great article on Object Oriented CSS. 
> http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/.


While I do think that Nicole Sullivan's Object Oriented CSS has real
value (especially in high traffic sites), I haven't found it to be
necessarily better than the way I've always done CSS.  And that name!
Though she named it OOCSS, it is most certainly not object oriented in
the way that a real OO language is.  To call it that has just muddied
the waters between developers and front end people and kind of made us
(front end folks) sound like we don't know what we're talking about.
Sigh.

That said, HTML and CSS are not object oriented and, as far as I can
know, never could be.  Certainly bits of HTML and CSS can be created
using OO languages, but that's about web development and CMSes, not
CSS.


Best,
Tim


-- 

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

Re: [css-d] problem with opacity

[Tim Arnold]

On Thu, Feb 16, 2012 at 2:38 PM, Angela French  wrote:

>   It appears that this background color is inheriting the opacity of the
> div it lives in as the white background-color seems to have no effect. I
> have even reset the opacity of this  by setting it to 100.
>
>
Yes, the opacity css property is inherited by anything inside that
container.  There is no way that i know of to get around that when using
"opacity."  What you can do, however is use RBGa background instead.

Check out: http://css-tricks.com/rgba-browser-support/  and.or
http://www.css3.info/preview/rgba/

If you want it to work in IE browsers older than IE9, you might want to use
PIE (http://css3pie.com/) which is my favorite way to beat dumb browsers in
to shape.

-Tim

-- 

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

Re: [css-d] Text flow around a DIV containing absolutely positioned items

[Tim Arnold]

On Mon, Feb 13, 2012 at 9:50 AM, Tim Dawson  wrote:

> http://www.webadit.co.uk/test/templates/partialsolution.html
>
> Is there any other way I can achieve both objectives, preferably without
> resorting to absolutely positioning everything ?
>

Try taking the "overflow: hidden;" off of the  tag and give the
#right div a height (about 344px seems pretty good).  I'm off to a
meeting so can't do a real test, but this definitely worked in
firebug.

-Tim


-- 

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

Re: [css-d] FW: An elementary question on absolute positioning

[Tim Arnold]

On Tue, Jan 31, 2012 at 10:10 AM,   wrote:
> On the page at  http://www.maireadnesbitt.com/index_next_tt.html  I have a 
> group of absolutely positioned thumbnails.
>
> I expected them to appear within the containing block called left_third. 
> Instead they appear to be positioned on the page. Is that a question of some 
> attribute that I need to specify for left_third?
>
> Thanks for any assistance.
>
> Bruce

Just add "position: relative" to the styles for #left-third and you're
good to go.  Absolutely positioned blocks set their position relative
to the next ancestor container *that is also positioned*.  Right now,
none of the ancestors are, so they are positioning relative to the
 tag.

Best,
Tim

-- 

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

Re: [css-d] Grfx/text alignment

[Tim Arnold]

On Tue, Jan 10, 2012 at 2:51 PM, Kim Brooks Wei  wrote:

> I'm not sure how I'm supposed to respond to help like that

That much has been made clear twice.  I'll leave it to others to help out.

-tim



-- 

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

Re: [css-d] Grfx/text alignment

[Tim Arnold]

On Jan 9, 2012 11:52 PM, "Kim Brooks Wei"  wrote:
>
> Tim, I don't know what that youtube video was supposed to teach me. I
obviously know what alignment is. Thanks for pointing out the alignment
designation in the shortcode, tho. That was helpful. Unfortunately,
altering it doesn't fix my problem. The photo won't float either right or
left.
>
> What I'd really like to do is float the picture and petition graphic to
the left and have the text all on the right. Is there an easy way to do
this?
>
> Kim

Sure there are ways to do that but not knowing what you already obviously
know, but have not yet done, I hesitate to venture a suggestion.

Tim,
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Grfx/text alignment

[Tim Arnold]

>>
>> On Jan 8, 2012, at 21:00 , Kim Brooks Wei wrote:

>>>
>>>  I'm having trouble figuring out how to align pictures and text here
>>> http://is.gd/B7MBSg.


Kim,

I see this div wrapped around your image:



The presence of the class "alignnone" suggests that you have not
aligned the image in your WordPress editor.  You have added a class to
your  tag attempting to do so, but that div will confound your
attempts for sure.  Open the post in WordPress, click on your image,
and then click the align right button on the editor toolbar.

Google turned this up which may help: http://www.youtube.com/watch?v=kjzKK6NhXdQ

Best!
Tim
-- 

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

Re: [css-d] Submenu Location Assistance

[Tim Arnold]

> I want the submenu items to show up on hover on "Target" underneath this menu 
> bar.  Like this:
>
> [Home] [About] [This] [That] [Target]
> [Sub1] [Sub2] [Sub3] [Sub4] [Sub5]
>
> But all I can get to happen is the submenu lining up with "Target", that is, 
> it is not left aligned with "Home".
>

I'm going to guess that you've tried setting the submenu UL like this:

ul ul{position: absolute; left: 0;}

This is the right thing to do to get what you're after, but the trick
is knowing what that "0" is relative to.  "left: 0;" can mean a few
different things.  Right out of the gate, it usually means the left
edge of the browser window. Since you are seeing your menu align the
the left of the "TARGET"  I'm going to guess that you have some
kind of position set on that  as well.  Something like this

ul li{position: relative;}

If you do, then, that  you're trying to move to the left edge of
your menu will instead go to the left edge of the "TARGET" .  This
is because that UL you want to move starts crawling up the HTML, finds
it's first parent container that has any position set on it and says
"yeah, here. Here is where I will make my stand."  If you delete
whatever position styles you may have on TARGET and add
"position: relative;" to the main UL of your menu, you may be in luck.

Something like this perhaps:


ul {position: relative;}/*position the parent UL so that the child UL
uses it to calculate where left: 0 is*/
li {float: left;}/*get your menu items to display horizontally*/
ul ul {position: absolute; left: 0; display: none;} /*set position and hide it*/
ul li:hover ul {display: block;}/*show it (won't work in IE7 and lower)*/


This is incredibly rudimentary CSS and you'll have some work to do to
get things to look right, containers to contain they children
correctly (good luck with that: absolutely positioned elements are
going to make you their b**ch ;) ), width and heights will be a "to
do" as well.

Check out my (very rough) demo: http://fiercefamily.com/demo/menuhovers.html


Tim

-- 

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

Re: [css-d] Submenu Location Assistance

[Tim Arnold]

On Mon, Jan 9, 2012 at 11:46 AM, Chris Williams  wrote:

> My question is simple: is this possible with just CSS?  Choices:
>
>  1.  Yep, I simply not found the right combination of CSS to get it to happen.
>  2.  Yes, but you need a different HTML structure.
>  3.  No, you can't do it with hover, you need to use javascript to get there.
>  4.  No, you just need to use a separate  for the submenu and get over 
> the whole "hover" thing.
>

Short answer: #1

Slightly longer answer:

If you have a URL we can take a look at we can probably help more.
The usual IE caveat is that ":hover" is only supported on  tags.
So if you want to trigger that submenu by hovering on the parent 
you will need javascript to support IE7 and older.

-Tim

-- 

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

Re: [css-d] Border: Double

[Tim Arnold]

> I think I understand you.  A double border consists of two lines and
> you want to be able to define the width of each of the pair
> independently.  I'm am fairly certain that you can not do this as the
> two lines as well as the space between them are sort of baked into a
> single unit. There are other ways to do this though.  Try Googling
> "css multiple borders."
>
> Tim
>
> --
>
> tim.arn...@gmail.com
>

My favorite is to use mulitiple box shadows, btw. Also totally Google-able.



-- 

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

Re: [css-d] Border: Double

[Tim Arnold]

On Mon, Nov 28, 2011 at 5:02 PM, Jukka K. Korpela  wrote:
> 2011-11-28 23:52, Elli Vizcaino wrote:
>
>> Was just wondering if there was a way to give a double border different
>> values.
>
> It depends on what you mean by that.
>
>> For instance have one be 1px while the other is 3px?
>
> Can a 1px border be a double border?
>
> Please explain what you are trying to accomplish. As usual, a URL could
> explain things quite a lot.
>
> Yuccca
>


I think I understand you.  A double border consists of two lines and
you want to be able to define the width of each of the pair
independently.  I'm am fairly certain that you can not do this as the
two lines as well as the space between them are sort of baked into a
single unit. There are other ways to do this though.  Try Googling
"css multiple borders."

Tim

-- 

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

Re: [css-d] box-shadow don't display on the right side

[Tim Arnold]

On Tue, Nov 15, 2011 at 3:15 PM, mem  wrote:
> Hello all,
>
> I'm building the following:
>
> http://help.nuvemk.com/floatedFluidLayoutHtml5/
> http://help.nuvemk.com/floatedFluidLayoutHtml5/style.css
>
> Line 125 and next I have:
>
> #navigation-and-slideshow {
>    width: 100%;
>    overflow: hidden;
>    background-color: #fff;
>    padding: 10px 1%;
>    box-shadow: 1px 1px 3px #999;
> }
>
> The right shadow will however appear if I change the width to: 97% or less;
>
> How can I fix this behavior in order to have the shadows properly showed with 
> the proper width ?
>
> Tested on FF 7.0.1 Mac Os X;
>
> Thanks a lot,
> mem


Hey mem,

If the shadow only displays when your container is set to 97% then you
should change the width to 97%.  The shadow is added to the outside of
your container.  If you don't allow enough space around your container
to the right and bottom (in your case) then the containing element
( will eclipse the shadow.  FWIW, in Chrome 98% seems to work
just fine.

Best,
Tim

-- 

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

Re: [css-d] css measures - em grid system makes sense ?

[Tim Arnold]

On Thu, Nov 10, 2011 at 9:07 AM, Philip TAYLOR  wrote:
>
>
> Paceaux wrote:
>
>> most of the time, I actually set html{font-size: 16px} so I can guarantee
>> the font size and a width of 960px.
>
> Why do you /want/ to guarantee the font size ?  Surely
> the user is the best judge of the size at which he or
> she likes to read things, and therefore you should respect
> that judgement rather than seeking to circumvent it.
>
> Philip Taylor
> __


While I generally agree with your statement Philip, I think that using
it as an absolute law for font sizing might be giving users more
credit for having any idea what their browser or system default font
size is or how to change it.  Isn't your argument really more saying
that browser and computer manufacturers know better than designers,
rather than that users know better?

That said, I'm a fan of body{font-size: 100%} and using em to size
things up from there.  Almost always up.

And that, that said, I am usually coding from someone else's design so
I often have no choice.  In a perfect world I'd be a better designer
than I am.

Best,
Tim


-- 

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

Re: [css-d] CSS Content

[Tim Arnold]

On Thu, Sep 22, 2011 at 10:38 AM, Giles, Sarah
 wrote:

> Some of these groups are "Special" And their specialness changes on a 
> personal whim. So I am creating a class to denote their specialness that will 
> change their background color, give a boarder, and change font color. I also 
> want to add a darling little img of a red ribbon to the corner of each 
> because you know nothing says I'm special like being decked out in ribbons 
> and bows.
>
> -Sarah

You could use the :after pseudoclass, but it might be simpler
(certainly better supported in all browsers) to place it as a
background image to the div in question.  Position it top left and add
enough left padding to the div to make room for it.  Something like:

.specialHolder {padding-right: 20px; background: #f00
url(redribbon.png) top right no-repeat;}

-- 

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

Re: [css-d] Expand parent width to contain floated elements

[Tim Arnold]

> 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?
On Fri, Sep 16, 2011 at 11:50 AM, Kevin A. Cameron
 wrote:
> Pretty sure if you float the parent, it will grow to fit the content.
>
> Kevin
>
>

If, for some reason, you can't float the parent, there are other ways
to accomplish it as well.  Try adding "overflow: hidden;" to the
parent (may bring it's own problems), or read about the "clearfix"
method here: http://www.positioniseverything.net/easyclearing.html

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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

[Tim Arnold]

> Wow can't beleive it was a matter of something so simple. Thanks a million! 
> :))
>
>

It's only simple when you've done the same thing half a dozen times :)



-- 

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

Re: [css-d] Pure CSS Drop Down Menu Help

[Tim Arnold]

On Fri, Sep 9, 2011 at 1:15 PM, Elli Vizcaino  wrote:
> ...so yes the drop down drops on hover now but it just wont stay there so one 
> can hover over the submenu links, so it's still a problem.
>
>
> Here is the revised code snippet and the url again: 
> http://e7flux.com/dfd/index.html

It's really just a matter of distance.  The UL that opens up is too
far down and so your mouse pointer is leaving the hover area for a
second before it gets to the UL.  Remove that 3px top margin and it
should be better.

-Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Win IE 6 issues

[Tim Arnold]

On Sep 7, 2011 7:02 PM, "John" 

> I have a PNG-24 with transparency which Win IE 6 shows as having a light
blue background.

Look for help from the PIE.htc fix for this one.  IE6 does not support
24-bit transparency. Odd that it's blue.  It should be grey.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] change colour of bullet in UL no images no spans

[Tim Arnold]

Lisa,

The only way to make the text a different color than the bullet is to wrap
the text in something (, , , whatever) that you can give a color
to.  Other than that, you'll have to use a bullet image.

Tim

On Mon, Aug 29, 2011 at 11:10 AM, Lisa Frost  wrote:

> I've been googling and trying to find out how to change the colour of just
> the bullet, not the text in an UL.
> All i can find are articles from a couple of years ago about either using
> an
> image for the bullet or span tags to change the colours.
>
> Has styling of bullets moved on and can it be done by some simple css?
>
> Thanks
>
> Lisa
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 

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

Re: [css-d] Off-topic : h1 replacement -- which one is recommended?

[Tim Arnold]

I made the rounds of a few different techniques over the years for replacing
H1 text with an image until I realized that the most reliable, most
semantic, most indexable, most manageable solution was also the simplest:



Google loves alt text.  No extra classes to identify which background should
be utilized (which always results in lazy management down the line and
things not matching.  The worst is when the image being called in differs
from the actual text which may, in turn, differ from the class.  A mess.
Just use an image I say.

I remember a Google Webmaster Help video where Matt Cutts said the same
thing but can't find it right now.

Tim

On Fri, Aug 26, 2011 at 1:38 PM, Kevin A. Cameron
wrote:

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



-- 

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

Re: [css-d] Horizontal Numbered List problem

[Tim Arnold]

On Aug 3, 2011 8:38 AM, "Tod"  wrote.
>
> I've got something similar to this:
>
> 
>  1.
>  Text1
>
>  2.
>  Text2

I know we're about the CSS more than the markup but having the number and
the text in subsequent list items like that means something different than
you are trying to convey.

Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 alignment question

[Tim Arnold]

A URL would help a log, but is the title (first field) also floated
left?  It probably should be.

-Tim

On Fri, Jul 8, 2011 at 2:15 PM, Neil Hunt  wrote:
> I have two fields (each in their own  tag) that I am attempting to
> align next to each other.  The first field is a title, the second is
> additional info.  I have the second field floating left and the two align
> fine next to each other as long as field one does not extend to a second
> line. When the title (field one) does carry over to a second line, the
> second field drops down to a third line rather than aligning next to first
> field on line two. Any suggestions how to get the second field to align
> properly when data runs to a second line?
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 

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

Re: [css-d] "lock" a resize?

[Tim Arnold]

On Sun, May 15, 2011 at 10:08 PM, Michael Beaudoin  wrote:
> Is it possible to "lock" in the css type specs so if a window is resized it
> won't mess up the type?
>
> If not, is there a good way of maintaining type integrity? I'm using ems to
> spec they type.

While there may be a few exceptions, I find that the moment we start
talking about "type" we are no longer thinking of the content of our
site as something that people on a whole host of different devices may
be accessing and need to be able to read.  If text breaking
differently messes up the design of you site, I'd suggest re-designing
it so that it can accommodate the flexibility that is inherent in the
web.  While I'm not necessarily a "leave all text at the browser
default" type purist (though I certainly see their point), I do feel
that trying to over-control text is a bad way to go and will only end
in tears.

-Tim


-- 

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

Re: [css-d] What is best practice when using CSS to create forms?

[Tim Arnold]

On Tue, Apr 19, 2011 at 11:04 AM, Barney Carroll
wrote:

> On 19 April 2011 15:47, Tim Arnold  wrote:
> > Does form markup OR plugging LWs book have anything to do with CSS?
>
> Colossal amounts. Come back to us when you've built a form purely out
> of CSS and no markup.
>
>
Obviously, I have never created a form purely out of CSS, but thanks for the
invite back which I will take advantage of now even having failed in my
assignment!  I only commented because the question was about whether to use
a DIV or a DL which has nothing whatever to do with CSS.  Per the list
policies found at http://css-discuss.incutio.com/wiki/Off_Topic :

"Some topics are off-topic for css-d, for example:-

   - mark-up questions"


A question on how best to style a DL for use in a form would certainly be
on-topic.  My apologies if I misunderstood.

-- 

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

Re: [css-d] What is best practice when using CSS to create forms?

[Tim Arnold]

On Tue, Apr 19, 2011 at 10:01 AM, Kurtis Kroon  wrote:

> Here's where I plug Luke Wroblewski's book _Web Form Design: Filling in the
> Blanks_:
>
> http://www.lukew.com/resources/web_form_design.asp
>
> Kurtis
> Sent from my mobile
>
> On Apr 18, 2011, at 8:12 PM, Keith Purtell 
> wrote:
>
> > I have a simple form on my Contact page where I've used DIVs to organize
> > content. Not sure this is best practice. I've seen online articles
> > advocating definition lists () and then the approach described at A
> > List Apart:
> > http://www.alistapart.com/articles/prettyaccessibleforms/
> >
> > - Keith Purtell
> >  http://www.keithpurtell.com
> >
> > __
>

Does form markup OR plugging LWs book have anything to do with CSS?

-- 

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

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

[Tim Arnold]

On Wed, Apr 13, 2011 at 1:54 PM, Chetan Crasta wrote:

> > http://www.kacevisual.com/files/CSSContentSlide/
> >
>
> Ingenious. It would be better without the non-semantic empty 
> elements though.
>
> ~Chetan
> __
>
>
Pretty cool.  Using anchor links to target content in an overflow hidden
container.  I learned something.
-Tim



-- 

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

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

[Tim Arnold]

On Wed, Apr 13, 2011 at 1:17 PM, Aaron Gray wrote:

> Hi,
>
> I cannot remember how to do this or what it is called.
>
> But I am looking for some CSS that allows a number of "menu" or selector
> links that change the displayed 'div' on the main page, displaying say a
> different image.
>
> Basically I want a single web page that has a number of links that select
> the pages contents via CSS rather than JavaScript.
>
> Many thanks in advance,
>
> Aaron
> __
>
>
If you want to be able to click on an element (say link) and have it
effect change in another element on the page (a  perhaps) you are
out of luck without JavaScript?  This is not possible with CSS particularly
because there is no "on click" available to CSS.  You can use ":hover" but
you will be limited to affecting either an element inside of the element you
are hovring on, or using some sort of selector.

For instance:

a.linkOne:hover + div {border: 1px #000 solid;}

would put a border around any div *immediately" following the link in
question.

But if you have a list of links at the top of the page and a bunch of
content divs down the page (a FAQ, for instance), you will not be able to
target specific containers by hovering or clicking the links without JS.

Depending on the markup, you might be able to do something with nth child
selectors:
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#nth-child-pseudo

Tim



-- 

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

Re: [css-d] Stop supporting IE 6 and 7

[Tim Arnold]

On Tue, Mar 15, 2011 at 12:14 PM, Gabriele Romanato <
gabriele.roman...@gmail.com> wrote:

> With the final release of IE 9 and the good work behind IE 8, I think it's
> time to move on:
>
> http://onwebdev.blogspot.com/2011/03/stop-supporting-ie-6-and-7.html
>
> I don't want to read other mails about ie6 and 7 on this list anymore :-)
> please... :-)
>
>
>
XP is still the most commonly installed Windows OS and you can't run higher
than ie7.  I'm afraid you will continue to see requests for ie6&7 help on
this list for some time.  That MS didn't make a version of 8 or 9 compatible
with XP makes me mad.

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

Re: [css-d] Trouble trying to center webpage

[Tim Arnold]

On Mar 14, 2011, at 7:48 AM, Lesley Lutomski  wrote:

> On 14/03/11 05:50, Richard Wendrock Forum wrote:
>
>>
>> any idea as to how I can force the content to center in the page?
>>
>
> Hi Richard,
>
> Try adding
>
> #aspnetForm {width: 1074px; margin: auto;}
>
> Works for me on Firefox but I can't test on anything else at the moment.
>
> Hope that helps.
>
> Lesley
> __

For ie7 and lower you'll need to add "text-align: center;" to the
 and "text-align: left;" to #aspnetForm in addition to Lesley's
code.

--
Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 bar chart

[Tim Arnold]

On Wed, Mar 9, 2011 at 4:24 AM, Gabriele Romanato <
gabriele.roman...@gmail.com> wrote:

> Hi,
> continuing the series of useless experiments, here's a simple demo that
> creates a pure CSS bar chart:
>
> http://onwebdev.blogspot.com/2011/03/pure-css-bar-chart.html
>

Less useless (your words, not mine!) would be Eric Meyer's demo of
converting a table to a bar chart which is arguably the correct markup given
the data conveyed, rather than using divs that leave your content floating
in space with no context beyond what your CSS gives it.

http://meyerweb.com/eric/css/edge/bargraph/demo-table.html

Seeing this bar chart appear, little by little, during Eric's AnEventApart
presentation some years ago was very, very cool.  The idea that there was no
practical different between what could be done to a  or a  and a
 or  was eye-opening.

Tim

-- 

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

Re: [css-d] Right column drooping

[Tim Arnold]

On Fri, Jan 7, 2011 at 2:29 PM, Kim Brooks Wei  wrote:

> Hi People,
>
> I don't remember what will make my right column slide up to sit side by
> side with the left one. What am I failing to do?
>
> http://bit.ly/ad7AEl
>
> Kimi
>
>
I assume that you want the "rightcopy" and "leftcopy" divs to be side by
side?  You will need to have them both in the same parent div.  Right now,
"leftcopy" is wrapped in the "subcopy green" div, but "rightcopy" is not.
Once they are in the same container, float them both left and see how that
goes.

Luck! Tim


-- 
-
tim.arn...@gmail.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] can a div be a link?

[Tim Arnold]

>
> Sure. Here it is. http://ba-doyn.com/junk/link_test/
>
> You'll see the outlined block in the upper left. I would like the block to
> have a link, but obviously no copy in there.
>
> Thanks,
> Michael
>
>
If you put a link in that div (around the text), you can make it a block and
it should accomplish what you want:

#homeLink a{
display: block;
height: 93px;
width: 325px;
}

You will still have the text showing, which you can hide with "text-indent:
-999em;".  It will work, but is not as good as just having the image in
there, linked, with healthy "alt" text.  Google doesn't like it when you
hide text.


-- 
-
tim.arn...@gmail.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] can a div be a link?

[Tim Arnold]

>
> Reese said:



> Some legacy sites are not ready for HTML5 conversion. Then, I'm not
> so sure about this method even for new development. Because:
>
> Divs are block-level elements, anchor tags are line-level elements.
> Loosening the standards to permit inserting block elements inside
> of line elements seems like throwing the standards out with the
> bath water. Else, there is a leveling between the two and the
> distinction will go away completely... eventually.
>

Whether we are comfortable with this change or not, this is the HTML5
standard, and it works great.  As far as I know there is no browser that
does not support wrapping any number of block level elements in an  tag.
Standards evolve and, while this one is certainly counter to what we've
learned up to now, the fact that it is now part of the HTML5 spec kind of
makes moot the discussion over whether one "should."  Remember, that the
docype you chose is about validation, and not browser rendering.  IE5.5
(oldest browser I have on hand) will support wrapping block level elements
in an  no matter what doctype you use.  We also no longer have to self
close tags, quote attributes, or include "types" for CSS and JS.  Does that
seem different to you?  Or are you cool with those changes?  Honestly, I
bristle at the loosening of some of these standards, but wrapping block in
an  seemed like a good change to me.


>
>
> Much easier to read when reading the source code. Drop the self-
> closing img tag for HTML 4.01 and earlier.
>

This was an earlier example of standards changing.  If we accepted that
there were different rules from before HTML 4.01 to XHTML, then why not HTML
5 as well?  Perhaps because anal-retentive coders like me loveed it when
more rules were added and not so much the reverse?


>
> Reese
>
>
All this said, there are certainly parts of HTML5 that are not supported in
older browsers (new elements, input types, canvas obviously), but I disagree
that wrapping blocks in s is one of them.

Tim


-- 
-
tim.arn...@gmail.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] Footer on odd pages only

[Tim Arnold]

On Wed, Dec 22, 2010 at 9:31 AM, Mark Richards  wrote:

> On Mon, Dec 20, 2010 at 18:40, Evan Panagiotopoulos  >wrote:
>
> > I create a string of html documents using php. Each document prints one
> > sheet of paper.
> >
> [snip]
>
> > If I use:  Using id=... to call the css and I only
> > get the footer properly placed on the first page only. The rest of the
> > pages
> > do not have a footer.
> >
> > If I use  Using class=... to call the css I get
> > the "footer" text placed under the end of the content on each page.
> Somehow
> > it does not appear as a footer.
> >
>
>
>
I think your solution is in the PHP and not the CSS.  You need the PHP to
only add the footer div to odd pages.  PHP can count (what you define as)
pages, but CSS cannot.  You could add a class to odd pages in which case CSS
could be used to show or hide based on the presence of that class, but
honestly, once you've done the logic to add the class, you might as well
just be adding the entire div in question instead.  Regardless, what you
determine to be a single page will definitely not be a single page on every
printer.  You'll likely get reports of people getting that footer in very
odd places.

As soon as you start thinking printing, you should probably move to PDF.
Unless you have the requisite amount of self loathing to tackle
"PHP+HTML+CSS+The Universe of Printers." I'd recommend that route.

-Tim

-- 
-
tim.arn...@gmail.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] How do I style links which are only a part of ul li?

[Tim Arnold]

On Mon, Dec 20, 2010 at 12:32 PM,  wrote:

> I don't have code for this yet, this is what I tried:
> css:
> .longlinelist {
>color: red;
>font-weight: bold;
> }
>
> html:
> Summary
>   
>If you already know what you are looking for, go ref="contact.html">Contact page
>   
>
> Font inside link still appears as default template formatting. Could be
> my mistake somewhere, I'll validate it today, but maybe you can post a
> common rules for making text within link appear styled differently from
> default link styling.
>
>
>
.longlinelist a {color: #0f0;}

will make links inside your list green.  You could also just do:

li a{color: #0f0;}

if you really want all links inside a list to be a different color than
other links.

-- 
-
tim.arn...@gmail.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] How do I style links which are only a part of ul li?

[Tim Arnold]

On Sun, Dec 19, 2010 at 9:13 AM,  wrote:

> I'm customizing free template and trying to make fast navigation top of
> the information page, like FAQ - questions that are a links first, then
> in-page links to answer below.
>
> With the only difference: this is "jump to" navigation that consist from
> "If (condition): then (link to a different place)".
>
> The line may be a long sentence, and I would like to make only a few
> words from it as a link, bold and red, for example. All other words in
> sentence should be a common paragraph text.
>
> How could I achieve that?
> Template contains other menus on this page and a (link) styling in css,
> different in style from I plan to do.
>
> P.S. When you answer, please post example lines for css and html: I'm
> not so strong in css/html to operate general concepts like make a class
> or ID. I can make uncomplicated class and ID and apply them to html, but
> not when multiple classes or combinations are involved. I'm only
> occasional css user when I'm making personal interests websites for
> myself or a family using free css templates.
> Thank you.
>
>
>
>
Can you post a link to the code you are working with?

-- 
-
tim.arn...@gmail.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] how do i get rid of the space under the header image?

[Tim Arnold]

On Mon, Dec 13, 2010 at 4:59 PM, Matthew P. Johnson wrote:

> http://www.applegateelements.com/new/index.htm
>
> Once I add the code for the nav, a space adds itself underneath the header
> image. Before I add the "Nav" code marked by
>
>
There is surely a better way, but adding "display: block;" to the header
image will fix it.

-- 
-
tim.arn...@gmail.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] How to 'unvisited' links?

[Tim Arnold]

Clearing your browser history will reset all your visited links.  Other than
that, you will either have to change the link, or remove the visited style
from your css.

-Tim

On Mon, Dec 6, 2010 at 10:12 AM, Yu-Hsuan Lai  wrote:

> When I test my page's css, I want to see  element both :link and
> :visited.
> But I have clicked the . How to return it to :link from :visited?
> (without change it's URL?)
>
> --
> Lai, Yu-Hsuan
> __
> 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/
>



-- 
-
tim.arn...@gmail.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] [+] Re: OK to insert block-level tag inside div?

[Tim Arnold]

On Mon, Nov 22, 2010 at 5:02 PM, John  wrote:

> Why does adding 8px to my margin top make that paragraph go as wide as the
> container? why wouldn't it make the text respect the existing space all the
> way around?
>
> Here's the class in question:
>
> .dotted {
>border-top: 1px dotted #000;
>padding: 8px 0 0 0;
>margin: 8px 0 0 0; << this margin value makes the paragraph go too
> wide!
> }
>
> and the page itself may be seen here:
>
> http://thinkplan.org/workshop/pix/working.html
>
> many thanks!
>
> John
>

It's going wider because you have "margin: 10px;" set on plain old "p".
When you change the ".dotted"  to "margin: 8px 0 0 0;" you are turning
off the 10px margin on left, right, and bottom that was being inherited from
that previous style.

-T
-- 
-
tim.arn...@gmail.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] H tags and style

[Tim Arnold]

On Mon, Nov 22, 2010 at 10:46 AM, Giles, Sarah
wrote:

> I am working on a large site with some designers.
> I have been told to have the h1 tags below the h2 and h3 tags because they
> want the headlines that are lower on the page to be larger and more
> important then the ones higher up.
>
> I think I will still encapsulate this part of the site in a div so as not
> to through off styles from the rest of the site. What do you guys think?
> Should what tags should I use. The style they want the tags to be is styled
> h1 for the site they think (they are having trouble nailing down a style
> guide for this project)
>
> Sarah Giles
>

Hey Sarah,

The beauty of CSS is that you can style your H2s to be larger than your
H1s.  Never pick an HTML tag because of how it looks, pick it because of
what it means.  You should always use a good semantic structure and that
means a single H1 per page (unless you're using html5 doctype) with H2s
below that in the *structure of the content*, and H3s subordinate to the
H2s, etc.

-Tim

-- 
-
tim.arn...@gmail.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] Is this proper use of div tags?

[Tim Arnold]

The H3, image and p can all be styled due to their being inside that div:

.outer h3 {
 font-weight: bold;
}
.outer img {
 float: left; margin-right: .5em;
}
.outer p {
 padding: 0.2em 0;
}

-Tim

On Wed, Nov 17, 2010 at 2:54 PM, John  wrote:

> On Nov 17, 2010, at 11:25 AM, G.Sørtun wrote:
>
>
>  Your example looks like a clear case of "divitis" - meaningless overuse of
>> divs.
>>
>> The following...
>>
>> 
>> Title
>> 
>> descriptive text
>> 
>>
>> ...would be a better and more meaningful source-code, and the use of
>> class="outer" instead of ID is more correct for repeated blocks in same
>> page. No problem with ID on "outer" if you're creating a new page for each
>> such block though.
>>
>>
>
> Heh.."divitus"...I was afraid of that! Well, in your example then, would I
> need to throw a tag around the  tag to indicate image position
> (float, etc) and I guess my  would also need that, as I want to control
> where these things sit. Basically, I want to control the space around both
> image and text, plus make my image top-align with that text.
>
> I haven't played around with your suggestion yet, but I am about to..I
> wanted to send off this question right away.
>
> Many thanks!
>
> John
> __
> 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/
>



-- 
-
tim.arn...@gmail.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] XHTML or not?

[Tim Arnold]

On Wed, Nov 10, 2010 at 12:49 PM, John  wrote:

> I am relatively inexperienced with CSS and HTML..I've made all my own web
> pages, but learn what I need at the time followed by years of doing nothing
> with it until the next re-design.
>
> A tutorial I watched recommended going with XHTML, but some say it's not
> the way to go, and I don't know for sure what the right direction would be
> for me.
>
> Recommendations?
>
> thanks!
>
> John
>
>
HTML vs. XHTML is off topic for css-discuss.  You should try the web design
list:

http://lmgtfy.com/?q=%5Bwd%5D+list&l=1

See also: http://css-discuss.incutio.com/wiki/Off_Topic "Places where it
would be appropriate to discuss such things and ask questions about them:-"





-- 
-
tim.arn...@gmail.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] which tag do i target with css for the hover effect i want

[Tim Arnold]

Since IE doesn't support :hover on an LI tag, you will have to use the
 to get what you want. Start with setting the  to "display:
block;" and all margins and padding on both types of tags to zero. Add
from there understanding that adding padding or margin to the LI tags
will space the hovered blocks out. If you must hover the LIs you will
have to use JS to add a class to them on hover to mimic the CSS :hover
functionality.

- Tim

(Please forgive any typos caused by huge fingers on a teeny phone keybard.)

On Nov 8, 2010, at 7:32 AM, Lisa Frost  wrote:

> Hi,
> I've tried every combination of padding and margin i can think of, on the
>  or the  tag and can not work out which tag i should be targeting to
> get a hover effect where the background colour changes to fill the whole
> menu item (ie box), not just behind the text.
>
> Sorry hard to explain, you can see what i mean by looking at the menu here:
> http://www.diabetespolarflight.org/xhtml/template.html
>
> and css here:
> http://www.diabetespolarflight.org/css/mainstyles.css
>
> Can anyone point me in the right direction?
>
> Thanks
>
> Lisa
> __
> 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] methods of color specifying

[Tim Arnold]

On Fri, Nov 5, 2010 at 2:16 PM, John  wrote:

> I have been looking online for something that will show the color naming
> systems in HTML and CSS so that I can make myself a cheat sheet...
>
> eventually, it'll be second nature, I'm sure.
>
> I know there's the 3-digit method, the 6 digit/character method, and 2 rgb
> methods..
>
> anyone with a link to a handy-dandy thing that nutshells it? I'm having no
> luck finding one myself.
>
> thank you,
>
> John
> __
> 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/
>

Hey John,

This is a crazy long page with lots and lots of conversions:
http://web.njit.edu/~kevin/rgb.txt.html.  Basically, the 6-digit to 3-digit
abbreviation is simply combining the three pairs in a 6-digit hex color:

33 = 333

336600 = 360

ee77aa - e7a

You cannot convert from 6 to 3 if all three pairs are not matching:

123456
ab67gh
12ef89
aabb90 (cannot be ab90 for instance either)

-- 
-
tim.arn...@gmail.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] trouble getting a search form to line up properly

[Tim Arnold]

Warning: quick Firefox test, not checked in any other browsers.


#headerlinks {
 background:url("
http://associationdatabase.com/aws/ASCAI/am/gi/back_headerlinks.png";)
repeat-x;
 scroll left top #C55E01;
 color:#FF;
 float:right;
 padding:10px;
 width:280px;  /*add this to make your div wide enough to accomodate
everything*/
}

.tcssearch {float: right;} /*new as well*/

Cheers,
Tim

On Wed, Nov 3, 2010 at 2:39 PM, Chris Kavinsky  wrote:

> I'm having a constant issue come up and have yet for the life of me
> been able to figure it out, and thought someone in this group can help
> me out. I'm building a site that has a couple of links in the header
> area and want the site search to sit to the right of those links.
> However, the search form is dropping below the links. I've tried using
> a non-breaking space, wrapping it all in a tag, floating, not
> floating, etc. and can't get the damn thing to sit where I want. What
> am I overlooking? Here's the link to the site in progress:
>
> http://associationdatabase.com/aws/ASCAI/pt/sp/Home_Page
> __
> 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/
>



-- 
-
tim.arn...@gmail.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] can't click links in IE

[Tim Arnold]

On Mon, Oct 25, 2010 at 5:04 PM, Theresa Newman wrote:

> if you don't wish to cut up images you can position each  absolutely
> over the large image. give them display block and a height and width
>
>
>
That is what he currently has.  But empty links are terrible accessibility
and I don't see any reason why, if you want a little 16x16 icon to be
linked, not to cut it into a 16x16 icon and wrap the link around it.  That's
not really CSS though, so yes...as was said before, giving the links
"display: block" will fix Kevin's problem.

-- 
-
tim.arn...@gmail.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] can't click links in IE

[Tim Arnold]

If you add "display: block;" to the styles governing those empty  tags
you should be able to click on them in IE.  But as Kevin said, the links are
empty.  You should really put some text in there so they make sense.  You
can hide the text with a negative text-indent of some really big number.

The best solution, though, would be to cut those social icons up into
separate images and put the images inside those link tags instead absolutely
positioning empty links on top of the image.

-Tim

On Mon, Oct 25, 2010 at 12:49 PM, Kevin Rodenhofer wrote:

> This would be why:
>
> 
> http://blog.theseedcompany.org/wp-content/themes/skin/library/media/images/social.jpg";
> width="228" height="72" alt="Connect with social media tools" />
> http://www.facebook.com/oneverse"; class="onefacebook">
> http://twitter.com/oneverse"; class="onetwit">http://blog.theseedcompany.org/feed/"; class="rss">
> http://www.facebook.com/theseedcompany"; class="seedfacebook">
> http://twitter.com/theseedcompany"; class="seedtwit">
> http://www.youtube.com/TheSeedCompany"; class="youtube">
> 
>
> Nothing is contained within the hrefs. You just have one image, and several
> links.
>
>
> On 10/25/2010 12:30 PM, Debbie Campbell wrote:
>
>> In this site:
>>
>>  http://blog.theseedcompany.org/
>>>
>>
>> the social and feed links at the top of the sidebar aren't clickable in
>> IE. I tried z-index, no difference. If I make the background of each  in
>> the box a color rather than transparent or no background, then they become
>> clickable. Can someone point me toward a fix?
>>
>>
> __
> 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/
>



-- 
-
tim.arn...@gmail.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] can't center h1 in Joomla template

[Tim Arnold]

It is the table holding the  that you need to center.  Do the "margin: 0
auto;" on  and it will center. That, or make
that table 100% wide instead of the td inside it.

Cheers,
Tim

On Wed, Oct 13, 2010 at 11:48 AM, Debbie Campbell
wrote:

> I've tried margin: 0 auto; and text-align: center on the H1 tag, its td and
> other elements on this page and cannot get the H1 to center - can someone
> help me out?
>
>  http://beverlylanzetta.net/art-store.html
>>
>
> --
> Debbie
> www.redkitecreative.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/
>



-- 
-
tim.arn...@gmail.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] How to link global.css to html page?

[Tim Arnold]

Ah yes, I see that in the pasted code.  I had followed a link to what
appears to be the same content minus the  that you found.  (
http://www.otekno.biz/kontak.html)


On Wed, Sep 29, 2010 at 10:58 AM, Philip Taylor (Webmaster, Ret'd) <
p.tay...@rhul.ac.uk> wrote:

> Aren't these the  and  referred to, Tim :
>
>  http://www.otekno.biz/ps";>Easy
>> shopping
>>
>
> ** Phil.
> 
>
> Tim Arnold wrote:
>
>> Also, it appears that none of the elements in your page are being targeted
>> by your CSS.  You have styles defined for "p" and "a" but there are no
>> or  elements in your page (with the exception of the red "home" link in
>> the table header. Speaking of which, I'd get rid of that entire table and
>> just use paragraphs, a UL, or something more meaningful wrapped in a div
>> to
>> size your overall container.
>>
>> -Tim
>>
>


-- 
-
tim.arn...@gmail.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] How to link global.css to html page?

[Tim Arnold]

Also, it appears that none of the elements in your page are being targeted
by your CSS.  You have styles defined for "p" and "a" but there are no 
or  elements in your page (with the exception of the red "home" link in
the table header. Speaking of which, I'd get rid of that entire table and
just use paragraphs, a UL, or something more meaningful wrapped in a div to
size your overall container.

-Tim

On Wed, Sep 29, 2010 at 9:29 AM, Ilham Firdaus  wrote:

> You're absolutely correct.
>
> Thank you very much.
>
> On Wed, 29 Sep 2010 13:59:04 +0100
> "Philip Taylor (Webmaster, Ret'd)"  wrote:
>
> >
> >
> > Ilham Firdaus wrote:
> >
> > > I found a weirdness. I put the css file into separated file but
> > > located in the same directory as where the html page call the css
> > > file.
> > >
> > > But looks like there's no change in my browser displayed.
> > >
> > > Anybody would be so nice to tell me where my mistake?
> > >
> > > Thank you very much in advance.
> > >
> > > #http://www.otekno.biz/global.css
> >
> > Your "CSS" file is actually an HTML file; you need
> > to remove the opening and closing 

Re: [css-d] Flash in iframe coming in above overlays

[Tim Arnold]

In getting Flash to stay underneath dynamic elements, as I understand it,
adding "wmode=transparent" to the Flash is simply the only way.

-Tim

On Wed, Sep 29, 2010 at 10:10 AM, James White  wrote:

> Hello,
>
> I'm looking for any ideas on a way to force flash in an iframe to display
> below overlaid content. I can't get the owner of the flash that's being
> displayed to set wmode=transparent and am pretty much stumped. Any ideas on
> ways this could be done with CSS?
>
> Here's my example page
> http://www.pmengineer.com/HTML/3cffab21180a8010VgnVCM10f932a8c0 If
> you scroll down a bit then click one of the video icons a lightbox comes up
> with a video player, this gets overlapped by the "Audited by BPA Worldwide"
> widget below. I'd appreciate any ideas.
>
> -James White
> __
> 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/
>



-- 
-
tim.arn...@gmail.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] :after and :before psedo elements.

[Tim Arnold]

On Aug 26, 2010, at 4:09 PM, Thierry Koblentz  wrote:
>
>> 200
>>
>> With css for one page
>> .negative:before {content: '-'}
>>
>> And for the other page,
>> .negative:before {content: '(';}
>> .negative:after {content: ')';}
>
> I'm not sure this a good example as this added content is only served to a
> few users...


I'm further not sure if this is a good example because if you don't
have either a minus symbol or parens in the markup your number is not
negative except presentationally.

- Tim

(Please forgive any typos caused by huge fingers on a teeny phone keybard.)
__
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 images - understanding the details

[Tim Arnold]

On Thu, Aug 19, 2010 at 9:39 AM, Alan Gresley  wrote:

> I should remind myself. Floating an element causes it to display as a
> block. Also width and margin values are used.
>
> Lucky me, I didn't need Philippe to remind me this time.
>
>
> --
> Alan http://css-class.com/
>
>
I'm not so sure that it causes it to display as block so much as makes the
styles noticeable when they might not otherwise be.  On the same test page,
the second image has no float and all rules are still applied.  I changed
the margin from right to left to make it more apparent.

Cheers,
Tim

-
tim.arn...@gmail.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] Floating images - understanding the details

[Tim Arnold]

On Thu, Aug 19, 2010 at 3:47 AM, Alan Gresley  wrote:

> Since IMG are inline elements, then any margin or width values will
> not be used. For the margin and width values to work, one must make
> the IMG display as a block element.
>
> .floatL {
>   float:left;
>   margin: 0 1 em 1em;
>   padding: 0.25em;
>   display: block;
> }
>
>
Actually "display: block;" is not necessary for images to correctly have
width, margin and padding applied to them.  Here is my test page I threw
together to be sure:

http://extranets.beaconfire.us/test/imgfloat.html

Using this CSS:  img {width: 100px; float: left; margin-right: 40px;
padding-bottom: 40px;}

All styles are applied correctly without "display: block;" in all browsers.
Note, the actual width of the image is 267px.

-Tim


-- 
-
tim.arn...@gmail.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/