General Question on Debugging CSS

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • rhino

    General Question on Debugging CSS

    I'm having a problem with the CSS on the website I am developing. A div that
    works perfectly fine in IE7, FF, and Opera doesn't appear at all in IE6.

    Now, I realize that I could simply post a link to the site and someone here
    will likely look at it for about 30 seconds and tell me what's wrong.
    However, I'd like to be as self-sufficient as I can be so I would _really_
    appreciate some guidance on the best way to find this problem for myself.

    Can anyone give me some general guidelines for debugging CSS? How do I
    figure out which of umpteen properties is causing a given effect?

    When I write CSS, I start out with something I've found online that does
    fairly close to what I want to do. Then, I keep tweaking it until it does
    exactly what I want to do. As a result, I don't always understand what each
    and every property does. I try to change only one property/value at a time
    and to always ensure that the impact is what I want before I move on to
    another property. Somehow though, this particular problem is eluding me.

    I've tried everything that I can think of without success. I've spent
    several hours on it and the process itself is becoming very very tedious.
    There has to be a better way and I'd like to know what it is. All I know is
    that IE6 is taking account of the space needed for the information in my
    problem div - if I add more content, it leaves a bigger space for the
    information - but it fails to display any of the information at all. I've
    tried drawing a border around the div and not even that appears. I think
    something else on the page is somehow moving my problem div out of sight. I
    just can't figure out how to make it appear.

    I've kept my remarks deliberately vague. I doubt that anyone would want to
    read a detailed account of all that I've done to solve this problem myself;
    I've already spent enough time on this that I don't want to compound it with
    another hour or more or writing a detailed play-by-play. Suffice it to say
    that I am looking for a general technique for finding the problem, not a
    specific fix for this one problem.

    Can anyone get me started? If you can point me to a website that details
    development/debugging procedures for CSS, that would be fine: I'm not asking
    anyone to spend hours writing something original that just regurgitates an
    existing site.

    Your assistance would be greatly appreciated!

    --
    Rhino


  • Rik Wasmus

    #2
    Re: General Question on Debugging CSS

    On Thu, 29 May 2008 19:42:30 +0200, rhino
    <No.offline.con tact.please@ano nymous.comwrote :
    I'm having a problem with the CSS on the website I am developing. A div
    that
    works perfectly fine in IE7, FF, and Opera doesn't appear at all in IE6.
    >
    Now, I realize that I could simply post a link to the site and someone
    here
    will likely look at it for about 30 seconds and tell me what's wrong.
    However, I'd like to be as self-sufficient as I can be so I would
    _really_
    appreciate some guidance on the best way to find this problem for myself.
    >
    Can anyone give me some general guidelines for debugging CSS? How do I
    figure out which of umpteen properties is causing a given effect?

    Especially the 'minimal test case'.
    When I write CSS, I start out with something I've found online that does
    fairly close to what I want to do. Then, I keep tweaking it until it does
    exactly what I want to do. As a result, I don't always understand what
    each
    and every property does. I try to change only one property/value at a
    time
    and to always ensure that the impact is what I want before I move on to
    another property. Somehow though, this particular problem is eluding me.
    Well, understanding the properties is a plus. They are not hard to find on
    the net.

    Can anyone get me started? If you can point me to a website that details
    development/debugging procedures for CSS, that would be fine: I'm not
    asking
    anyone to spend hours writing something original that just regurgitates
    an
    existing site.
    For me, using firebug in FF has really sped up CSS creation, however, for
    a MSIE 6 only problem that might not help all that much. Also look at the
    known browser bugs at http://www.positioniseverything.net/

    --
    Rik Wasmus
    ....spamrun finished

    Comment

    • Bergamot

      #3
      Re: General Question on Debugging CSS

      rhino wrote:
      I'm having a problem with the CSS on the website I am developing. A div that
      works perfectly fine in IE7, FF, and Opera doesn't appear at all in IE6.
      >
      I'd like to be as self-sufficient as I can be so I would _really_
      appreciate some guidance on the best way to find this problem for myself.
      If it's something specific to IE6, one of the best sources is the PIE
      list of IE bugs:


      Search through the newsgroup archives, too. It's unlikely you're finding
      a bug that hasn't come up at least 100 times before. Use various
      keywords in your search because a problem may be described differently
      by different people. alt.html is another group that should have some
      answers.
      Can anyone give me some general guidelines for debugging CSS? How do I
      figure out which of umpteen properties is causing a given effect?
      Comment out chunks of CSS then put them back in one at a time. That
      doesn't necessarily work for IE6 bugs, though. For that,
      position:relati ve and a couple other properties will become your best
      friends, especially when floats are involved. Just avoid what's known as
      the "Holly hack", i.e. height:1%. It does resolve some IE bugs, but
      causes other problems. There are other, better work-arounds.
      When I write CSS, I start out with something I've found online that does
      fairly close to what I want to do. Then, I keep tweaking it until it does
      exactly what I want to do. As a result, I don't always understand what each
      and every property does. I try to change only one property/value at a time
      and to always ensure that the impact is what I want before I move on to
      another property.
      That's generally a pretty good way to learn, assuming you are starting
      out with something well thought out, but keep a reference handy as you
      go so you can better understand what you're doing. References include
      the W3C specs and sites like PIE and quirksmode.org
      Somehow though, this particular problem is eluding me.
      It's IE6. It's in a world of its own.

      --
      Berg
      now killing all posts from google groups

      Comment

      Working...