#1
  1. His name is Robert Paulson!
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Feb 2005
    Location
    Paper Street
    Posts
    2,692
    Rep Power
    153

    Exclamation CSS Forum Posting Guidelines


    CSS Forum Posting Guidelines

    Some very important things to keep in mind before you post your question:
    Note that if it appears you haven't read this, we're most likely just going to point you to it.

    BEFORE YOU POST
    Before you post your question, make sure your X/HTML and css validates!

    Visit w3.org to validate your X/HTML and css, if you don't, that's the first thing we are going to ask you to do. Invalid X/HTML and/or css gets unpredictable results.

    X/HTML Validator
    CSS Validator


    Here is a sample template you can use to make sure your test code is fully functional:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!--Don't add anything above this line, you may change the DTD to match your page-->
    <title>Test Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <!--Uncomment the following line and remove the embedded style sheet if your style is external-->
    <!--<link rel="stylesheet" href="includes/style.css" type="text/css" />-->
    <style type="text/css">
    /*add your styles here, or remove this section if your styles are external*/
    body{
      background-color:#ffffff;
    }
    </style>
    </head>
    <body>
    
    <!--Put your x/html code here-->
    
    </body>
    </html>

    USE YOUR RESOURCES
    As with all forums, there's a pretty good chance your question has already been answered... but css being what it is, you may not know exactly what you are looking for. Have a look at the resources sticky, or try searching for your problem.

    BE DESCRIPTIVE
    Spell it out for us. What do you think it should look like, what does it look like now, what is it not doing "right"...

    It's amazing (I'm guilty too) how many people post a "Have a look at this, how do I fix it?", but they don't tell us what it's supposed to look like.

    PROVIDE EXAMPLES
    Give us a link, or paste your code... we can't read minds, especially through the net.

    If you are providing a link to your page, make it an actual link using the bbcode tags, rather than just pasting the URL.

    If your css isn't embedded or inline, provide a link to it too, or paste it if it's not too big.


    USE A DESCRIPTIVE TOPIC NAME
    Topics which are simply...

    CSS Problem
    Please Help
    IE not working!


    Won't get many responses, try and come up with something a little more descriptive...

    Getting rid of space around floated divs in IE
    My footer won't stay at the bottom


    By the way, these are examples of problems that can be searched for...

    ALL PROBLEMS, BIG and SMALL
    Remember that the C in CSS stands for cascading, upper level elements have an effect on the lower level elements... If you have a large css sheet and a lot of code on your site, and one thing isn't working the way it should, chances are something else is interfering... try simplifying your code and see if it will work that way...

    An old debugging technique is to break it down into smaller portions in order to isolate the problem...

    Mod edit: Stickied, locked and posts removed. If anyone has anything they'd like to add to this guide, please feel free to PM me and I'll add it if needed. Thanks, Jon.

    Comments on this post

    • gimp agrees : Holiday rep - http://forums.devshed.com/the-outhouse-138/spreading-christmas-cheer-312638-2.html?pp=15
    • LinuxPenguin agrees
    • carrie_a_tune agrees : Spreading late Christmas cheer from the Outhouse! :)
    • B-Con agrees
    Last edited by Kravvitz; September 15th, 2010 at 12:38 AM. Reason: added post icon
    Environmental LIMS
    What the hell is all this LIMS st*ff about?
    ---------------------------------------
    PHP Pagination Function
    PHP Drop Down Menus
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Tell Us Which Browsers You See the Problems In
    We usually need to know which browsers, including which version(s), you've seen the problem in to be able to help you.


    Please format your stylesheet(s) for easy reading.
    Here are some tools that make reformatting your code quick and easy.
    http://www.lonniebest.com/FormatCSS/
    http://flumpcakes.co.uk/css/optimiser/
    http://www.cleancss.com/
    http://csstidy.sourceforge.net/

    Here's an example of a good format:
    Code:
    selector {
      property: value;
      property: value;
    }
    Make sure any server-side code, e.g. PHP, has been processed/executed before posting your code.
    Unless we specifically ask to see your server-side code, we need to see what the browser sees -- just HTML and CSS (and maybe a little JavaScript). (If there's a lot of JavaScript code, then the question may be better suited to that forum instead of this one.)


    Restriction for users with fewer than 5 posts.
    New users are restricted from posting URLs until they have made 5 posts. You may need to get around this automated filter by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    Comments on this post

    • Skipt agrees
    • f_nietzsche agrees : I link to this page all the time. The additions are very welcome!
    Last edited by Kravvitz; February 20th, 2011 at 12:45 PM. Reason: added another guideline
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo