• vote
    9
    0 starsmohit | Shared With: Everyone - Apr 03 2007 | margins, css, development, html
    Uncollapsing Margins (Complex Spiral Consulting)

    An explanation of why margins are collapsed in css...

    Quoted: Why is this? Because it's what authors would tend to expect. If you declare top and bottom margins of 1em for paragraphs, odds are that you want one em of space between successive paragraphs. If you're feeling dubious about that assertion, consider this:

    Showing 1 - 3 of 3 comments
    • derek - Apr 03 2007

      This annoyed me when I first got burned by it, but now I appreciate and think it's right. It's easy to work around it when you know it exists, but would be rather annoying to make it work if you needed it and it didn't exist. It's not so bad with pseudo classes, but IE makes that not work very often.

    • mohit - Apr 03 2007

      seems like it only happens on vertical (and not horizontal) margins.

    • derek - Apr 03 2007

      Yeah, it's designed for block elements.

    You must be Mohit's friend before you can comment on this Fave.
    Send Mohit a friend request or a personal message instead.

Related Faves from mohit

  • vote
    28
    0 starsmohit | Shared With: Everyone - 18 days ago | web development, css, internet explorer
    Perfect multi-column CSS liquid layouts - iPhone compatible

    Handy if you want a liquid layout for your Web site.

    Quoted: The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.
    ...
    The solution is to keep things simple and only use CSS that works in all browsers. One of the main things to avoid is horizontal margins, padding and borders on elements with a specified width. This causes big problems for Internet Explorer because of it's broken box model. Unfortunately we can't simply ignore IE because it's the most widely used browser on the internet. If only everyone used Firefox!

  • vote
    11
    0 starsmohit | Shared With: Everyone - May 20 2008 | web development, blueprint, css
    Please do not Use CSS Frameworks - Monday By Noon

    I disagree with first quoted sentence below and the general premise of the article. True, Blueprint does force you to add some proprietary classes to your XHTML elements to dictate layout on a grid. But, your elements don't have to be divs, and you can still use additional classes to articulate the full semantic meaning of the element.

    All in all, it's a small price to pay to speed up Web development. I have found I can whip up a nicely laid out site that works on all browsers *much* faster with Blueprint than I could without it. And, because there is a set of naming conventions, it makes it much easier for a team of developers (or if using a CMS, the content creators) to specify and read each others' layouts.

    Quoted: A CSS framework passively removes a great majority of semantic value from the markup of a document and, in my opinion, should be avoided. This lack of semantic value works against a big part of what Web Standards are all about; creating documents with rich semantic value.

  • vote
    74
    0 starsmohit | Shared With: Everyone - May 19 2008 | web development, google, css, blueprint, wordpress
    blueprintcss - Google Code

    Looks promising. I know some WordPress themes make use of this.

    Quoted: Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

  • vote
    25
    0 starsmohit | Shared With: Everyone - May 07 2008 | css, google docs, technology
    Google Docs: Style Your Google Docs with CSS

    This is a handy feature of Google Docs I didn't know about...

    Quoted: A new (to us) item in the Edit pulldown menu lets you apply standard CSS styles to your Google Doc. A Google Group exists to help you work out any kinks in the process, and a Googler offers a beautiful resume template (available for you to copy into your own Docs account) all styled with CSS.

  • vote
    2
    4 starsmohit | Shared With: Everyone - Jul 17 2007 | design, books, xhtml, css, html, development
    Amazon.com: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS: Books: Dan Cederholm

    Highly recommended. With html + css, there are many ways to do different things (tabs, font sizing, etc.). This book gives you the "best" and most "bulletproof" way based on the author's own experience as a web developer.

    Quoted: Each chapter starts out with an example of what Dan refers to as an “unbulletproof” concept—an existing site that employs a traditional approach and its associated pitfalls. Dan then deconstructs that approach, noting its downsides and then making the site over using Cascading Style Sheets (CSS). By the end of each chapter, you’ll have replaced traditional, bloated, inaccessible page components with lean markup and CSS. The guide culminates with a chapter that pieces together all of the page components discussed in prior chapters into a single page template.

    Add to Cart
  • vote
    27
    0 starsmohit | Shared With: Everyone - Apr 04 2007 | development, microsoft, ie, ie6, css

    Helpful if you want your webpage to look right in IE6.

    Quoted: This page links to various Explorer specific bug pages.

  • vote
    9
    0 starsmohit | Shared With: Everyone - Apr 03 2007 | css, development, internet explorer, html, floats

    Noticing this bug at the moment:(

    Quoted: In Explorer for Windows there are two display errors. One, the container is only containing the last line of floats , and the floats are also running off to the right, all the way to the right screen edge! Take it from me, folks, that is not kosher.
    ...
    Screenshot in IE6

  • vote
    63
    0 starsmohit | Shared With: Everyone - Feb 25 2007 | css, development, html
    HTML and CSS Table Border Style Wizard

    Pretty helpful if you need to style a table.

  • vote
    15
    0 starsmohit | Shared With: Everyone - Jun 07 2006 | css, development
    CSS2/DOM - Styling an input type="file"

    hacky solution

    Quoted: Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) ...