Basic Troubleshooting Tips for Beginners

Discussion in 'CSS' started by qube99, Sep 15, 2007.

  1. #1
    You can locate a lot of problems just by validating your HTML and CSS. Coding errors can lead to some strange behaviors.

    HTML valiator - validator.w3.org/
    CSS validator - jigsaw.w3.org/css-validator/

    It also helps to be able to see your containers. One easy way is to add a background to each one. You could add a border but this can cause a problem because the borders increase the size of the container.

    Read up on the positioning types, such as relative, fixed and static. I see a lot of problems caused by a lack of understanding of these.

    Positioning - www.barelyfitz.com/screencast/html-training/css/positioning/
    Floats - css.maxdesign.com.au/floatutorial/introduction.htm
    Clearing Floats - css.maxdesign.com.au/floatutorial/clear.htm

    A basic understanding of the Display types is also quite useful to know.

    Display - www.quirksmode.org/css/display.html

    Hope this helps you get started with your HTML/CSS.
     
    qube99, Sep 15, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    What shocks me is that people don't fucking validate their HTML and then complain, bitch and moan about their layouts.

    You should be using outline instead of a background or border.
     
    soulscratch, Sep 18, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    outline?
    If you're looking at your boxes in Internut Exploder, doesn't outline not work?
     
    Stomme poes, Sep 19, 2007 IP
  4. Websworth

    Websworth Peon

    Messages:
    50
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I tend to use Firefox's Firebug as it's absolutely fantastic for debugging your code. Plus you can edit the stylesheets on the fly.
     
    Websworth, Sep 22, 2007 IP
  5. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Don't forget the Web Dev toolbar. You can enter the "View Style Information" mode (Ctrl Shift Y), then click on an element, and it'll tell you exactly what style declarations are affecting that element and where they came from.
     
    KatieK, Sep 22, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    I prefer Firebug's "Inspect" (which I have hotkeyed ) because it has 2 different modes to the Web Dev toolbar. But either of them are better than nothing at all.
     
    soulscratch, Sep 22, 2007 IP
  7. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #7
    We'd love to use outline if enough browsers (namely IE) would support it!
     
    krt, Sep 22, 2007 IP
  8. guitarbinge

    guitarbinge Peon

    Messages:
    208
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    do u think rankings are affected positively if the webpage is perfectly compliant with w3 standards?
     
    guitarbinge, Apr 28, 2008 IP