SitePoint Sponsor

User Tag List

Page 5 of 10 FirstFirst 123456789 ... LastLast
Results 101 to 125 of 226

Thread: CSS Reset

  1. #101
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also that's just a crap load of typing that slows down the development process .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  2. #102
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's where copy/paste comes in. As does starting off with a template file.

  3. #103
    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 BoltZ View Post
    Also that's just a crap load of typing that slows down the development process .
    The thing is, I usually reset each of my elements I use in the document to 'specific' values.

    In the future, I think the best bet is to 'totally' drop the reset and just set 'explicit' values as I go.

  4. #104
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I am currently doing:

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	background: transparent;
    	font-size: 100%;
    	vertical-align: baseline;
    }
    
    /* Overriding Resets */
    #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { padding: 0 0 0.5em; }
    #content blockquote, #content p, #content ul, 
    #content ol, #content dl, #content address,
    #content form, #content fieldset { padding: 0 0 1em; }
    #content table { margin: 0 0 1em; }
    Right now, this looks like 'overkill' but, Eric's reset will take care of pretty much all browsers.

    @Dan, You seem to be 'very' knowledgeable with 'css'.

    What do you think I should do in this case?

  5. #105
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    That's where copy/paste comes in. As does starting off with a template file.
    How can you copy and paste when I'm talking about something like this
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
    You might have misread my post. Or perhaps I just typed it wrong.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #106
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Drag mouse over text, select, Ctrl C, go to text editor, Ctrl V.

    Copy and paste.

  7. #107
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { padding: 0 0 0.5em; }
    #content blockquote, #content p, #content ul,
    #content ol, #content dl, #content address,
    #content form, #content fieldset { padding: 0 0 1em; }
    Wouldn't margin be more applicable? Bit anal, I always try and use padding for "padding" things and margin for "seperating" things. And as you want to "seperate" them from the next one, (not pad them so you can use a background and achieve whatever visual effect) I'd say margin would be better. Plus, if you highlight the page, some browsers include padding in their selection which looks gay.

    I use a similar reset, and I'm considering dropping things such as "abbr" and "acronym" as they're rarely used, and even if they are I'm pretty sure they don't have any margin or padding by default. Not sure if the lack of vertical-align:bottom; will affect them... that's something I'll have to test.

    Put these styles in your reset. I find that adding the list-style-position of inside cross browses pretty nicely.

    #content ul { list-style: inside disc; }
    #content ol { list-style: inside decimal; }
    Yes, but it changes the effect. Make your list item go onto 2 lines and it sucks - bad for readability.

  8. #108
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Drag mouse over text, select, Ctrl C, go to text editor, Ctrl V.

    Copy and paste.
    Nah man you are misunderstanding me. Those are all different elements. So you can't copy and paste because you have to TYPE out each element. Understand?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #109
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only the first time. After that, it's either copy/paste to a new blank text file, or as I already suggested, use a bare bones template (which is what I do) and then "Save As" to create a new file.

  10. #110
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's my point. You have to type that all out.

    Compare the typing speed of code]*{margin:0;padding:0;}[/code] to
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{padding:0; margin:0;
    Also include the time needed to remember all those elements.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #111
    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 BoltZ View Post
    Yes, that's my point. You have to type that all out.

    Compare the typing speed of code]*{margin:0;padding:0;}[/code] to
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{padding:0; margin:0;
    Also include the time needed to remember all those elements.
    Why would anyone type it? I have a folder called Default which contains an images folder, css folder with stylesheets (reset and basic CSS already in there), and index.html (with the doctype, head etc). I copy+paste it, name it for my project, then start working. I don't have to type anything except for the code for the actual design, so it's as quick as it can get. Also quicker than typing {margin:0;padding:0} and it does a better job

  12. #112
    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
    Wouldn't margin be more applicable? Bit anal, I always try and use padding for "padding" things and margin for "seperating" things. And as you want to "seperate" them from the next one, (not pad them so you can use a background and achieve whatever visual effect) I'd say margin would be better. Plus, if you highlight the page, some browsers include padding in their selection which looks gay.
    I usually use padding for most elements and margins for containers. I tend to swap back and fourth to test browser consistences.

    Code:
    <div class="cycling">
    	<h2>Cycling</h2>
    	<p>...</p>
    </div>	
    
    .cycling { margin: 1em 0; }		
    	.cycling h2, .cycling p { padding: 1em 0; }
    Quote Originally Posted by rochow View Post
    I use a similar reset, and I'm considering dropping things such as "abbr" and "acronym" as they're rarely used, and even if they are I'm pretty sure they don't have any margin or padding by default. Not sure if the lack of vertical-align:bottom; will affect them... that's something I'll have to test.
    I understand. I usually still use abbr tags but not acronyms so much.

    Quote Originally Posted by rochow View Post
    Yes, but it changes the effect. Make your list item go onto 2 lines and it sucks - bad for readability.
    Correct, I actually ran into this issue on my current project

  13. #113
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand. I usually still use abbr tags but not acronyms so much.
    I want to drop tons - my reset weighs in at around 500 bytes - I'd like to make that around 100.

  14. #114
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    500 bytes? That's not bad (less than 1/2k). Unless you mean kilobytes. Then you'd have a problem.

  15. #115
    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 Dan Schulz View Post
    500 bytes? That's not bad (less than 1/2k). Unless you mean kilobytes. Then you'd have a problem.
    Still... why worry about using an unnecessary class that's 8 bytes when I have 500 potentially un-needed bytes in the css.

  16. #116
    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 want to drop tons - my reset weighs in at around 500 bytes - I'd like to make that around 100.
    Do you condense everything for production to 1 line per css rule?

  17. #117
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes - I write it that way. Only format it vertically if requested.

  18. #118
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You probably do not have any issues with this but, if you ever are rushing a huge site:
    http://services.immike.net/css-checker/

  19. #119
    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 BoltZ View Post
    Yes, that's my point. You have to type that all out.

    Compare the typing speed of code]*{margin:0;padding:0;}[/code] to
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{padding:0; margin:0;
    Also include the time needed to remember all those elements.
    I see what you are saying but, what if you have a reset.css already saved on your machine, then you will never have to worry about typing this out. Also, the universal selector should be avoided to leave out form fields.

  20. #120
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ewwatson View Post
    As far as I know IE7 needs display: block; also. That's what helps it clear the float. display inline-block just gives it "haslyout".

    This explains it better than I can.
    http://www.tanfa.co.uk/archives/show.asp?var=300
    The author in this article states that IE7 is disregarding the * HTML hack, as most of us now. But there is still a way to use the *html hack in IE7:
    with a "+" symbol, as in * + html. This way, you cat still use the hack in IE7.

    Just for your information

  21. #121
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You probably do not have any issues with this but, if you ever are rushing a huge site:
    http://services.immike.net/css-checker/
    I also have some toolbar one, however it only checks the current page, and of course there's a billion unused selectors so it doesn't work. What would be great is one that you enter the main URL, it crawls the whole site then checks against the CSS.

  22. #122
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well I for one don't have that big resetter. I would have to type it all out. It's just simpler for me to use the universal resetter and manually deal with the forms.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #123
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I for one don't have that big resetter. I would have to type it all out. It's just simpler for me to use the universal resetter and manually deal with the forms.
    How do you fix the <select> dropdowns?

  24. #124
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    and manually deal with the forms.
    Well that's the point - you can't manually re-instate the form defaults once you have stripped them. Many of the appearance properties of form elements are applied via the browsers own stylesheet using proprietary properties and once you strip them they can't be re-instated back to default.

    For example here is how some forms are styled by default in Firefox.

    extract from Firefox forms.css
    Code:
    button, 
    input[type="reset"],
    input[type="button"],
    input[type="submit"] { 
      -moz-appearance: button;
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here, for text inputs, and for <select>.  For
         buttons, make sure to include the -moz-focus-inner border/padding. */
      padding: 0px 6px 0px 6px;
      border: 2px outset ButtonFace;
      background-color: ButtonFace;
      color: ButtonText; 
      font: -moz-button;
      line-height: normal !important;
      white-space: pre;
      cursor: default;
      -moz-box-sizing: border-box;
      -moz-user-select: none;
      -moz-binding: none;
      text-align: center;
    }
    
    button {
      /* Buttons should lay out like "normal" html, mostly */
      white-space: normal;  
      text-indent: 0;
    }
    
    *|*::-moz-button-content {
      display: block;
    }
    
    button:active:hover,
    input[type="reset"]:active:hover,
    input[type="button"]:active:hover,
    input[type="submit"]:active:hover {
      padding: 0px 5px 0px 7px;
      border-style: inset;
    }
    
    button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
      padding: 0px 2px 0px 2px;
      border: 1px dotted transparent;
    }
    
    button:focus::-moz-focus-inner,
    input[type="reset"]:focus::-moz-focus-inner,
    input[type="button"]:focus::-moz-focus-inner,
    input[type="submit"]:focus::-moz-focus-inner,
    input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
      border-color: ButtonText;
    }
    This is one of the main reasons that reset stylesheets were offered as a means of avoiding this problem

  25. #125
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that's the point - you can't manually re-instate the form defaults once you have stripped them
    Talk about a party pooper! I knew they can't be redone without setting a width - which is fine... until you want to add a longer option. That's why I asked

    Does anyone have a list of elements that have margin and padding by default?


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
  •