Weird CSS behavior

[MindBrain]

Hello, working on a design for CSS Zen Garden. Trying to get the hang of positioning DIVs and such. I've noticed that DIVs will shift when given a border. Trying to get these DIVs that have 2 background images to line up. Here's a picture of whats happening:

Any insight or advice as to whats happening here please? Thanks!

 

[MindBrain]

This is in FireFox 2.0
I looked at it in IE 6.0 without the border and it lines up fine. Although appears different from FF 2.0 when the border is used.

 

[reclusivemonkey]

Posting your CSS might help...

 

[ChicoWeb]

That looks like the classic div height issue, but that only happens in IE6. You just use font-size: 0, line-height: 0; but since you said FF, and didn't post any code, that's my best guess at this time.

 

[MindBrain]

Ah I found out what it was. I was the <p> element there that had the default padding and margin. So I had to set #quicksummary p {padding:0 margin:0}

 

[reclusivemonkey]

Do you have

* {padding: 0px; margin: 0px; border: 0px;}

at the beginning of your CSS? Handy to have as a default.

 

[MindBrain]

Do you have

* {padding: 0px; margin: 0px; border: 0px;}

at the beginning of your CSS? Handy to have as a default.

I have it for "body html" . but since i have a background color specified in the "body html" then it makes other elements take the bg color. So I guess I can just separate the two. And when I have padding and margin set to 0 for the universal selector, when I set a the padding or margin for a div or element it replaces the universal selector right? Thanks