Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i thought it would be good for experienced CSS designers to share all the ways they get around the differences in browsers and other compatibility issues. this seems to be one of the most asked questions on this forum and deserves a spotlight. thx for any info you offer.

    while($get_it !== true){ continue; }

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2010
    Posts
    23
    Member #
    24956
    1. Declare a doctype

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    2. Use a reset

    Code:
    /***********************************************
    
    	=reset
    	
     **********************************************/
    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; outline:0; font-size:100%; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; background:transparent;}
    
    body {line-height:1.5em;}
    ol, ul {list-style:none;}
    blockquote, q {quotes:none;}
    blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
    
    /* remember to define focus styles! */
    :focus {outline:0;}
    
    /* remember to highlight inserts somehow! */
    ins {text-decoration:none;}
    del {text-decoration:line-through;}
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {border-collapse:collapse;border-spacing:0;}
    
    /* Remove annoying border on linked images. */
    a img {border:none;}
    
    /* HTML 5 elements */
    article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
    3. Dont forget clearfix

    Code:
    /* `Clear Floated Elements */
    /* http://sonspring.com/journal/clearing-floats */
    .clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}
    
    /* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
    .clearfix:after {clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;}
    
    /*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
    */
    * html .clearfix, *:first-child+html .clearfix {zoom: 1;}
    4. Define elements

    Code:
    /* Text elements */
    p {margin:1.5em 0;}
    p img.left  {float:left; margin:1.5em 1.5em 1.5em 0; padding:0;}
    p img.right {float:right; margin:1.5em 0 1.5em 1.5em;}
    
    a:focus, a:hover {color: #000;}
    a {color:#009; text-decoration:underline;}
    
    blockquote {margin:1.5em; color:#666; font-style:italic;}
    strong {font-weight:bold;}
    em,dfn {font-style:italic;}
    dfn {font-weight:bold;}
    sup, sub {line-height:0;}
    
    abbr, acronym {border-bottom:1px dotted #666;}
    address {margin:0 0 1.5em; font-style:italic;}
    del {color:#666;}
    
    pre {margin:1.5em 0; white-space:pre;}
    pre,code,tt {font:1em 'andale mono', 'lucida console', monospace; line-height:1.5;}
    
    /* Lists */
    li ul, li ol {margin: 0;}
    ul, ol {margin:0 1.5em 1.5em 0; padding-left:3.333em;}
    ul {list-style-type:disc;}
    ol {list-style-type:decimal;}
    dl {margin:0 0 1.5em 0;}
    dl dt {font-weight: bold;}
    dd {margin-left: 1.5em;}
    
    /* Tables */
    table {margin:1.5em 0; width:100%;} /* defined in ie.css */
    th {font-weight: bold;} 
    thead th {background: #c3d9ff;}
    tfoot {font-style: italic;}
    caption {background: #eee;}

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    thats more of an html framework for mass production. a reset generally does only that. it doesn't really define so much as un-define what was once defined.

    while($get_it !== true){ continue; }

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Keeping code simple often automatically remedies cross browser issues. You're right Dorky, the question gets asked time and time again. And a lot of times the designer brings it on themselves by over complicating divs with layers and bg images and splicing and hoping everything lines up when they are done. Margins are one of the biggest culprits and can be easily fixed by resetting them. I personally have never used a reset, but my layouts are a piece of cake too. The ul tag gets me and in the past just put an IE conditional to get around it.(I know, it's a hack!)

  6. #5
    etm
    etm is offline
    Member
    Join Date
    Aug 2010
    Location
    Calgary, Canada
    Posts
    76
    Member #
    23011
    Honestly, I have been able to reduce the reset to the following and its good 95% of the time. A lot of the resets are also addressing deprecated or rarely used tags. Blockquote for example... why reset something that you shouldn't be using anyway. Additionally, they are often trying to address older browser issues that are really relevant anymore either (IE4.x, 5.x etc.).

    The Eric Meyer reset that 'EvilivE' posted above is far too heavy for most cases, but that's just my opinion.

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    body {
    line-height: 1;
    }
    
    body, p, div, span, img, ol, ul, li, h1, h2, h3, h4, h5, h6
    {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    }
    
    ol, ul {
    list-style: none;
    }
    
    :focus {outline:0;}


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com