Re: [css-d] width:100% + padding/margin question
Chang Huang wrote:
> The 10px padding of #box2 will be allocated outside of #box1.
> According to the box model, this is the correct behavior (except for
> buggy IE6). But that is not what I want, I want the padding for #box2
> remain inside #box1 and keeping the width in %.
>
> How can I do that?
For your calculations to work as intended within the W3C box model in
compliant browsers now, you must use percentages on both size and
padding for #box2 and make them add up to 100% of #box1.
Something like:
#box2 { width:96%; height:90%; padding:5% 2%; }
(It's a case for CSS table, me thinks.)
You'll (probably) be able to let the browsers subtract 10px padding from
100% size and then add the padding, some day in the future...
...but for now you'll have to do those calculations yourself before
entering them into CSS.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] width:100% + padding/margin question
Hi,
If I have:
Code: Select all
and I do:
Code: Select all
#box1 { width:500px; height:200px; }
#box2 { width:100%; height:100%; padding:10px; }
The 10px padding of #box2 will be allocated outside of #box1.
According to the box model, this is the correct behavior (except for
buggy IE6). But that is not what I want, I want the padding for #box2
remain inside #box1 and keeping the width in %.
How can I do that?
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Link rel="appendix stylesheet"
Il giorno 22/ago/08, alle ore 01:15, Kus Cámara ha scritto: > Hi. > I've been seeing the css code used in acid test 2 and I've found the > "rel="appendix stylesheet" in a element. This method is not > supported by IE 6 and 7. > > Somebody knows which is the use of the "appendix" value? > > Thanks. Appendix: Refers to a document serving as an appendix in a collection of documents. http://www.w3.org/TR/REC-html40/types.html#type-links -- ilduca69 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Resources
On Aug 20, 2008, at 2:57 AM, Bill Brown wrote: > Aside from the W3C pages, the CSS-D wiki and this list, where do you > go > for information about CSS? > For the more senior members of this list, what would you consider the > absolute worst practices, and conversely, the best practices? Coming late to the party… Resources that haven't been mentioned: the HTML validator (extremely important to have a valid document/DOM tree to work with) and CSS validator (syntax checking). The other resources I use: www-style mailing list and archive, the specs (!) - and take some time to read the errata to the specs, developer drafts of upcoming specs. Under best practices, Georg made a good summary. - Again, take time to read (and read again and again) the specs. - Kiss: keep your stylesheets and selectors simple - Understanding and make use of the cascade worst practices: - copy/paste a method/layout/trick/hack/ without taking even the minimum of time to understand; because someone said it fixed 'it' for him/her. - reset.css > Wow--you read this far down, eh? > Thanks again! Why, yes :-) It looks like a quite extensive seminar. Good luck with it. > David, thanks for your input. I'd love to chat more, but I'm > rebuilding > my entire site so that all the content is created with the Yahoo JS > Library with a Flash-based interface embedded in a Java applet. ;-) Lol. Can't wait to see it. On my default browser with Java disabled, FlashBlock active and Yahoo JS blocked in my host file :-). Couldn't resist… Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Link rel="appendix stylesheet"
On Aug 22, 2008, at 8:15 AM, Kus Cámara wrote: > I've been seeing the css code used in acid test 2 and I've found the > "rel="appendix stylesheet" in a element. This method is not > supported by IE 6 and 7. > > Somebody knows which is the use of the "appendix" value? It is a bogus value for the 'rel' attribute as related to stylesheets, and should be ignored by a conformant UA. That is, it should have no effect on whether the linked styleheet is applied or not. It is used in the Acid2 test as a test (doh !), to check if the syntax is correctly parsed. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Link rel="appendix stylesheet"
Hi. I've been seeing the css code used in acid test 2 and I've found the "rel="appendix stylesheet" in a element. This method is not supported by IE 6 and 7. Somebody knows which is the use of the "appendix" value? Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Getting my CSS-D password...
Austin, Darrel wrote: > It seems that to get a password reminder, one needs to know their > password. > (Am I missing something obvious? That's certainly likely...) Hi Darrel, If you visit this page: http://lists.css-discuss.org/mailman/options/css-d and enter the email address you used to sign up and click the remind button at the bottom of the page, you'll receive your password in your inbox. Assuming this is the email address you used to sign up, I went ahead and pasted your address in and clicked the remind button, so you should receive a reminder soon. (I was already there.) Hope it helps. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Getting my CSS-D password...
I hate being *THAT* person, but looks like I have to be this time... I don't have my CSS-D password anymore, so went to the site to get a reminder and noticed a catch-22: http://www.css-discuss.org/mailman/listinfo/css-d/ -- To change your subscription profile (set account options, *get a password reminder*, and so on), enter your subscription email address and *password* -- It seems that to get a password reminder, one needs to know their password. (Am I missing something obvious? That's certainly likely...) -Darrel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Resources
david wrote: > Make your HTML present the page information in a readable, usable (to a > basic extent) browser view without CSS and (IMHO) Javascript. Add as > little markup as possible to style it using as simple a set of CSS as > possible. Tweak until it provides the information in a functional and > usable way. Then explore the coin called progressive > enhancement/graceful degradation ... Ah, how I love progressive enhancement. > But, then, I'm kind of old-fashioned. I go to websites for information, > not for graphical whizbang cutting-edge doohickies. (Most of the most > useless/unusable websites I've ever encountered have been the home pages > of web design firms. They feel like they have to pull out every stop and > whistle, sometimes, and Devil take the usability!) I agree. I think we get too many zealots from all camps: - Only CSS, No JS, Flash, images, ...text! - JS blows CSS away! Everything should be JS! - I can rule the world with Flash, Mr. Bigglesworth! The bottom line is that these days, we can't afford to be a purist of any kind, except when it comes to accessibility. That's the real point of a website: putting information out there for people to /access/. Seems obvious. That need not mean that your site contain no images and no Flash or be just a simple block of text. The wise and judicious use of any of these technologies is justified, especially when implementing progressive enhancement. If the user supports CSS, give them the pretty layout. JS? Here's some nifty GUI effects to make your stay nicer. Flash? Here's a video about us and some fancy fonts. No Images? Here's a text version of our header. Screen Reader? Hey, look, all our image tags have alt attributes, etc. I'm reminded of my acting days when I would meet method actors. That was it; that was their only tool: the method. One trick ponies. Like a mechanic who works on your car with only a hammer. For me, I work with six tools: HTML, CSS, JS, PHP, MySQL and Apache. If any one of those tools does the job better while improving and at least not detracting from usability, then that's the right answer and I can't afford to be religious about any of the other technologies. I tend to be anti-Flash over and above anything else because it's over-use and abuse on the internet has conditioned me to hate it. I don't even install the plug-in anymore on any of my machines. It's a failing though based on my previous statement, because it has a use and ignoring it for spite doesn't help my clients who want to show videos on some pages of their sites. David, thanks for your input. I'd love to chat more, but I'm rebuilding my entire site so that all the content is created with the Yahoo JS Library with a Flash-based interface embedded in a Java applet. ;-) Best Regards, Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Resources
David Hucklesby wrote: > One more benefit to this, rarely mentioned, is that it makes writing > of print styles almost trivial. Too true. > Bill - Do please mention the importance of creating print styles. It was on the syllabus, but covered in the Media Specific Styling section and not Best Practices. I'll touch on it in both places because I agree that it is important. Thanks much, David. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Removing margin from photo gallery end boxes
You could use server-side scripting to add class="last" to the fourth and
then set
li.last a{
margin-right:0px;
}
Not really a CSS solution, but there you go. Alternatively you could put an
equal amount of margin on either side of the a to make them line up without a
gap to the right
Cheers
mark
-
Hi there,
I wondered if anyone can help me. I use the css below to create nice
thumbnail boxes for my photogallery but I want the last thumbnail in
each row not to have any margin because with margin it the row is too
large for it's container.
This is the standard list I use:
*/ Row 1 /*
image here
image here
image here
image here
*/ Row 2 /*
image here
image here
image here
image here
What css would I use to put an 'end' style to remove the margin at the
end of each row please?
.pp-thumbs {
margin: 0;
padding: 0;
padding-left: 15px;
padding-right: 0px;
list-style: none;
}
.pp-thumbs li {
float: left;
margin: 0;
padding: 0;
background: none;
}
.pp-thumbs li a {
float: left;
display: block;
margin: 0 14px 10px 0;
padding: 6px;
border: 6px solid #dbd5c5;
background: #fffefa;
}
.pp-thumbs li a {
margin-bottom: 15px;
}
.pp-thumbs li a:hover {
border-color: #fff;
background: #fff;
}
.pp-thumbs li.active a {
border-color: #383d44;
}
--
Regards
Karl Bedingfield
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Problems
Hello, Firstly I'm having problems with my website in IE - it's all fine in Firefox but in IE the blue logo isn't to the right but in the centre and the white writing at the bottom moves up - any ideas why? (the site is www.slrecords.net/test/childreninc/index.html the css www.slrecords.net/test/childreninc/master.css) Secondly is there somewhere a list of IE problems, so if you design a site for, say Firefox, and then check and see what's likely to be an issue? Thanks Ed __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Resources
Thierry Koblentz wrote: > Hi Bill, > I don't see in your list "stacking context/z-index", so I'd like to suggest > this link as a resource: > http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp > Also, when it comes to image replacement, I think this one came late and is > not in the popular old lists of "Image Replacement Techniques": > http://tjkdesign.com/articles/tip.asp > And since you list "frames" among the topics, I thought I should plug that > one too ;) > http://tjkdesign.com/articles/frames/default.asp > Good luck with the conference. > PS: btw, I've listed your site on > http://tjkdesign.com/misc/friends_and_colleagues.asp; I don't thing that > should be a problem, but since I'm sending you this email, I thought I'd > ask... Hi Thierry, Three excellent resources, and ones I've referred to in the past. I also agree with your simplified hooks advice from the last email, an email I wanted to respond to but hadn't gotten the chance. Also agree on the removing superfluous css rules. This is a week long conference. My first session is a four hour (!) session before the conference begins. My syllabus has grown to be perhaps a bit ambitious for such a short session, but a quick look at many government sites (here in the United States at least) shows a great need for a much fuller implementation of good css. I plan to pack in as much as I possibly can and to provide comprehensive printed and online resources for later reference. Ambitious, yes, but after half a look at the sites online today, I think the need has become critical. To be honest, though, the length of this syllabus probably stems more from my obsessive compulsive desire for comprehensive preparedness. I just don't want to be caught standing around for an hour and a half with nothing more to add about css. Being added to your list of friends and colleagues is an honor. I've also added you to my List of Notables on TheHolierGrail.com (right above Peter-Paul Koch), though I plan to revamp THG within the next few weeks, so the location and look might change soon. In any event, thank you for both your emails. Over and above any online resource or book, I think the greatest resource for someone working with css (and websites in general) is this list. Your advice, experience and willingness to offer your input prove that you are an important part of the usefulness of this list. Thank you (and everyone who offered resources) for freely offering access to your knowledge, experience and general good nature. Best Regards, Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Let's compare books
hi css, I'd like to connect with you on Goodreads so we can share book recommendations. http://www.goodreads.com/friend/[EMAIL PROTECTED]&i=LTM2MDY4NDY4NDU6MzEy &n=css&utm_medium=email&utm_source=invite - Melissa ([EMAIL PROTECTED]) To opt-out of future invites to Goodreads please follow this link: http://www.goodreads.com/user/block_email?inviter_id=257109&utm_medium=email&utm_source=invite This email was sent by request to [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Removing margin from photo gallery end boxes
Hi there,
I wondered if anyone can help me. I use the css below to create nice
thumbnail boxes for my photogallery but I want the last thumbnail in
each row not to have any margin because with margin it the row is too
large for it's container.
This is the standard list I use:
*/ Row 1 /*
image here
image here
image here
image here
*/ Row 2 /*
image here
image here
image here
image here
What css would I use to put an 'end' style to remove the margin at the
end of each row please?
.pp-thumbs {
margin: 0;
padding: 0;
padding-left: 15px;
padding-right: 0px;
list-style: none;
}
.pp-thumbs li {
float: left;
margin: 0;
padding: 0;
background: none;
}
.pp-thumbs li a {
float: left;
display: block;
margin: 0 14px 10px 0;
padding: 6px;
border: 6px solid #dbd5c5;
background: #fffefa;
}
.pp-thumbs li a {
margin-bottom: 15px;
}
.pp-thumbs li a:hover {
border-color: #fff;
background: #fff;
}
.pp-thumbs li.active a {
border-color: #383d44;
}
--
Regards
Karl Bedingfield
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Way off-topic discussion [was: Forms]
Yes it is. It has a very loose connection with CSS and nothing to do with the original subject line "Forms", whatsoever. I'm surprised that the List Moderator hasn't put a stop to it, or at least insisted that the subject line is changed. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: James Leslie To: css-d Sent: Thursday, August 21, 2008 11:14 AM Subject: Re: [css-d] Forms ...I think this may be drifting off-topic here. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forms
-Original Message- > According to these statistics > http://www.w3schools.com/browsers/browsers_stats.asp > Firefox is used by > about 42% of the population with IE7 and IE6 combined making up 51.7% > of usage with IE7 just under 27%. I think these stats might only refer > to those that access that site. Maybe FF is the predominant browser > amongst web folk? I think those stats are very much skewed to the audience: web 'professionals' (I hate to use that term since I've found much on w3schools is really aimed at amateurs). I do some work for a much more general-purpose audience, and while the overall traffic is relatively low, the browser ratios are more like IE 77%, FF 17%, Safari 4%, Opera < 1%. It pains me to say it, but Firefox is still really a minority browser. --- I think this may be drifting off-topic here but here is some stats from Wordpress that should be pretty accurate for the web as a whole, due to the variety of sites on there: http://ma.tt/2007/08/browser-stats/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
