What is Digg?Sponsored by Newegg.com
$5,000 Newegg Eggstreme Challenge Video Contest Extended to 11/15 view!
newegg.com - Show them what YOU would do with the money you save by shopping at Newegg. Seriously, show them...
23 Comments
- GrahamStw, on 10/12/2007, -6/+28"No official guide?"
Umm.. what about the CSS spec?
It covers all the shorthand notations as well.
Background: http://www.w3.org/TR/CSS21/colors.html#propdef-background
Font: http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
Border: http://www.w3.org/TR/CSS21/box.html#propdef-border
Margin: http://www.w3.org/TR/CSS21/box.html#propdef-margin
Padding: http://www.w3.org/TR/CSS21/box.html#propdef-padding
etc etc - smitting, on 10/12/2007, -2/+12Oh. Shorthand guide. This guy is meaning instead of
border-width: 1px;
border-style: solid;
border-color: black;
use
border: 1px solid black;
I appreciate the effort, but I'm not sure anyone missed that part of the css guide.
One thing that would have been useful in this guide that was not there:
font: 12pt arial bold;
font: bold 12pt arial;
only the 2nd line is bold, because bold is in the wrong order on the 2nd. - jedikv, on 10/12/2007, -0/+2i did not find it especially useful, but im sure someone will
- michaelphipps, on 10/12/2007, -0/+2Yes - the shorthand is harder to read - but quicker to download. Not quite so important for low traffic websites - but for high traffic websites, smaller files can help reduce bandwidth costs, and improve performance.
- sensibledriver, on 10/12/2007, -1/+3Buried as amateur hour.
- apothe, on 10/12/2007, -4/+6Yeah, but this way you don't need to scroll as much. Thumbs up.
- inactive, on 10/12/2007, -4/+6You're reading it wrong! It's "no official guide [on this guy's blog]".
Come on everybody, write this guy oodles of content and stuff. It's much better then letting some "fly by night" organisation like the W3C provide documentation. - systemlayers, on 10/12/2007, -0/+1900 diggs and 19 comments?!
- reevnat, on 10/12/2007, -0/+1Here is some useful free online books on CSS
http://2020ok.com/tags/style_sheets.htm - polvero, on 10/12/2007, -0/+1As always, it's quite entertaining to read comments on digg. If anyone noticed the date on the article (over a year ago) it was a pleasant surprise to find that it was digg'd.
Re: the first comment. Those aren't guides. That's the w3 doing their usual uncohesive documentation broken up into multiple pages.
Re: "font: 12pt arial bold" vs "font: bold 12pt arial;" - I explained every odd end and quirk about that in the article.
Anyway, I'm glad some folks found it useful. :) Cheers. - spectre_25gt, on 10/12/2007, -3/+4Personally, I prefer not using shorthand as spelling everything out makes the code a lot more readable.
- Tyseyh, on 10/12/2007, -0/+1this is a real time Html editor here which can be very helpful when doing things like this. espesh when ur crap at it like me :)
http://htmledit.squarefree.com/ - grinin, on 10/12/2007, -0/+1Definitely useful!
Thanks for the link - mantapbasuki, on 03/27/2009, -0/+0css tips
http://blogupiel.blogspot.com/2009/03/most-best-cs ...
http://blogupiel.blogspot.com :: blogupiel - ingvald, on 10/12/2007, -1/+1nice guide, especially as a place to get ideas when i get stuck, among other web sites.
anyone know about a community-driven guide on how different web readers sometimes do different weird things with html and css?
example with ms ie:
[div with border]
some content
[div floating]
[button]
[/div]
[/div]
here ms ie v.6 "erases" the border around the bottom half of the outer div - or at least did for me today, whereas firefox did just fine ... - ingvald, on 10/12/2007, -0/+0"Very basically, when an element is floated, it is taken out of document flow and hence all parent elements no longer take the form of their children"
i know - however, it was a nice explanation :)
i've been using the cleared-div tricks myself... thanks for the link - i'll take a good look at it.
but i should have been more specific: firefox takes the floated element out of the flow, too, but still draws the border, even if the floated element is floating on top of it. ms ie just doesn't draw the bottom half of the border (no border-bottom, and only the top half of border-left/right...) i haven't been through every paragraph of the w3c-specs, but this is surely not according to spec...
btw, i agree with some of the others here, that one can pick any guide on the basics, like the dugg web page, htmlhelp.com, etc, and look at w3c for details when needed.
-i. -still looking for a (potentially) comprehensive guide/ community-driven, ever-expanding website on browser-specifics (non-standard stuff) regarding html and css. - jackminardi, on 10/12/2007, -1/+1Doesnt W3schools do exactly this?
- cwmonkey, on 10/12/2007, -2/+1I have definitly never seen this information before on the intarnet.
- Tredici, on 10/12/2007, -1/+0If I'm correctly understanding your example, believe it or not, IE is rendering the HTML and CSS how the W3C recommend it should. You need to read up on floating, as if you understood the concept you'd also understand why the bottom border has been 'erased' as you say.
Very basically, when an element is floated, it is taken out of document flow and hence all parent elements no longer take the form of their children; they don't expand to compensate dimensions of inner div elements. To solve your problem you need to 'clear' the floated element such that it's parent wraps itself around it's children, as you expect it to. One very easy way to accomplish this is to pop a cleared, blank div element after the floated child in document flow, like so:
[div]
content
[div style="float:right"]
content
[/div]
[div style="clear:both"][/div]
[/div]
This pulls the parent to contain it's floated children. However, I'm a bit of a semanticist myself, and this extra markup for structural purposes is best avoided. Introducing the ':after' pseudo-class. Take a look at this: http://www.positioniseverything.net/easyclearing.html. A fantastic, cross-browser technique for clearing elements without the need for surplus HTML. - esquareda, on 10/12/2007, -2/+1Many people are passed site designs or templates and forced to deal with someone else's CSS - with so many ways of controlling your page display, there are literally hundreds of ways to do hundreds of things.
This type of information should be shared as many ways as we can - not everyone is as all knowing and smart as smitting, fkr2 and GrahamStw. You guys are right - nothing should ever be written about in different styles or presentation methods - only once by the stylized beautiful site - W3C.
We can all use concise information in a quality article, and thumbs up for Dustin - good job. - keikun, on 10/12/2007, -5/+2my css guide book works just as well if not better (i just have to look down for reference). thanks for trying.
- diggerphelps, on 10/12/2007, -5/+2edit: bury
- darshanmistry, on 10/12/2007, -6/+1< html >
< /html >
© Digg Inc. 2009
— Content created and posted by Digg users is