SitePoint Sponsor

User Tag List

Page 6 of 10 FirstFirst ... 2345678910 LastLast
Results 126 to 150 of 226

Thread: CSS Reset

  1. #126
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Does anyone have a list of elements that have margin and padding by default?
    Well the problem is that UAs are allowed to set what they like and still be in agreement with the specs therefore you can never be certain that past,present or future browsers will not differ on some way even if today you worked our exactly what they were .

    You can find out all Firefox's defaults by looking at their own CSS style files. I already mentioned forms.css above and there is another called html.css of which I'll post another short extract below.
    extract from html.css
    Code:
    html, div, map, dt, isindex, form {
      display: block;
    }
    
    body {
      display: block;
      margin: 8px;
    }
    
    p, dl, multicol {
      display: block;
      margin: 1em 0;
    }
    
    dd {
      display: block;
      -moz-margin-start: 40px;
    }
    
    blockquote {
      display: block;
      margin: 1em 40px;
    }
    
    address {
      display: block;
      font-style: italic;
    }
    
    center {
      display: block;
      text-align: -moz-center;
    }
    
    blockquote[type=cite] {
      display: block;
      margin: 1em 0px;
      -moz-padding-start: 1em;
      -moz-border-start: solid;
      border-color: blue;
      border-width: thin;
    }
    
    span[_moz_quote=true] {
      color: blue;
    }
    
    pre[_moz_quote=true] {
      color: blue;
    }
    
    h1 {
      display: block;
      font-size: 2em;
      font-weight: bold;
      margin: .67em 0;
    }
    
    h2 {
      display: block;
      font-size: 1.5em;
      font-weight: bold;
      margin: .83em 0;
    }
    
    h3 {
      display: block;
      font-size: 1.17em;
      font-weight: bold;
      margin: 1em 0;
    }
    
    h4 {
      display: block;
      font-weight: bold;
      margin: 1.33em 0;
    }
    
    h5 {
      display: block;
      font-size: 0.83em;
      font-weight: bold;
      margin: 1.67em 0;
    }
    
    h6 {
      display: block;
      font-size: 0.67em;
      font-weight: bold;
      margin: 2.33em 0;
    }
    There are a few other default css as well files and you van find them in the firefox folder in a folder called "res" (at least that's where I found then inmy system).

    IE on the other hand is a different matter and no one knows where they keep their defaults as they seem to be hard coded somewhere in the registry.

  2. #127
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If there was a list I could be lazy and just use them to make my reset CSS

    I guess I'll have to just put everything on a page and see how the different browsers react... something like abbr, you can pretty safely assume it's not going to get margin anytime soon, so it'd be fine to leave it out. If that changes for whatever crazy reason, it can be added in.

    Speaking of blockquotes, is this the correct way to write them? (in the context of testimonials)

    <blockquote><p>
    "some big testimonial"
    </p></blockquote>
    <cite>John Smith, <a href="#">John Smith Builders</a></cite>

  3. #128
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Speaking of blockquotes, is this the correct way to write them? (in the context of testimonials)

    <blockquote><p>
    "some big testimonial"
    </p></blockquote>
    <cite>John Smith, <a href="#">John Smith Builders</a></cite>
    This is more of an html question for Tommy

    http://www.smashingmagazine.com/2008...ood-practices/
    http://www.sitepoint.com/blogs/2008/...-then-and-now/
    http://stevenclark.com.au/2008/07/15...ckquote-and-q/
    http://www.456bereastreet.com/archiv...n_blockquotes/

  4. #129
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn, you're meant to be the guy who knows everything!

    I have read a million articles, of course all of which have a different opinion! As time goes in, it gets harder and harder to find REAL facts (especially with blogs, many of them are just opinions written as if they're speaking fact)

    http://www.smashingmagazine.com/2008...ood-practices/
    This just seems to be pretty examples of how to do quotes

    http://www.sitepoint.com/blogs/2008/...-then-and-now/
    Doesn't really explain anything. If anything, cite is meant to be used for "online references" which then contradicts the fact "cite refers to the source" as there are more sources than just websites

    http://stevenclark.com.au/2008/07/15...ckquote-and-q/
    Perhaps the more insightful of them all. I disagree however. <p>whatever<cite>yeah</cite></p>. I wouldn't say who says it is part of the paragraph, the paragraph is what they said. I think they went "hmm it's invalid to put an inline element inside a blockquote - I know - let's throw it in the paragraph!" Another solution is wrapping the cite it's on paragraph - as it's not a paragraph, it's not a viable solution.

    http://www.456bereastreet.com/archiv...n_blockquotes/
    He doesn't mention quotes, in the comments section though Mike Cherim says he puts it in with the paragraph, or makes a new one (he doesn't seem sure, so perhaps there is no ideal solution after all?)

    If I understood more of the intricacies of the English lanugage (how quotes work, citing references and so forth) it would probably be more clear. I'm just guessing blockquote is for a big quote of what someone said, and they didn't say their own name, therefore their own name shouldn't be included in the blockquote, which then leaves nowhere to put it but underneath.

  5. #130
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Damn, you're meant to be the guy who knows everything!
    lol - I do with CSS (most things anyway)

    That's the reason I didn't answer your question because there are semantic differences and various answers. I'll try and get Tommy to chip in with some insight

    The w3c says this:
    BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks.
    CITE:Contains a citation or a reference to other sources
    I can telly you that your version would be invalid unless you wrap the cite in a block level element.

    I would probably do it like this:
    Code:
    <p><cite>John Smith,</cite> <a href="#">John Smith Builders</a></p>
    <blockquote cite="www.name.com">
        <p> "some big testimonial" </p>
    </blockquote>

  6. #131
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Speaking of blockquotes, is this the correct way to write them? (in the context of testimonials)

    <blockquote><p>
    "some big testimonial"
    </p></blockquote>
    <cite>John Smith, <a href="#">John Smith Builders</a></cite>
    I'd say no. But almost.

    The blockquote element type is block-level, while cite is inline-level, so having them as siblings on the same structural level is semantically odd. It can even be invalid, depending on the parent element. You should wrap the cite element inside a paragraph (if applicable) or a div.

    Whether or not to include quotation marks in the quoted text is debatable. One might argue that they are presentational, since the blockquote element already states that we're dealing with a quotation. Thus the quotation marks should (arguably) be added with CSS. Compare to the q element type (inline quotation) where the user agent is supposed to supply the quotes (did you hear that, Microsoft?).

    For typical US English multi-paragraph quotations, you could use the following CSS3 to insert the quotation marks:
    Code CSS:
    blockquote p {quotes:"\201c" "\201d"}
    blockquote p::before {content:open-quote}
    blockquote p::after {content:no-close-quote}
    blockquote p:last-of-type::after {content:close-quote}
    With CSS2.1, use :before and :after instead of ::before and ::after, and you'll need to put a class on the the last paragraph instead of using the :last-of-type pseudo-class.


    Of course none of this works in IE7 or older, but since it's merely presentational anyway, it might not matter.
    Birnam wood is come to Dunsinane

  7. #132
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You know what I really love about Safari? They support more CSS3 properties. Such as, I can specify multiple background images onto one element which makes rounded borders SOOO easy to use. FF3 doesn't, which I am sad about .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #133
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Such as, I can specify multiple background images onto one element which makes rounded borders SOOO easy to use.
    You don't even need images because you can use border-radius

    I recently did a site just for an iphone which meant only safari support was currently required and the multiple background images and border-radius properties made life so much easier and the html so much cleaner. I converted the original table site that the developers had mocked up and saved over 80&#37; of html.

  9. #134
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I really want a job (any ) where I only develop for IE, or Safari. Something where I only have to develop for one site.
    *Sigh* at cross browser coding .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #135
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I'd say no. But almost.

    The blockquote element type is block-level, while cite is inline-level, so having them as siblings on the same structural level is semantically odd. It can even be invalid, depending on the parent element. You should wrap the cite element inside a paragraph (if applicable) or a div.

    Whether or not to include quotation marks in the quoted text is debatable. One might argue that they are presentational, since the blockquote element already states that we're dealing with a quotation. Thus the quotation marks should (arguably) be added with CSS. Compare to the q element type (inline quotation) where the user agent is supposed to supply the quotes (did you hear that, Microsoft?).

    For typical US English multi-paragraph quotations, you could use the following CSS3 to insert the quotation marks:
    Code CSS:
    blockquote p {quotes:"\201c" "\201d"}
    blockquote p::before {content:open-quote}
    blockquote p::after {content:no-close-quote}
    blockquote p:last-of-type::after {content:close-quote}
    With CSS2.1, use :before and :after instead of ::before and ::after, and you'll need to put a class on the the last paragraph instead of using the :last-of-type pseudo-class.

    Of course none of this works in IE7 or older, but since it's merely presentational anyway, it might not matter.
    They would always been inside a div (even if it's merely the page wrapper) so being invalid isn't a problem. The " probably is presentational; however, the end user doesn't know that it's wrapped in a blockquote, so in that regards it's not presentational as they wouldn't know it's a quote otherwise. So the cite should come after/before the blockquote, and not be inside it?

    <p><cite>John Smith,</cite> <a href="#">John Smith Builders</a></p>
    <blockquote cite="www.name.com">
    <p> "some big testimonial" </p>
    </blockquote>
    Hmm, that's something I didn't think of, should their site be included in the cite? I guess not, as the cite is who said it, and their website/business name isn't who said it.

  11. #136
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would not wrap the cite and anchor inside a paragraph.

    Code:
    <div>
    	<cite>John Smith,</cite> <a href="#">John Smith Builders</a>
    	<blockquote cite="www.name.com">
    	    <p> "some big testimonial" </p>
    	</blockquote>
    </div>
    or
    Code:
    <div><cite>John Smith,</cite> <a href="#">John Smith Builders</a></div>
    <blockquote cite="www.name.com">
        <p> "some big testimonial" </p>
    </blockquote>

  12. #137
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First one yep, second one - I wouldn't say it's a division, firstly as it's just the name and link, and secondly because the name and the quote are linked (should be together), yet you have it marked up in that cite is a division by itself (when they should be in the same "division")

    I'm coding a site atm without my reset at all, to see how it goes... so far, yuck lol. Sick of adding "margin:0;padding:0"

  13. #138
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    First one yep, second one - I wouldn't say it's a division, firstly as it's just the name and link, and secondly because the name and the quote are linked (should be together), yet you have it marked up in that cite is a division by itself (when they should be in the same "division")

    I'm coding a site atm without my reset at all, to see how it goes... so far, yuck lol. Sick of adding "margin:0;padding:0"
    Yeah, I would prefer the first example over the second one.

    You could set a reset to specific elements.

    e.g.
    h1, h2, h3, h4, h5, h6 { margin: 0 0 1em; padding: 0; }

  14. #139
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    * { 
    	font-size: 100%;
    	vertical-align: baseline;
    }
    
    body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset { margin: 0; }
    ol, ul, fieldset, legend, caption, colgroup, td { padding: 0; }
    
    a img, fieldset { border: 0; }
    Also, you could use this :-D
    This is tested in ie6, opera 9.60, ie7, Safari 3, FF3, Chrome.

    I would double check to see if I left anything out, but I am sure it should be pretty solid.

  15. #140
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might adapt that, except the first part - what function does font-size 100&#37; on everything serve? Likewise with vertical-align, I haven't encountered any problems without it (then again it's been in my reset for so long I can't remember that far back). Any reason you don't just have margin:0;padding:0 on all those?

  16. #141
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    I might adapt that, except the first part - what function does font-size 100&#37; on everything serve? Likewise with vertical-align, I haven't encountered any problems without it (then again it's been in my reset for so long I can't remember that far back). Any reason you don't just have margin:0;padding:0 on all those?
    You could combine these together and apply a margin/padding of 0 if you like. I think it was more of an experiment so I know exactly which ones apply a margin/padding.

    Font size of 100% is important in my reset because I set my body { font-size: 75% }. So the font-size: 100%; is inherited to make all elements on my page by default 75%.

  17. #142
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    * { font-size: 100% }
    body { font-size: 75%; }
    Code:
    <h1>About</h1>
    <p>this is a long para...</p>
    Then remove the * { font-size: 100% } and you will see what I am talking about.

  18. #143
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you could drop the 'vertical-align' if you do not care about older browsers. I myself have not ran into any issues without it in the past.

  19. #144
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't change a thing lol. If you set it on the body it'll apply to everything that's inside the body. Likewise if you put it on the wrapper div it'll apply to everything inside it. With the exception of forms, they always seem to do their own thing (especially those damn textareas)

    I think you could drop the 'vertical-align' if you do not care about older browsers.
    Do you know how old roughly? Generally I only do IE6+, other times client want ancient versions supported so that changes the playing field.

  20. #145
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>Test</title>
    		<meta http-equiv="Content-Type" content="Content-type:application/xhtml+xml; charset=utf-8" />
    		
    		<style type="text/css">
    			* { font-size: 100&#37; }
    			body { font-size: 75% }
    		</style>
    	</head>
    	
    	<body>
    		<h1>About</h1>
    		<p>This is a long para...</p>
    	</body>
    </html>
    Try this then, If the * { font-size: 100%; } is removed the h1 regains its size.
    Last edited by cooper.semantics; Oct 11, 2008 at 00:15.

  21. #146
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The body font-size: 75%; sets every element on the page 75% of the text-size set on one's computer. The universal selector inheritance of 100% sets every element on the page the exact same size. Which in this case is 75% of ones text-size set on there computer.

  22. #147
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh. I already have font sizes set on everything that's not default on the site I used it on.

  23. #148
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Ahh. I already have font sizes set on everything that's not default on the site I used it on. Seems pointless - as everything that's not default will have a font size set anyway/
    hehe, Yeah I hear ya. I was actually thinking, I might drop the reset as well. My reasoning behind this is that I do not have to worry about browsers below ie5.5 and I am not worried about what my page will look like on mac ie haha

    I usually do not get clients that want a page to look good below ie5.5.

    There is always that one d*ckhead client that wants you to bend over backwards for them.

  24. #149
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm someone who loves habits. Been using XHTML since, like, forever - when I started learning tableless instead of tables everyone was jumping up and down screaming "XHTML! XHTML! XHTML!" so I've used it always. I know that it's the same as HTML when served as text/html, it doesn't hurt so I've stuck with it. Now that I'm giving HTML 4 a shot, I might as well drop the reset and give it a go without it. I know that having a reset helped with compatibility (why I'm so reluctant to go without), however it has been a year or two ago since I've been using resets (* {margin:0;padding:} for the main part of it) and back then I sucked quite a bit, so the compatibility was probably more of poor practices than browser defaults screwing it up.

    <div id="menu">
    <p><a href="#">Menu item</a></p>
    <p><a href="#">Menu item</a></p>
    <p><a href="#">Menu item</a></p>
    <p><a href="#">Menu item</a></p>
    </div>
    Haha, worth every cent of the $10 I charged

  25. #150
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, the good thing about change is - the room to grow in knowledge.

    Say you code without a reset for 1 year, you will learn all the inconsistencies between the browsers and learn how to cope with them. You might even one day revolt back to the reset because it is too much coding to compensate for browser defaults.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •