General Question on Debugging CSS

[rhino]

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]

On Thu, 29 May 2008 19:42:30 +0200, rhino
<No***********************@anonymous.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?

http://www.positioniseverything.net/...s/mys-bug.html
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

[Bergamot]

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:
http://www.positioniseverything.net/explorer.html

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:relative 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