Serendipity Forums

I used to think, that I can handle that css stuff. But I can't figure out the solution on that one.

I'm using the carl02 theme (slighlty adjusted to be xhtml valid) on my blog at http://www.ormus.info/

Everything looks good on Firefox. IE is a problem though, in IE6 and IE7. The sidebarcontent divs are white, but should be green. My guess is, that this is some png transparency problem (isn't it always?). Also the sidebar seem to be a bit wider on IE, so the left sidebar is pushing the right sidebar to it's bottom.

I would appreciate any input on those two topics. I like the theme, don't wanna drop it for compatibility reasons.

For reference:

http://browsershots.org/website/http://www.ormus.info/

So far I've managed to find out, that the IE seems to add a pixel somewhere. If I make the sidebars a little thiner, then they are display next to each other...

Problem #1 solved: The sidebars have to be set to backgound-color: transparent for IE (though this should be css default).

The IE developer toolbar proved to be very useful for tracking that one down. In case you don't know it: http://www.microsoft.com/downloads/deta ... laylang=en

Problem #2 solved. Though I do not like the solution. I'm using a IE conditional to style the right sidebar a little thiner (2px thiner than for Mozilla). It seems to do the trick, but I dislike css hacks/conditionals. And I would have prefered, if I knew WHY it looked different...

Without even having looked at your pictures, I'm jumping in to help your understanding. (What could possibly go wrong?) You probably already know this stuff, anyway.

CSS uses a "box model" to determine where to put the HTML on your screen. The box model treats each tag as a box (go figure), which has padding on the outside and margin on the inside. In short, when you specify padding, you're saying how far away to put this box from other boxes, and when you specify margin, you're saying how far inside the box edge to put the content -- usually letters, hence margin. Oh, there's a border in there, too, but we'll skip that for the moment.

The CSS specs say that if you specify a width, the padding and margin are NOT INCLUDED in that width. So if you want a 150px box with 10px padding, you get a 170px box (10px extra on each side). FF implemented their CSS this way.

IE decided that a 150px box will always be a 150px box. When you add your 10px padding, you get a 150px box with only 130px left for the content (10px removed from each side).

The same sort of thing happens with borders and margins. So, if you specify a 1px border, you lose 2px of content space in IE, but you gain 2px of actual width in FF. Then they look different.

The only solution I'm aware of is conditional style sheets. That could mean detecting the appropriate style sheet to send, adding IE conditional statements, or using CSS hacks so IE and FF see different things.

Annoying, but that's what you get when one company is trying to "embrace and extend" a standard.

A very good post, judebert, thank you!

I knew some of the facts included but sure picked up one or two new ones.