Edit: I found a workaround, read bottom

I'm trying to get this sidebar pieces together with four sections, there will be two main areas for contents and a 13px separator along with a 13px ending image. The separator is exactly 13pixels high, but even if I change the height of the style it won't shrink. I can make it larger, but its like IE tries to force the height to the size of the background image. But, its too large, so apparently thats not right either.

There is no added padding anywhere, other than the body which is set to 0. Theres not much code that can be wrong... it works in Firefox but thats not saying much (because everything does ). Is this just a bug in IE?

I tried changing the line-height just in case but that didn't help. I'm out of ideas.

Here's what it looks like with a 2px border around the seperators:

ignore the border on the left, thats one solid image in a seperate div (I'm going to change that when I fix this problem though)




Code:

PHP Code:

<div class="container" id="leftnav"> <!-- LeftTop, LeftSeperator, LeftBottom, LeftEnd -->
    <div id="lefttop"> </div>
    <div id="leftseperator"> </div>
    <div id="leftbottom"> </div>
    <div id="leftend"> </div>
</div>

<style type="text/css">
    /* Left Bar */
    #leftnav  { 
        width: 100px; height: 425px; }
    #lefttop { 
        width: 100px; height: 276px; 
        background: url(images/sidebar_left_top.gif) repeat-y top; }
    #leftseperator { 
        width: 100px; height: 13px; 
        background: url(images/sidebar_left_seperator.gif) no-repeat; }
    #leftbottom { 
        width: 100px; height: 112px; 
        background: url(images/sidebar_left_bottom.gif) repeat-y top; }
    #leftend { 
        width: 100px; height: 13px; 
        background: url(images/sidebar_left_end.gif) no-repeat; }
</style> 


Edit: I found a workaround, its an IE6.0 hack and wouldn't fix it for anything else that might have the same problem. I'm using it now, but when I test the site across browsers I may have to throw it away and use something else. Until that happens, heres what I'm adding to the separators:

PHP Code:

/* IE 6.0 */ margin-bottom: expression( document.body.contentEditable=='inherit' ? '-7px' : null ); 


using conditional comments is preferable to expressions, as other versions of IE may handle the positioning differently.

Seeing a page would give us more of a clue what is happening. Screenshots are fine for showing what something should look like but of no use at all for debugging. And snippets of code cannot be tested in isolation because we do not know what else you have in your code.

Expressions have a NASTY way of chewing up a visitors memory, so it is definitely NOT a good way to go at all.

If you want to learn how to beat IE 6's many bugs, start reading here:
http://www.positioniseverything.net

Originally Posted by LadynRed

Expressions have a NASTY way of chewing up a visitors memory, so it is definitely NOT a good way to go at all.

Didn't know that ... I did away with this style and just stuck with fixed heights, I don't know if that will work out in the end though.

And yeah, I read a bunch of stuff on that site yesterday I saw the link in another one of your posts, very interesting