CSS won't display correctly in IE7! Desperate!

[alisonkeddy]

I have been working at this problem for hours and I'm running out of time to deliver this site to a client. I'm way in over my head here so any help would be GREATLY appreciated.

The site displays fine in Firefox, Safari, and IE6 but screws up in IE7. Shocking.

The following links are screen shots of the problem:

In Firefox (properly): http://www.jdpauls.com/Firefox.html
and in IE7 (screwed): http://www.jdpauls.com/IE7error.html

Please ignore the colour issues with these two images. The problem is in the bottom half of the image.

In the first shot, the text spreads across the whole area minus the right padding of 250 px. The content div continues horizontally under the navigation (top right div).

In the second shot, the text uses the right padding of 250 px and squishes everything to the left in a small column of text. The content div doesn't continue horizontally under the navigation but instead gets cut off to the left of it. This causes the block of bgcolor in the right bottom of the page.

It seems that this is a simple fix, just one piece of code to insert, but I just don't know what it is.

Here is the CSS for the navigation and content areas respectively:

#sidebar-a {
background-image:url(../images/sidebar.gif);
background-repeat: no-repeat;
float: right;
width: 320px;
width:expression(document.body.clientWidth > 319? "320px": "auto" );
max-height: 520px;
min-height: 520px;
height:expression(document.body.clientHeight > 519? "520px": "auto" );
overflow: hidden;
line-height: 18px;
clear: none;
}

#sidebar-a .padding {
padding: 0;
}

#sidebar-a a {
text-decoration: none;
}


______________

#content {
background-image:url(../images/contentbg.gif);
background-repeat:repeat-y;
line-height: 18px;


}

#content .padding {
padding: 60px;
padding-top: 0;
}



Any help at all would be great! Thank you!

[rangana]

That's indeed a good pic to start figuring this one out, but the HTML and CSS will play vital role. Could you provide a link ;)

[alisonkeddy]

sorry, I'm new to the forums and I wasn't sure what to include. Thanks for the tip.

The site is at

http://www.jdpauls.com.

http://www.jdpauls.com/css/style.css

[rangana]

You don't have <div id="left"></div> in your Listing and Buyer Information.
It's the cause of the gap, which I suppose you want to fill in ;)

[alisonkeddy]

I don't want to sound ungrateful here, because I'm so happy you took the time to look at it, but there is no "left" in my stylesheet. Do you mean "topleft"? I checked both html files, and it looks like I have them. Or do you mean that there is a new div that I haven't inlcuded in my CSS? I'm just a bit confused. Would you mind spelling it out for me?

[rangana]

In your main page, where the picture shows up, you have something like:


<div id="page-container">
<div id="left">
</div>



Now, see in your Buyer and List Information Page. You don't have left div.
YOur left div has this:


#left {background-image:url(../images/left.jpg);}


...In which I suppose you wanted to be seen in the gaps ;)

Hope made sense ;)

[alisonkeddy]

Oh, I see what you're referring to. I have a seperate style sheet for the index page. I'm sorry, I should have mentioned that. Don't look to the index for any similarities with the other pages. I'm only having a problem with the other pages.

[rangana]

That's the point. Maybe if you want to add the <div id="left"></div> under your <div id="content"> to fill in the gaps? ;)

By the way, I may not getting this right, what do you want to insert with those annoying gaps?..Isn't it the left.jpg image right? :)