Re: [css-d] Flexbox question
On Tue, 25 Apr 2017, crestchristop...@gmail.com wrote: What is that image ? I know what it is but it appears as junk ? It's a screenshot of the page in question. Christopher From: Chris F.A. Johnson Sent: Tuesday, April 25, 2017 7:57 PM To: CSS Discussion Group Subject: Re: [css-d] Flexbox question On Tue, 25 Apr 2017, Nancy Johnson wrote: In the past I used it only for equal heights only but there is a great deal I am learning about. It is a very powerful tool. You do have to be careful for older browsers and have a fall back for those. This link has been very helpful for me https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg -- Chris F.A. Johnson, <http://cfajohnson.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] Flexbox question
On Tue, 25 Apr 2017, Nancy Johnson wrote: In the past I used it only for equal heights only but there is a great deal I am learning about. It is a very powerful tool. You do have to be careful for older browsers and have a fall back for those. This link has been very helpful for me https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg -- Chris F.A. Johnson, <http://cfajohnson.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 causes the space at bottom of squares?
On Thu, 22 Sep 2016, John J wrote: Yeah..that sounds good. Easy enough to make that change. Why does the space happen in the first place? Why does images being inline cause it? Because an inline image sits on the baseline, just like text. The space beneath is where descenders would be. -- Chris F.A. Johnson, <http://cfajohnson.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] Setting Element to original spot in class ?
On Sun, 8 May 2016, Crest Christopher wrote: Even if the style for the class is empty, the element is not in it's default position as if I completely removed the class, that is what I don't understand. Are you sure the class is not styled in any CSS file? Please provide a URL so that we can see the problem. Tom Livingston <mailto:tom...@gmail.com> Sunday, May 08, 2016 1:19 PM Sounds like you are adding a class that has styles associated with it already. On Sunday, May 8, 2016, Crest Christopher <crestchristop...@gmail.com> Crest Christopher <mailto:crestchristop...@gmail.com> Sunday, May 08, 2016 12:23 PM When I add a class to an element which otherwise doesn't have a class, the element for which I just added the class repositions its self. How can I keep the element in the exact same position it was before adding the class ? I've tried margins and positioning but that doesn't set the element back to it's original spot, the only way I can get it back to it's original spot is by removing the class. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Chris F.A. Johnson, <http://cfajohnson.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] Setting Element to original spot in class ?
On Sun, 8 May 2016, Crest Christopher wrote: When I add a class to an element which otherwise doesn't have a class, the element for which I just added the class repositions its self. How can I keep the element in the exact same position it was before adding the class ? I've tried margins and positioning but that doesn't set the element back to it's original spot, the only way I can get it back to it's original spot is by removing the class. You probably have that class in a CSS file. A URL would help. -- Chris F.A. Johnson, <http://cfajohnson.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] div backgound shows below content when it shouldn't
Try img { display: block } or img { display: inline-block }
On Thu, 14 Aug 2014, Tim Dawson wrote:
I'm coding a new site and am struggling with a 'wrapping' problem in the
header.
I have a div containing a CSS animation of five* images which appear
sequentially. The images are absolutely positioned in a stack, except for the
first to load, which has relative positioning. That's done with the intention
of getting the containing div to wrap the images without having to set a
height.
* There's a sixth image, last to load, which fades out initially, but then
doesn't reappear. I did this to avoid loading an image with zero opacity and
having to wait for it to fade in. There are probably better ways to do this,
but that's not the problem here.
Margins and Padding are set to zero (except the image margin-top) so my
expectation is that the div will be the same size as the image plus 48px of
image top margin.
It works except that I always get two pixels worth of the div background
showing at the bottom of the images, and I cannot work out why.
You can see it at: http://webadit.co.uk/hminew3/ (site is far from complete)
For this demo the background colour for the animation div class='pananim'
is bright green. The 48 pixel gap at the top is deliberate (that's where the
navigation will go).
The relevant CSS is:
.pananim {
position: relative;
margin-bottom: 0; /* set elsewhere too, but inserted here in hope */
background-color: #0F0; /* for demo only */
}
.pananim img {
position: absolute;
top: 0;
left: 0;
margin-top: 48px;
width: 100%;
opacity: 0;
}
.pananim img:first-of-type {
position: relative;
}
The two pixel line disappears if I remove the relative positioning of the
first image, but then the animation div collapses, and the main page
heading 'Welcome to Mull Iona' (purple text) appears above the images.
I can, of course, make the problem 'go away' by changing the background
colour, but I'd rather know why it happens and correct the CSS.
I fear I can no longer see the wood for the trees, and would be grateful for
some help, please.
Regards,
Tim Dawson
--
Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Thu, 24 Jul 2014, John wrote:
Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?
Or is
body
{
font-size:100%;
}
—with the underlying hope and assumption that 100% is understood to
mean 16px and from there the leap that 1em equals the 16pixels — all
we have in that toolkit?
Why would you want it to necessarily be 16px? It it were, it would
be too small for many people to read comfortably.
In my browser, font-size:100%; means 22px, a good size for me to
read easily.
--
Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Fri, 25 Jul 2014, Tom Livingston wrote: Lack of rem support is easily taken care of with a fallback declaration using px: Font-size:16px; Font-size:1rem; Better still, using em or %: font-size: 100%; font-size: 1rem; This allows MOST browsers to use a relative font unit - honoring a users preference for font size - without the compounding issues (and any other) of the em. -- Chris F.A. Johnson, http://cfajohnson.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 issues displaying height of div
On Fri, 25 Jul 2014, Richard Wendrock Forum wrote: Does anyone know of an issue with FireFox not displaying the height of a div properly? The column on the right with the blue background appears correct in IE and Chrome. For some reason the column does not extend below the link. http://advres.thehomepagestore.com/consulting_unconventional_resources.php This is what I see: http://b.cfaj.ca/thehomepagestore.jpg -- Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Thu, 24 Jul 2014, John wrote: On Jul 24, 2014, at 8:18 AM, Tom Livingston tom...@gmail.com wrote: ems are relative to font size. Given a browser default of 16px, 1em = 16px. If you have something set at font-size: 120%;, that's 120% bigger than 16px (1em) so, like Chris said, it would be 19px (rounded down) or 1.188em; This is my understanding, too…so given that my body font-size is set at 100%, should not padding-left:1.25em; be 1.25em in size? What I’m seeing is much larger. http://www.coffeeonmars.com/170_su/template/home.html Put a 1px border round the elements in question so that you can see exactly where they are. It helps to distinguish between margins and padding (padding is inside th$ -- Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Thu, 24 Jul 2014, John wrote: On Jul 24, 2014, at 8:40 AM, Chris Rockwell ch...@chrisrockwell.com wrote: I don't think you're recognizing that em's inherit from their parent. - #header-logo is a child of h1 - h1 has a font-size of 2em (set by user agent stylesheet) - #header-logo therefore has a base font-size of 2em, or 32px (assuming 16px is the base) - Padding #header-logo by 1.25em is equal to (32 * 1.25)px. Make sense? If you want to pad it 20px (1.25em of document base font size), you would need to set padding-left to 0.625em Hopefully I haven't muddied the waters. No, actually you have un-muddied the waters. So I “did this to myself” in a sense, by wrapping that logo in an h1.. So, I either have to keep track of the math, or…is there another, better way I should have built that lock-up? I guess I was going for better SEO by wrapping my logo in an h1 which, now that I re-examine, seems like pretty weak sauce… Perhaps I’d best wrap the logo in a regular div with an id of ‘header-logo’ ? Note that you can also specify font-size in rem, which is relative to the BODY's font-size. See http://t.cfaj.ca/emsize.html. -- Chris F.A. Johnson, http://cfajohnson.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] make image bottom-align?
On Wed, 23 Jul 2014, John wrote: it is: http://www.coffeeonmars.com/170_su/template/home.html the image is controlled by #social-main and it’s containing div is #main_header http://t.cfaj.ca/pictest/ -- Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Wed, 23 Jul 2014, John wrote: On Jul 23, 2014, at 8:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Large ? What is the size you want ? I am hoping that ems will be the same size across the board throughout the page…my understanding is that they’re appx equal to 16px. An em is the same as the font-size; if your font-size is 120%, an em will be 20% larger than in a block where the font-size is 100%. -- Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Thu, 24 Jul 2014, Chris F.A. Johnson wrote: On Wed, 23 Jul 2014, John wrote: On Jul 23, 2014, at 8:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Large ? What is the size you want ? I am hoping that ems will be the same size across the board throughout the page…my understanding is that they’re appx equal to 16px. An em is the same as the font-size; if your font-size is 120%, an em will be 20% larger than in a block where the font-size is 100%. See http://t.cfaj.ca/emsize.html. -- Chris F.A. Johnson, http://cfajohnson.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] why are ems rendering large?
On Thu, 24 Jul 2014, Crest Christopher wrote: A 120% font-size is 140%, correct ? I rather verify then assume I understand it correctly ! No. 120% is 120%, i.e. 20% larger than the body (actually than its container's) size. 140% is 40% larger. IOW, if the body size is 16px, 120% is 19[.2]px. Chris F.A. Johnson wrote: On Wed, 23 Jul 2014, John wrote: On Jul 23, 2014, at 8:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Large ? What is the size you want ? I am hoping that ems will be the same size across the board throughout the page…my understanding is that they’re appx equal to 16px. An em is the same as the font-size; if your font-size is 120%, an em will be 20% larger than in a block where the font-size is 100%. -- Chris F.A. Johnson, http://cfajohnson.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] Horizontally align/restrict caption to bottom of photo of unknown width
On Thu, 18 Jul 2013, Micky Hulse wrote: Just curious if anyone knows of a CSS3 technique that would restrict a photo's caption (in this case, I want to use figure and figcaption for the markup) to the bottom of a photo of an unknown width? This may not be what you want, but thanks for giving me the idea: http://t.cfaj.ca/imgcap.shtml -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why does shadow disappear?
On Sat, 8 Jun 2013, COM wrote: I believe I found the problem: failure to close a div tag… this is by far and away my #1 coding problem. Which is why you should validate your pages. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Containers and height
On Wed, 22 May 2013, r...@thedesignedge.com wrote: In a non responsive page I am wondering if anyone has any advice on getting a container div to expand to the content within. Make the page responsive. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Replacing text link with image
On Fri, 3 May 2013, J.C. Berry wrote:
I forgot, I still have a problem with the nav items (background images)
jumping when one is moused over. This is due to the border appearing on
hover. How could I fix this?
Set a default transparent border:
whatever { border: 2px solid transparent; }
whatever:hover { border: 2px solid red; }
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-size in body selector?
On Thu, 18 Apr 2013, COM wrote: My understanding of font-size spec is: 100% = 1 em = the size of an M and that this is 16px high. 100% is the user's default font size. It could be anything from 12px to 24 px (or larger or smaller) and should be used for any body text on the page. What I am not clear is: where do you tell the browser how large the M is? Is it universally understood that 1 M is 16 pixels high? 1em is the current font-size. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index question
On Wed, 27 Mar 2013, Debbie Campbell wrote: In this site, in the footer, the links in the two boxes are clickable in all the browsers checked so far except Firefox: http://www.redkitecreative.com/dev/prairie/about-us/ I've tried a few different ways of stacking with no better results for FF, can someone help please? I see a lot of problems with the page: http://b.cfaj.ca/redkitcreative.jpg. Perhaps when those are fixed, the other problem will also be solved. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] something overwriting my css?
On Wed, 20 Mar 2013, Angela French wrote:
Hello,
I've got a dropdown menu where the text for the menu items is supposed to be a
dark gray but is coming up white on a white background. I can't find what is
making the color declaration not work. I'd be grateful for any assistance.
The site is here: http://168.156.9.250/WELA/
The issue is found on the drop down menus (for example, under About WELA).
Below is the css for that element. I can make other tweeks such as changing the padding and the effect is immediately seen, but
I can't get that color to behave. The ONLY way I could get it black was to put the style inline on the li like this:
li a href=test.htm style=color:Black!important;Academy Overview/a/li
.dropdown-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #33!important;
white-space: nowrap;
}
It is located in the bootstrap.css file at line 4820. You can see from my
declaration, that using !important didn't get it to work. I don't find anything
in the cascade of style sheets that overwrites it, not is there anything inline.
a, .nav-collapse .dropdown-menu a {color: White !important;}
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] gap between image and background
On Fri, 8 Mar 2013, Angela French wrote: I'm working on my first Twitter Bootstrap site. Here is my link: http://168.156.9.250/WELA/ . At full viewport everything is fine, but at around 906px a light colored line appears at the bottom edge of the colored background area of the image where it meets the background color of the div that the image is in (they are both the same color. The bottom area of the png is transparent so that the leaf appears to be floating over the nav bar below it. This line appears in IE 9, FF 19.0, Chrome 25, Safari. I also see in Safari that the color used in my image does not match the background color of the div even though they are both # c7b619. Any ideas as to the origin of the line and how to get rid of it? Remove all CSS and add it back a bit (or one file) at a time until the problem appears. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] printing parts of a page.
On Sat, 2 Mar 2013, Wade Smart wrote: I finally got it figured out. Little testing helped out :D Please post your solution so others may also benefit. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] printing parts of a page.
On Thu, 28 Feb 2013, Wade Smart wrote:
Ive done that. Sorry, i wasnt clear.
Only one div has a class of print and the rest are all hidden. Because
they do not print, what is there is just a large white gap.
How do you hide it?
Do you use 'display: none' or something else?
'Something else' could cause the problem.
___
Top of the page
{
empty area
}
Div that I am printing.
___
On the paper after printing, the empty area is just a large white
area. So in the large empty area are things like the header on the
page, the nav bar, some text I dont want printed.
--
Registered Linux User: #480675
Registered Linux Machine: #408606
Linux since June 2005
On Thu, Feb 28, 2013 at 7:51 PM, Tom Livingston tom...@gmail.com wrote:
Is there anything above the div that you need printed? If not, try a print
style that hides anything above the desired div or if nothing is above it, make
a print style to pull the div back up the page.
HTH
Sent from my iPhone
On Feb 28, 2013, at 8:26 PM, Wade Smart wadesm...@gmail.com wrote:
I have a div, unfortunately down lower on the page,
that Im printing off. When it prints, it starts printing
about half way down the page. Short of creating another
page just to print from, is there a way to pull the data up
the page?
wade
--
Registered Linux User: #480675
Registered Linux Machine: #408606
Linux since June 2005
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] printing parts of a page.
On Thu, 28 Feb 2013, Wade Smart wrote:
On Thu, Feb 28, 2013 at 8:32 PM, Chris F.A. Johnson
ch...@cfajohnson.com wrote:
On Thu, 28 Feb 2013, Wade Smart wrote:
Ive done that. Sorry, i wasnt clear.
Only one div has a class of print and the rest are all hidden. Because
they do not print, what is there is just a large white gap.
How do you hide it?
Do you use 'display: none' or something else?
'Something else' could cause the problem.
This is what Im using:
body { visibility: hidden; }
div { visibility: hidden;}
.print {visibility:visible;}
So when I print, its only printing that one div.
Change it to 'display: none'.
'visibility: hidden;' just hides it, it doesn't remove it from the
page. (Did you try it on the screen as someone else suggested? If
you had, that would have given you the answer.)
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal menus
On Fri, 22 Feb 2013, Anthony wrote: Sorry guys. Here is the menu I am trying to achieve. What is the best and neatest way to achieve this using css? http://img841.imageshack.us/img841/8483/csssubmenu31024x309.jpg http://t.cfaj.ca/horizmenu.html -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Displaying button and checkboxes in a row
On Tue, 19 Feb 2013, Larry Martell wrote: Sorry for the stupid question, but I'm pulling my hair out with this. I want to display a button and then next to it 3 checkboxes. No matter what I do I cannot get all 4 elements to display in a line. I can get the button and the first checkbox on the same line, but the other 2 checkboxes display below them. Here is my code: input style=float:left type=submit class=submit name=submit_preview value=Generate Report/input div input type=checkbox id=meas_checkbox name=meas_checkbox value=Meas /Meas/div div input type=checkbox id=pr_checkbox name=pr_checkbox value=PR /PR/div div input type=checkbox id=ga_checkbox name=ga_checkbox value=GA /GA/div Why do you have all those DIVs? div input style=float:left type=submit class=submit name=submit_preview value=Generate Report/input input type=checkbox id=meas_checkbox name=meas_checkbox value=Meas /Meas input type=checkbox id=pr_checkbox name=pr_checkbox value=PR /PR input type=checkbox id=ga_checkbox name=ga_checkbox value=GA /GA /div -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS or JavaScript?
On Mon, 18 Feb 2013, bho...@aol.com wrote: No, that's right, I haven't gotten to the part yet of making the text scalable. I know I'm supposed to, and I've been dragging my feet on this issue for a number of reasons. I completely understand pixels and pixel measurement, but EM's always seem like an unknown, undefined, and unclear entity to me. The most common problem is specifying something that's not necessary and preventing the browser from adjusting to fit. Thje problem is exacerbated when that specification is in px. Try leaving out as much as you can, especially heights. I'm not a stupid person, but for some reason, I get confused trying to use them. And old habits are hard to break. I know in my mind how I want the website to look, and I don't want the user changing its appearance around – and I know that's the wrong attitude, because inevitably, somebody will. Honest question though – Are there really that many people on the web that have altered their browsers to show a larger font size? I was just wondering with the percentages are. Eyesight generally deteriorates as people grow older, and we live in an age when the number of older people is growing. The last two people for whom I have designed websites use a larger font size than I do, and my minimum size is 20px. My preferred size is 22px. I wrote this a number of years ago: My monitor is set at a higher resolution than most (span style=white-space:nowrap1280 x 960/span pixels), so I need a larger font size. I sit further back from the monitor than most people do, so I want the text even larger. I need new glasses, so a little larger still, please. That's my default setting. At the end of a long day, when my eyes are tired or itching from allergies, I crank the size up even more. In a message dated 2/17/2013 11:25:47 P.M. Eastern Standard Time, mrma...@earthlink.net writes: On 2013-02-17 22:41 (GMT-0500) bho...@aol.com composed: http://www.sportsmansresource.com/flocalxnewyork_1c.htm Hey thanks. Which browser were you using? Any browser. You don't allow fopr those who use a larger minimum font size. Okay, but that's a whole different issue, no? Okay, I think I have my initial problem solved. I needed to add some more html css to my JavaScript. Doesn't look to me like you did anything to solve the problem Chris was showing you, that sizing text, line-height and/or containers in px is an invitation for your styling to break on encountering a user with a minimum size set in his browser, like this: http://fm.no-ip.com/SS/bruhom01.png By using px as you do it's as if you're styling a print page to be hosted on the web rather than styling a web page. While that's common even for large sites that should have learned better many moons ago, it's unforgiving, fighting against the web's inherent adaptability and flexibility. Disregarding user preferences by sizing in px is unfriendly technique: http://fm.no-ip.com/Auth/rudeweb.html -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list menu item breaking across lines
On Mon, 18 Feb 2013, Chip at Caliber Communications wrote:
http://shootata2-com.cccg-inc.com
When the nav menu has too many items, the last list item (Contact the ATA)
is breaking across lines. I need the items to all wrap in their entirety.
This is the primary issue I need help resolving
Tangentially, in trying to find a solution, I came up with this:
.MenuClass li a {
float: left;
display: block;
}
Add this: white-space: nowrap;
And: .MenuClass { line-height: 2 }
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help aligning images horizontally in a div
On Mon, 18 Feb 2013, Theresa Jennings wrote: My brain is numb. The solutions are probably staring me right in the face. Even Firebug is no help. I am customizing a WP template. I've validated it as much as is humanly possible. I'm modifying the home page, which is a one-column layout. To select just the one-column layout, you need to use the .one-column class. The URL: http://gssg.mindsqueezecreative.com/ The colored backgrounds are just for development. The top of the yellow box needs to be 10px from the bottom of the black box. I can't figure out what's throwing the extra space. You have more problems than that: http://b.cfaj.ca/gssg.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS or JavaScript?
On Sun, 17 Feb 2013, bho...@aol.com wrote: I've been working on rebuilding an old website, and I've encountered a problem with it on Firefox 18.0.2.,and I don't know if the problem is my CSS or my JavaScript. With Firefox, the first Gold Member Listing and first Silver Member Listing appear heavily indented and cut off on the right side. I'm using Windows 7. The page is at: _http://www.sportsmansresource.com/flocalxnewyork_1c.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1c.htm) See also http://b.cfaj.ca/SportsmansResource.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS or JavaScript?
On Sun, 17 Feb 2013, bho...@aol.com wrote: Hey thanks. Which browser were you using? Any browser. You don't allow fopr those who use a larger minimum font size. In a message dated 2/17/2013 7:28:18 P.M. Eastern Standard Time, ch...@cfajohnson.com writes: On Sun, 17 Feb 2013, bho...@aol.com wrote: I've been working on rebuilding an old website, and I've encountered a problem with it on Firefox 18.0.2.,and I don't know if the problem is my CSS or my JavaScript. With Firefox, the first Gold Member Listing and first Silver Member Listing appear heavily indented and cut off on the right side. I'm using Windows 7. The page is at: _http://www.sportsmansresource.com/flocalxnewyork_1c.htm_ (http://www.sportsmansresource.com/flocalxnewyork_1c.htm) See also http://b.cfaj.ca/SportsmansResource.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float issues
On Fri, 15 Feb 2013, Janis Rough wrote: I am trying to understand floats. Please see my demo: http://janisrough.dyndns.biz/css/float_test.html This is how it looks in my browser: http://b.cfaj.ca/rough.jpg I can't get it to work. The measurements on this form have to be 73px first box and 23 pixels the second box with a black border around the top and sides. They don't have to be. Doing that breaks the layout. Take a look at http://t.cfaj.ca/float_test.html -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Let's see if my site breaks badly
On Thu, 14 Feb 2013, Michael Stevens wrote: www.wideopenphotography.com ... It's my first fully liquid layout It's not at all liquid. If I reduce the size of my browser window, I get a hortizontal scroll bar. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font units question
On Thu, 20 Dec 2012, Tom Livingston wrote: It's been quite a while now since i've seen this topic discussed. I'm aware that it used to be Holy War territory, but I have what I *think* is a legitimate questions on the topic. . . Is sizing text in pixels **still** considered a no-no? Of course. I've seen sites recently that used px for font units and even in Chrome (latest Mac and PC) the text did not scale when font sizes were increased from default. Is this becoming the norm because of zoom? Why force users to zoom? I don't use zoom because I have a minimum font-size set in my browser. I ask because of a recent run-in with a layout that would make accommodating font-scaling difficult. Then the layout needs to be fixed. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] no ul list style with reset.css
On Sun, 4 Nov 2012, Koen van der Drift wrote:
Consider the following html5 and css code:
!DOCTYPE html
html lang=fr
head
meta charset=utf-8
link rel=stylesheet href=../styles/reset.css /* from
http://meyerweb.com/eric/tools/css/reset/reset.css */
link rel=stylesheet href=../styles/main.css
/head
body
article
ul class=test
lione/li
litwo/li
/ul
/article
/body
/html
main.css:
.test ul
{
list-style: disc;
}
Only when I remove the link to reset.css, I see the ul with the
disc. Otherwise I see no style. The paths are all ok, I can change
other things with the css file.
How can I have my lists have the disc?
Restore some left margin to UL and remove this rule:
ol, ul {
list-style: none;
}
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 7 still doesn't play nice!~
On Thu, 1 Nov 2012, Andrew C. Johnston wrote: Hi All: I am sorry to bring a IE 7 problem to you all. I am sick of IE 7, so I know some of you are as well. The 3 bullet points for the 3 sections each have one bullet point that prints going down, destroying the layout about as effectively as possible. Wonderful efficiency, Microsoft! What do you mean by prints going down? Do you mean the line wraps? If so, that's perfectly normal; if there's not room for the line, that's what happens. Would you want it to overwrite the next column? Pls have a look: www.rayxi.com This is how it looks in my browser (Firefox): http://b.cfaj.ca/rayxi.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 7 still doesn't play nice!~
On Fri, 2 Nov 2012, Chris F.A. Johnson wrote: ... www.rayxi.com This is how it looks in my browser (Firefox): http://b.cfaj.ca/rayxi.jpg And it's even worse in Chrome: http://b.cfaj.ca/rayxi-chrome.jpg I also forgot to mention that you are serving the page as UTF-8, but it's something else; (emacs recognizes and displays the Chinese (?) characters, but it is apparently not UTF-8). -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Droid RAZR problem
On Fri, 31 Aug 2012, bho...@aol.com wrote: Hey, thanks. Now that's something I haven't seen before. Which platform/device are you using? Is it my CSS? I'm using Firefox 15 on Mandriva 10.2 I haven't looked at the CSS. In a message dated 8/31/2012 12:16:07 A.M. Eastern Daylight Time, ch...@cfajohnson.com writes: On Thu, 30 Aug 2012, bho...@aol.com wrote: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ http://b.cfaj.ca/sportsmansresource.jpg (The page continues like that all the way to the bottom.) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Droid RAZR problem
On Thu, 30 Aug 2012, bho...@aol.com wrote: _http://www.sportsmansresource.com/flocalxnewyork_1a.htm_ http://b.cfaj.ca/sportsmansresource.jpg (The page continues like that all the way to the bottom.) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with nav menu on Mac Safari and Mac Firefox
On Mon, 9 Jul 2012, Spencer, Laura Langa wrote: URL: http://www.bcbsm.com/foundation Problem: In Mac Safari and Mac Firefox, the final navigation option, RESOURCES bumps down to a second line and it should be all on one line. In all PC browsers (IE, Firefox, Chrome) it renders fine. In my browser, both Published Research and Resources drop to the second line. There's not enough room for them all on one line because my default font size is larger than yours. If the width of the design was flexible, there would be room. See http://b.cfaj.ca/bcbsm.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Minimum width for flexible page
On Sun, 20 May 2012, matt1027 wrote: I've got a flexible page layout that uses a max width style to keep it from getting overly wide. max-width: 980px; Generally, 980px is too narrow. It also doesn't take into account the viewers size which van vary over a wide range. For some, 980px will be too wide; for some, it will be too narrow. It is far better to express the max-width in ems. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout problems on first page load only
On Sun, 18 Mar 2012, Rory Bernstein wrote: On this page: http://125.pratt.edu/gallery/searchcategory=featured/featured In Firefox on the mac, the row of yellow tabs (navigation) are spreading out too far when the page initially loads. If you do a page reload, they load correctly (one next to the other), with the whole bar of tabs not being wider than the elements above/below it. I notice on page reload the grey box that says 'did we miss someone' also moves to the left. Any ideas what is wrong here? Also, on the same page, in Chrome, i get a thin grey rule under the row of yellow tabs and I cannot figure out where it is coming from. Thanks! The first step is always to correct your HTML: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2F125.pratt.edu%2Fgallery%2Fsearch%26category%3Dfeatured%2Ffeatured Errors found while checking this document as XHTML 1.0 Strict! Result: 124 Errors, 201 warning(s) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen Resolution Independend CSS
On Wed, 8 Feb 2012, Mrinmoy Ghosh wrote: I design a webpage with CSS in 1280*768 resolution using Absolute positioning. But when I change my screen resolution to 1024*768 then a horizontal scroll bar is come. Can you provide me some tips that how can I disable this horizontal scroll bar ? Do not design for a specific px width; use % instead. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen Resolution Independend CSS
On Wed, 8 Feb 2012, John D wrote: Use body width of 100% or width of the container/wrapper of 100%. Better still, don't specify. 100% is the default. However, if you specify 100%, then margins and padding will be added to that, causing horizontal scrolling. If you don't specify it, they will be subtracted. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE sidemenu rendering problem
On Wed, 8 Feb 2012, Chris Morton wrote: Please consider the side menu http://eigen.com/about/Management.shtml. It renders fine in Chrome, but in IE there is a big gap between the right-facing arrows and the textual menu item. How can I fix this in screenIE.css? First fix the HTML. See http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Feigen.com%2Fabout%2FManagement.shtml If the HTML is invalid, there's no guarantee that all browsers will correct it in the same way. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE sidemenu rendering problem
On Wed, 8 Feb 2012, Chris Morton wrote: OK, I've modified it as much as I dare, although the validator objects to my h1. tag. Removing it makes matters far, far worse. Put the a inside h1; a cannot contain block-level elements: h1a href=../index.htmlinnovation by Eigen/a/h1 So... back to the original question at hand: Please consider the side menu http://eigen.com/about/**Management.shtmlhttp://eigen.com/about/Management.shtml . It renders fine in Chrome, but in IE there is a big gap between the right-facing arrows and the textual menu item. How can I fix this in screenIE.css? -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] TwoQuestions: min/max-width, change layout with width
On Tue, 24 Jan 2012, Ghodmode wrote: On Tue, Jan 24, 2012 at 5:07 PM, Felix Miata mrma...@earthlink.net wrote: On 2012/01/23 10:35 (GMT+0800) Ghodmode composed: 960px is a good max width... for most site visitors. ...where most is as little as 50% + 1 of today's visitors. I consider that a gross exaggeration except in cases where you know your demographic includes no netbook or handheld devices. At the other end are today's high resolution users, and tomorrow's much higher resolution users. IOW, the size of a px, until such future time as a CSS px and a device px are normally not identical, and probably even after that time for a long time to come, if not indefinitely, is an unknown size that bears an unknowable relationship to legibility and usability on users' screens, because px size depends on px density, which varies considerably among environments. I don't know about the original poster's target demographic, but 960px works well on a modern computer It doesn't work well for me, and it works even less well for a friend who needs to crank the font size even more than I do. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I Have a Really Big 'm'
On Tue, 24 Jan 2012, Tim Climis wrote: From my this, it really visually appears as if the em is not an m or an M in even the most plain typeface. That's when the text is centered. If it's left or right aligned, you can fit in two more m. As has been discussed before in this thread, em is not a horizontal measure. It is a vertical measure, and is defined as the size of the font. It may be used for horizontal or vertical measurement, but its definition is based on a vertical measurement, the font-size. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box-shadow don't display on the right side
On Tue, 15 Nov 2011, 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 ?
The photo takes up all the width and the shadow is overflow: hidden.
If the photo is less than 100%, there is room for the shadow.
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Wed, 9 Nov 2011, David Hucklesby wrote: On 11/9/11 5:35 AM, mem wrote: Hello all, On my css layouts, I tend to use *em* for font size and *px* for all the rest. However, I wish not to follow this path any longer, since I wish to embrace the *em* for [almost] all the development. Problem: we use a *960px grid* for styling most of our pages, so the margin or paddings and widths are given on px, and if we convert those, sometimes, we will get weird stuff like: 0.345 em. Question: Will it make sense to create a grid based on *em* ? [...] What makes sense, I think, depends on your design goals. FWIW, these days I size grid horizontal widths in percent; vertical spaces in EMs. Why do you use any vertical space measure? That's asking for trouble. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fw: Re: css measures - em grid system makes sense ?
On Wed, 9 Nov 2011, David Hucklesby wrote: On 11/9/11 6:11 PM, Jay Tanna wrote: --- On Thu, 10/11/11, Jay Tannajta...@rocketmail.com wrote: From: Jay Tannajta...@rocketmail.com Subject: Re: [css-d] css measures - em grid system makes sense ? To: memtalofo.l...@gmail.com Date: Thursday, 10 November, 2011, 2:09 You can convert a px size into em size by using this simple calculations: 1) Most browsers have default font size of 16px; 2) You should set body fonts to 62.50% to make default size of 10px; [...] Question: Will it make sense to create a grid based on *em* ? [...] If you set body font-size to 62.5% all text will appear 20% larger than you expect this end. If you set body font-size to 62.5% all text will appear 37.5% smaller than I like it, and it will be unreadable at that size. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the realities of moving and resizing images
On Mon, 7 Nov 2011, e...@copywritecolombia.com wrote: Basically don't resize images it is a waste of bandwidth just download the image once in the right size for your design and be done with it There is no one right size for a fluid page. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera Type and Menu issues
On Wed, 26 Oct 2011, John wrote: http://coffeeonmars.com/testing/index.html http://coffeeonmars.com/testing/WPR_Wire.html When Opera 11.51 opens these pages, the H1/H2 headline is bigger/fatter and breaks whereas all other browsers (Even pesky win IE6) don't do this to my type. Opera also does weird things with the menu at the left, where next in project gets so large it takes up 2 lines. The H1 also breaks in Firefox because, like many people, I use a larger font-size than you do: http://b.cfaj.ca/coffeeonmars.jpeg. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer alignment
On Tue, 25 Oct 2011, J.C. Berry wrote: I guess Chrome as well. Thanks. ...and Firefox: http://b.cfaj.ca/xifin.jpg First, fix the HTML: Errors found while checking this document as HTML5! Result: 61 Errors, 9 warning(s) On Tue, Oct 25, 2011 at 7:32 PM, J.C. Berry jcharlesbe...@gmail.com wrote: Hello, we are having a problem with our footer alignment in Safari, Opera, and IE. Can anyone take a look? The div#footer ul rule needs some work to align directly under the left edge of the homepage main area. http://www.xifin.com -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] San-Check request on new responsive site(s)
On Mon, 24 Oct 2011, Davies, Elizabeth wrote: Would appreciate a quick check/feedback on my first forays into responsive web development. http://korea.gallup.com (very basic small site, being used to test out concepts) http://strengths.gallup.com (slightly larger, but still small site ... more complexity of forms and navigation) We test against IE7+, Firefox 3.5+, Safari (mac), Chrome on desktop. Only got very rough insight into device testing since my dev environment has no true mobile devices with access, only emulators. These are my testbed sites in preparation for a large scale site redesign of our primary external consumer website in January. I've already found a few 'things that are not so hot' but would very much value any and all feedback. Text spills out of its container: http://b.cfaj.ca/gallup.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css reset line-height
On Thu, 20 Oct 2011, Dougie McGilvray wrote:
Hi, going back through a site to make it usable in IE7. I'm noticing
the root of many problems come from a rule in the section resetting
browser defaults:
* {line-height: 1px}
I notice in Meyer's CSS Reset, the reset is
body {
line-height: 1;
}
Am I correct in assuming this is a typo, one of us has changed it to 1px??
or is there some fix by setting everything to 1px?
No units should be used with line-height, and 1px is obviously very
wrong!
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Experiment: CSS post it note
On Thu, 7 Apr 2011, Gabriele Romanato wrote: Hi, I've often asked myself: 'ok, we can rotate boxes with CSS3, but what this is good for?. Answer: visual effects. Like this: http://onwebdev.blogspot.com/2011/04/css-post-it-note.html Beware of trying to fit text into a fixed-size container: http://t.cfaj.ca/postit.jpg For an example that works with any font size, see http://twd2.cfaj.ca/. (I have just started to redo my site, so there not much there besides the first page.) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Experiment: CSS post it note
On Thu, 7 Apr 2011, Philip Taylor (Webmaster, Ret'd) wrote: Chris F.A. Johnson wrote: Beware of trying to fit text into a fixed-size container: http://t.cfaj.ca/postit.jpg For an example that works with any font size, see http://twd2.cfaj.ca/. (I have just started to redo my site, so there not much there besides the first page.) I don't know how you've produced that rotated panel, It's CSS3: -moz-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); Chris, but it doesn't render well here : http://web-consultants.org.uk/sites/tests/css/Fullscreen%20capture%2007-Apr-2011%20214031.jpg Thanks for that. On my screen the type looks a little wonky, but acceptable. Since it looks worse for some people, I'll remove the rotation. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Down Menu Issue with IE8
On Tue, 5 Apr 2011, cssl...@bassonhook.com wrote: Have a link to a working example? Would be easier to trouble shoot. Sorry guys, forgot to post back after I figured it out. It was something stupid. I somehow removed the html tag after the doctype declaration. Replaced that and everything looks as it should. That shouldn't make any difference; the HTML tag is optional. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Will on-page css override same selector in external style sheet?
On Sun, 20 Mar 2011, Keith Purtell wrote: Didn't find answer to this in my E. Meyer book or on the Web. Say I have a decent external style sheet that works for 85% of my site visitors. Then I decided that the selector for one item used throughout the site -- paragraph (p) for example -- needs to have a completely different set of properties and values for the remaining 15% of visitors. (So, it's not a situation like going into the main style sheet and adding a hack version of one of the property/value pairs within the the paragraph selector.) If I put a conditional comment (a simple if) for the 15% in the head, just below the call for my external style sheet, and include this completely different paragraph style within, will it override the one defined in the external sheet? Or do I need to instead have my conditional comment be an if or that calls up the main style sheet for the majority of visitors and a variant of the main style sheet with the alternate paragraph style? I would use a different class or id attribute on the BODY of the pages that need to be different and select for that. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling table to have blank rows?
On Tue, 22 Feb 2011, Tom Livingston wrote: If only I could stay on this page long enough to inspect it, before being redirected to lynneheller.com http://t.cfaj.ca/table-blank-rows.html Oops! I put the refresh on the wrong page. Now fixed. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-size html
On Tue, 22 Feb 2011, Germán Martínez wrote:
Hello,
I've always used body {font-size: .625em;} as a way to manage more easily the
font-size and I was wondering if using:
html{
font-size: .625em;
}
body{
font-size: 1.4em;
}
will be a better solution, are there any known quirks for defining font-size on
the html element?
Why not: body { font-size: 100%; } ?
That way you will use the size that the user prefers rather than one
that is probably too small to read comfortably (87.5% of the
viewer's comfortable size).
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling table to have blank rows?
On Sun, 20 Feb 2011, Zachary Uram wrote: Hi, I am making a table and I wish it to be like this: [ Table Heading] [ blank row ] [site name] [site URL ] [ blank row ] [site name] [site URL ] [ blank row ] and so on... Besides having to make a separate table for each pair (of site name and URL) is there an easier way to do this so? http://t.cfaj.ca/table-blank-rows.html -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different sizes between FF and IE
On Mon, 14 Feb 2011, Martin wrote: ... Could you advise me how to standardise the height of divs so that I can safely included that kind of background image? You cannot know what font size your viewers are using, so it is impossible to do what you want: http://t.cfaj.ca/pastel/jpg. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different sizes between FF and IE
On Mon, 14 Feb 2011, Martin wrote: On 14/02/11 01:41, Chris F.A. Johnson wrote: On Mon, 14 Feb 2011, Martin wrote: ... Could you advise me how to standardise the height of divs so that I can safely included that kind of background image? You cannot know what font size your viewers are using, so it is impossible to do what you want: http://t.cfaj.ca/pastel/jpg. Thanks Chris, Your link seems to be dead. Sorry, my typo. It should have been http://t.cfaj.ca/pastel.jpg I then approached the task in a wrong way. What's the correct approach? Don't try; you cannot do it. I'd probably have to use smaller backgrounds for particular divs. Is that correct? You will never know the height of a DIV. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to the list and a question..
On Fri, 11 Feb 2011, James Sheffer wrote: ... http://new.thetoyz.com/navcode.abc Wow! 636 Errors, 576 warning(s) http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fnew.thetoyz.com%2F Once the errors are fixed, ask again. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to the list and a question..
On Fri, 11 Feb 2011, James Sheffer wrote: Thanks for the validation news - I guess If I asked someone to validate my code I would have put in the email... If the code is not valid, you cannot predict how the page will be displayed. Fixing it may solve your problem. I also guess since I'm having an issue with this page that it obviously wouldn't validate correctly and I wouldn't be spending my time validating it until I fixed the issue. Invalid HTML may *be* the issue. You cannot know until you have fixed it. The number of error shown may be misleading. Often, fixing one will also correct several subsequent errors. Start with the first error, then check it again. Repeat as necessary. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] browser check
On Fri, 11 Feb 2011, Matthew P. Johnson wrote: I am almost finished with our house site. Can you let me know if it displays correctly in your browser/os? ... http://applegateelements.com/ Is this how you want it to look? http://t.cfaj.ca/applegate.jpg (Which browser and which OS are irrelevant.) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] White space in IE
On Fri, 28 Jan 2011, Mike Davies wrote: I have just set up a site for a fishing festival, www.deveronfishingfestival.co.uk, and have a little problem with the header. This works fine in Firefox but, inevitably, not in IE. It doesn't work well for me in Firefox: http://t.cfaj.ca/deveron1.jpg http://t.cfaj.ca/deveron2.jpg -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Has anyone ever seen rendering differences between Mac OS10.4, 10.5, and 10.6?
On Thu, 27 Jan 2011, Goldsmith, Marissa wrote: Hi all, My apologies in advance for not having a link to the Web site I am talking about - when the issue I noticed came up, I had to make changes to how everything was done, and so the example I'm talking about is no longer live. So please bear with me and my horrible line art. The gist of my question is, has anyone ever noticed CSS rendering differences (especially regarding margins) between the various Mac OS10 versions? You can read on if you want to see specifically what my problem is, but I couldn't find any information on this elsewhere, and was wondering if I had just created a perfect storm, or if this was a known issue. The usual reason is that different people have different defualt font sizes in their browsers, and it has nothing to do with the OS (or even the specific browser). -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop-down navigation without javascript
On Fri, 28 Jan 2011, Ingo wrote: Jess Hardy schrieb am 27.01.2011 23:16 I am currently looking for a solution for creating a single level drop-down that can be activated by the keyboard but does not use the standard suckerfish approach. http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html When I hover over the dark grey block, the menu appears below it; when I move the mouse away, it appears at the top right: http:..//t.cfaj.ca/ddm1.jpg http:..//t.cfaj.ca/ddm2.jpg The new holy grail, fixed width, tho. ... PS: The lists reply settings suck. Every time. Agreed. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] form/ul layout weird in IE
On Wed, 12 Jan 2011, rich...@moremagic.com wrote: Quoting David Laakso da...@chelseacreekstudio.com: Post uri to list. Thanks. ~d Whoops, my mind must have been leaving me at the end of the day.. https://www.moremagicpoints.com/mloyalty/browsercompatability is the address where I placed the page. It's off in other browsers as well. See http://t.cfaj.ca/mloyalty.jpg. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] form/ul layout weird in IE
On Wed, 12 Jan 2011, rich...@moremagic.com wrote: Quoting Chris F.A. Johnson ch...@cfajohnson.com: It's off in other browsers as well. See http://t.cfaj.ca/mloyalty.jpg. What browser is that, by the way? Any browser with a larger minimum font size than yours. The buttons seem off there, but those are a minor concern in relation to the overall form layout, which looks okay to me in your SS. Have the last lines cut off is OK? I'm trying to think of a way so that the four buttons can each take up about 25% of the width of the form so they don't overflow like that though. width: 25% (minus margins and padding). -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Floats followed by paragraphs
On Wed, 12 Jan 2011, Del Wegener wrote:
Good Day;
I frequently float one image right another left and follow that with a
paragraph of text. What is the best method for preventing the text from
creeping up between the two pictures?
See a sample here:
http://www.alliedcorrosion.com/products/manufacturer_introduction.php
Then click on BOX test at the top of the menu on the left.
Do you have a reason for not giving us the correct URL?
http://www.alliedcorrosion.com/products/allied_box_test.php
#container1 p
{
clear:both;
}
Should I enclose the paragraph in a div of width 100%?
P has a width of 100%.
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Sprite Generator
On Fri, 7 Jan 2011, Giles, Sarah wrote: I love using CSS Sprites (http://www.alistapart.com/articles/sprites) But I hate making them in Photoshop. I happen to have one of those essential attributes of a programer (I am lazy). Does anyone know of a program that can take a list of files(say 4) let you define the offset values for the basic size of the sprit, Vertical/Horizontal option, and generate the single file to use? ImageMagick's identify and montage commands and a little scripting. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Web typography with CSS3
On Sat, 1 Jan 2011, Alan Gresley wrote: On 1/01/2011 4:27 AM, Gabriele Romanato wrote: I know but I'm in a hurry... preparing for the New Year night :-D http://css-class.com/test/css/3/css3-menu-tipsy.htm Very rushed transforms with transitions, hiccup. Nice and snappy in Firefox, but slow as molasses in Opera. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Web typography with CSS3
On Fri, 31 Dec 2010, David McGlone wrote: On Friday, December 31, 2010 02:00:15 pm Guy K. Haas wrote: On Fri, December 31, 2010 10:49 am, Chris F.A. Johnson wrote: ... Nice and snappy in Firefox, but slow as molasses in Opera. I get the same results in the these 2 browsers, but I like the molasses in Opera, it give is more of a feel instead of bam! :-) It's so slow in Opera that I wouldn't even see the effect if I were really using the links. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] body has a top-margin that I can not figure out
On Tue, 28 Dec 2010, Greg Wilker wrote: Hello Everyone, I've got a site I am starting on and I can not figure out why there is a padding or margin with the container div/element. http://45minutestonowhere.com/ There's more than that to worry about: http://t.cfaj.ca/45minutestonowhere.jpg Try this: http://t.cfaj.ca/45minutestonowhere.com/. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] close horizontal gutter
On Sun, 19 Dec 2010, David Laakso wrote: Camino/Opera/Safari/FF Go to: http://chelseacreekstudio.com/fa/ Click Next What to do? About what? The Next button works for me. What I would do, though, is position the buttons so that they are always in the same spot. I don't like having to keep moving the mouse (and often having to scroll) to keep clicking Next. See http://photos.cfaj.ca/wg/Cassels-park.html for the way I do it. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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 it because of my code? [correction]
On Sat, 18 Dec 2010, Felix Miata wrote: On 2010/12/18 13:06 (GMT-0500) David Laakso composed: Felix Miata wrote: I stand firm that px is an inappropriate unit for sizing containers for text content. Not everyone in the universe is thrilled at having to scroll both vertically and horizontally in order to read a scaled web page, either. Did the qualifying part (about the _reason_ why horizontal scrolling might manifest) you failed to quote escape your understanding? You write implying as if horizontal scroll was _always_ equivalent to torture. Not always; only 99.9% of the time. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
On Thu, 16 Dec 2010, Gabriele Romanato wrote: During my work I spend a lot of time searching for CSS templates, and I'm always struck by the fact that __all__ the templates I find are non-semantical and with enormous fixed widths... I know that if you want to post something on Theme Forest you have to stick to pixels and divitis but, hey, there's a limit... I guess. So here's my first, basic test/demo: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html comments are welcome, improvements either. criticisms are too easy with me... I'm a psycho workaholic! http://t.cfaj.ca/outsidethebox.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Element a is little bigger than inner img
On Tue, 7 Dec 2010, Yu-Hsuan Lai wrote: My HTML is : --- a class=tool style=padding:0;border:0;margin:0 href=# img height=100% src=img/next_page.png alt=next page / /a --- I think that a should fill up with img, but in fact, img is smaller than a. Like this:http://ppt.cc/RqlC Can I make them the same size? Style the IMG with display:block; -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] nav link states
On Mon, 18 Oct 2010, Dudley Barker wrote: What is the state called when I click on one of a number of links on a navbar and while I am visiting that page, the link stays lit so that if I forget where I am, I need simply glance up at the navbar to see where I am? You should not have a link to the current page. And the million dollar question is: How do I style such? Style it differently from the links. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] nav link states
On Mon, 18 Oct 2010, Chris F.A. Johnson wrote: On Mon, 18 Oct 2010, Dudley Barker wrote: What is the state called when I click on one of a number of links on a navbar and while I am visiting that page, the link stays lit so that if I forget where I am, I need simply glance up at the navbar to see where I am? You should not have a link to the current page. See: http://www.studea.nl/nielsen/nielsen.html, item 10. And the million dollar question is: How do I style such? Style it differently from the links. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Div has scroll bar; can't fix.
On Wed, 15 Sep 2010, Rory Bernstein wrote: http://www.dempseyrice.com/hire_dempsey/ Why is there is a scroll bar on this page? It has something to do with #contentbox; I can set a fixed height to get rid of it, but of course I want the height to be flexible because the content varies so much across the various pages. Remove overflow: auto; -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using em or pixel
On Thu, 9 Sep 2010, Keith Purtell wrote: I've been working on making my css flexible with different browsers/screen resolutions/devices. The best information I've found so far has been the Patrick Griffiths article at A List Apart. In applying the suggestion that I use ems as often as possible, I've found instances where only pixels would give me control. Is there a general guideline about best use of each? What are you using px for? It it's for font size, the control you get is illusory; you get it only when your viewer doesn't use a different font size. If it's for column widths, you may create narrow columns that look like thin trickles down the page. Use px for border widths and images, but little else. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Type sizes?
On Wed, 8 Sep 2010, Lalena wrote:
Hi all,
Pardon my elementary question. I'm going through all my ancient web pages to
make them compatible with current coding rules. And I've discovered that
font size is no longer a valid tag. Is there something that replaces it, so
I don't have to establish styles for everything?
Use HTML for mark up the structure of the page and CSS to adjust the
appearance.
If not, is it possible to establish a default style for all text, without the
text having to reside inside a p or h or any other kind of tag like that
in the html pages? Or do you have to put a tag around every bit of text to
have any control over it?
I currently have this, but isn't it for hyperlinks only?:
a {font-family:Times,serif;
font-size:medium;
color:#ff;
}
You can set default font for the entire page in the BODY:
body
{
font-size: 100%; /* don't use anything else for the default */
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
Then I was wondering how to establish secondary text styles, like if I want a
slightly larger type size for a particular line, but don't want it boldfaced,
as in a h tag. (I know I'd have to put tags around these, just don't know
what kind.)
You can use, for example, a DIV, or a P with a class:
p class=whateverSome text here/p
CSS:
.whatever
{
font-size: 110%;
}
--
Chris F.A. Johnson, http://cfajohnson.com
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
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] Artifact on CSS dropdown menu
On Fri, 3 Sep 2010, Michael Adams wrote: This is a concept website that i am working on. The main issue i am having with it is a line which extends of to the left when the ul:hover is activated in various browsers. There is a gap of a couple of pixels between the parent li and the first child li which seems to get exagerated on different browsers as well. ... http://www.quickconvert.net/index.html I see a different problem: http://cfajohnson.com/testing/quickconvert.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] IE Problem - logo appearing on top of text
On Mon, 30 Aug 2010, Timariane Thornewig wrote: I just tried to adjust the CSS and I created another version of the HTML called: http://www.ashelighting.com/controldesign2.html It's not really solving my problem, but I think I'm getting closer! It's worse! http://cfajohnson.com/testing/Thornewig.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using efficient selectors?
On Sat, 28 Aug 2010, Ville Viklund wrote:
I have a question about efficient selectors. I tried Page Speed extension for
Firebug which analyzed use of efficient CSS selectors among lots of other
things.
Page Speed considered longer(#header ul li a) selectors inefficient and
recommended to fix them.
Is there a good reason to use this kind of selector #header ul li a {...,
instead of just #header li a? Is it considered best practice, or why this
is so commonly used?
I doubt that the difference in speed would be significant, but I'd
use the shorter one on principle.
The longer version can be used if you need extra specificity for
this rule.
--
Chris F.A. Johnson, http://cfajohnson.com
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
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] kthings 02 (Formerly Floating images - understanding ... etc.)
On Sun, 22 Aug 2010, Keith Purtell wrote: http://www.keithpurtell.com/kthings/a_body_vance_divs.htm http://cfajohnson.com/testing/keithpurtell.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Fwd: Clear Float? Help
On Mon, 9 Aug 2010, css man wrote: I started a page at: http://cssman.webs.com/testbuttons.html I cannot get the orange box to mesh up with the Headline goes here... line. I tried using br style=clear:both / but it didn't seem to make a difference. First, fix the HTML errors: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fcssman.webs.com%2Ftestbuttons.html Errors found while checking this document as HTML 4.01 Transitional! Result: 6 Errors, 3 warning(s) They may or may not be causing the problem, but fixing errors is always the first step in getting a page to work. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] navigation link a different colour when page is active
On Mon, 2 Aug 2010, Philip Taylor (Webmaster, Ret'd) wrote: Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) I like the consistency of all links leading away from the current page. Links to the current page can be confusing. Because a Library file, SSI or similar is used to insert a fixed set of link. When I want to use the same file fro links on many pages, I use SSI to run a script that removes the link to the current page. In neither case can your suggestion be followed as-is. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Use of empty DIVs?
On Mon, 12 Jul 2010, Val Dobson wrote: I use Find and Replace. What do you use? I don't use anything because I don't use names that are presentation related. Presentation belongs in CSS not HTML. On 11 July 2010 22:00, Chris F.A. Johnson ch...@cfajohnson.com wrote: #leftcol is not a good name. What if the design changes later and that column is on the right? -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)__ 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] Use of empty DIVs?
On Sun, 11 Jul 2010, Tim Offenstein wrote: I'd like some feedback on this. I'm teaching a class on web design to students who've had various levels of training. I'm seeing a number of students mark up their XHTML Why XHTML? with descriptively named DIVs that have no counterpart in the CSS. Is this some kind of XML holdover or what? Am I missing some coding practice or method for why this is being done? I don't recommend this because (1) it clogs up the HTML with useless stuff, and (2) there's potential to break the page if a DIV isn't closed. If a DIV isn't closed, it's not valid [X]HTML; it should get a failing grade. If this is an attempt to section/categorize the code, simple HTML comments will serve the purpose much better. The classes and IDs can be used later when the CSS is modified. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Use of empty DIVs?
On Sun, 11 Jul 2010, Val Dobson wrote: I agree with you. Information within the code that's meant for humans to read should go into comments; div and ID names themselves should be fairly descriptive anyway (#maincontent, #leftcol etc.). #leftcol is not a good name. What if the design changes later and that column is on the right? -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Tool to tell me where a rule is used
On Thu, 8 Jul 2010, Ellen Herzfeld wrote: Hello, I am doing a make over of a large site. There is a lot of tweaking. I use firebug and the webkit dev tools (and even the IE dev tools sometimes) but I'm looking for something different. When I go over my stylesheets to clean them up and organize them in a way that's comprehensible to me at least, I sometimes wonder why I have this rule. I use some classes and ids for the selectors when I can't figure out how to do otherwise, but I mostly try to avoid having them all over the place. When the stylesheet starts getting a bit long I find that the reason for a rule isn't always totally obvious and it sometimes takes me a while to remember or figure out where it is used. I also want to avoid putting comments everywhere. I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? There's a standard tool on *nix systems called grep. For example, searching for the class 'nav', this will print the line numbers as well as lines containinf it: grep -n 'class=.*nav.*' file.html I believe it can be installed on Windows systems. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
On Tue, 29 Jun 2010, Donald Fruy wrote: On Tue, Jun 29, 2010 at 7:39 PM, r...@catjuggling.com wrote: I have a page up at http://efri.dreamhosters.com and is loking fine in Firefox, Chrome and Safari, but IE8 looks broken as hell. Add a doctype and bring it back. There are also errors in the CSS. For example, there is a missing semicolon on line 22. Try validating the CSS. Russ Hi, and it's important to close properly each open tag !doctype html html head /head body /body !-- don't forget this -- /html !-- and this -- The closing tags for BODY and HTML (as well as HEAD and some others) are optional in HTML4.01. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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/
