Save the hairs!

[iBrian]

Ok, I swore to myself that I'd figure this out on my own, but I can't afford to pull out any more hairs over this problem.

I can't seem to get my spacing correct in IE. The following page looks exactly the way I want it in Firefox (thanks to Web Developer extension), but I can't get the breadcrumb background to fit perfectly within the #category box in IE.

http://thewinningshots.smugmug.com/North%20Gwinnett%20High%20School

I've tried using the IE Web Developer extension, but I still can't get it to work. I've tried the IE underscore hack, but I must not be applying it to the right elements.

I'd be very grateful for anyone that can help me make this work, but I don't just want the answer, I want to understand the answer. I want to be able to figure this out next time. If someone has the time, I'd really like to know the best strategy for debugging a problem like this in the future.

I'm using Black Arts as my base theme and trying to tweak it by adding CSS to my customization section. If anyone sees anything else that I'm doing wrong other than what I'm asking about, please let me know. For instance, is it better to just clone the Black Arts theme and apply my changes to it instead of in the customization section?

I thank you and my hairs thank you. ;-)

Brian

[Mike Lane]

I'm on it, lemme get my bearings and we'll get you fishing in no time.

[Mike Lane]

Okay first, I did some CSS that I think will fix you up. Put it in and tell me if you think it's close enough:

* html #category {padding:1px; width:780px;}
* html #category #breadcrumb {margin:0;}
* html #category .miniBox {margin:20px;}

It's not exactly the same, but I think it solved the problems you were having and it'll be close enough. I could get it exactly but it'd require different margins and crap that just aren't worth the time. Anyhow, if this is an end state that you're satisfied with, I'll let you know how I got there.

[iBrian]

Mike,

First off, I really appreciate your help. This is definitely close enough for me to "go live" with, however I'd really like to understand how figured out where the problems was. Was it just your experience and knowledge of CSS, or did you use the "Developer Toolbar" in IE? I realize it's probably a combination of both, but as far as the IE Developer Toolbar, what are you displaying that helps you pinpoint the problem area.

I've read though the Customization for Dummies threads along with several other customization threads, I've used the FF Web Developer Tool with success and the IE Developer Tool with little success. I'm thinking maybe it's the hierarchy aspect of CSS that's not sinking in and is still throwing me.

If you would, can you help point me in the right direction. I'd also like to go back at a later date and take a stab and making it perfect. You mentioned that it would take a lot of margin changes that would take a lot of time. If I wanted to do that, where would I begin?

Also, why did you use the * in front of html instead of the underscore? When would I use on over the other?

One last thing…

As far as starting with a base theme and then tweaking it with CSS in the customization section, is that the best approach? Is it better to clone one the standard theme, rename it and then modify it instead?

Thanks again for your willingness to help.

Brian


Okay first, I did some CSS that I think will fix you up. Put it in and tell me if you think it's close enough:

* html #category {padding:1px; width:780px;}
* html #category #breadcrumb {margin:0;}
* html #category .miniBox {margin:20px;}

It's not exactly the same, but I think it solved the problems you were having and it'll be close enough. I could get it exactly but it'd require different margins and crap that just aren't worth the time. Anyhow, if this is an end state that you're satisfied with, I'll let you know how I got there.