PDA

View Full Version : Help! CSS layout not displaying right in IE7. Desperate!



AlisonKeddy
Mar 14th, 2008, 01:04 AM
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!

jlhaslip
Mar 14th, 2008, 03:03 AM
Nice Images, but we need a link to the live page, please and thanks.

AlisonKeddy
Mar 14th, 2008, 04:23 AM
sorry, I wasn't sure what you needed. Here's the link:
http://www.jdpauls.com
http://www.jdpauls.com/css/style.css

rangana
Mar 14th, 2008, 04:29 AM
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 ;)

maxvee8
Mar 14th, 2008, 08:24 AM
i dont want to be rude but there are so many better ways that you could have coded that page

you use far too many

<br> and &nbsp;

especially for positioning the nav , this would have been better suited with span ids or divs and positioning them with margins.. maybe even a list

in the css you create seperate classes for padding this makes the whole document confusing especially when random elements are targeted, margins are normally used to position objects such as divs youve used way too much padding to try and position divs.

the overall div stucture of the page isnt bad its how youve gona about putting the other elements in.

im sorry to go on about it but it annoyed me when i was trying to help, i was tempted to code the whole page from scratch! hopefully this can be some constructive critisism.