Learning and Debugging CSS

[mikeblas]

I'm taking another run at learning more CSS. This time, I decided to swipe a design from a site I liked and try to rework it until it fit what I wanted.

This is where I'm at so far. I like the layout, and I'm getting the decorations to fit. The current problem is that the bottom fade is a few pixels off the bottom contact block... of course, that's only in IE 6 and not in FireFox.

How can I fix that? Better yet, how would I learn to "debug" it myself?

I can't imagine that people who are building style sheets are constantly adding up offests and margins in their heads, applying exeptions (e.g., except when the content is larger than the size) and then making sure the total matches some other element size.

I marvel at site designs which are complicated -- I just can't imagine how they're cooked up. Dreamweaver is hardly WYSIWYG, particularly when using CSS.

I can't believe how frustrating the workflow is. Drawing the fade image took only a couple minutes in Illustrator; bringing it back to Dreamweaver and then getting it posted to the site took longer. Dreamweaver doesn't have a tool to inspect an image -- I can't find a way to click on BottomFade.GIF and see its image size, for example, or even check its date or filesize.

Am I using the wrong tools?

 

[mikeblas]

Are there debuggable browers?

When I write applications, I run them under a debugger. I can see every little thing that happens; if the application prints "37", I can find where it prints it, and strat working backward to figure out how it got to that result.

If I write a CSS page and show it in a browser, I get some particular layout (or notice certain attributes on certain objects, and so on). How can I most expeditiously work backward to figure out why it got there?

Design mode in Dreamweaver almost does what I want: each DIV gets a rectangle, and that helps me learn what the bounding rectangle of the division's content might be. But the DIV isn't named, I can't move it, and it isn't very accurate. Plus, I get no insight into how that bounding rect was derived or how I might influence it.

I imagine a debuggable browser, which renders showing some calcuations, or attributes, or a tree of CSS and HTML nodes that went into the selected visible entity.

Is there such a tool? Another way to solve the same problem?

 

[Hartlove]

Firefox has an awesome extension toolbar for web developers.

http://chrispederick.com/work/webdeveloper/

It has options for outlining block elements in css and html, disabling css and javascript temporarliy... It even has a css pane that lets you edit the stylesheet in real time, to see what happens. It also has an "view style info" cursor that will show you in another tab, all of the styles that apply to an element.

IE supposedly has a toolbar made by MS that replicated most of the functions, but I have never tried it out. If I can find the link, I will post it here too.

Also, if you want to see some neat stuff that can be accomplished with CSS, check out www.csszengarden.com

 

[Dagatech]

for debugging actual code problems, you can use the w3's service, at http://jigsaw.w3.org/css-validator/

for other issues, my experience was that most of it could be fixed by playing around with different settings and options. I found that when in doubt, cut out code. The less code there is, the fewer problems you have, and its sometimes amazing how much can be accomplished with less code. For instance, instead of having an image in a seperate div, trying making it a positioned background on another div. Solves positioning and float issues instantly (Note: I didn't look at your code, so this is just an example, not a suggestion)

also, when you are having a specific problem, try doing a google search. Some things that are incredibly frustrating (the IE 3px gap) aren't anything you can fix, and its relieving to know that it isn't your mistake. Its practically a guarantee that someone else has run into the same problem you have and posted about it on a forum somewhere. I find the DevShed code forums to be incredibly helpful.

Good luck with your learning!

P.S. Use standards

 

[mikeblas]

Firefox has an awesome extension toolbar for web developers

Awesome! I'll have to try that out.

also, when you are having a specific problem, try doing a google search

I'd be happy to do that. The problem with searching is that I have to know what I'm looking for. In this case, I don't even know how to describe the problem I'm having in a way that I would expect a search of the whole Internet to be able to find.