IE6 Pushing Content Box Down

Hi,

I need some help here with CSS. I coded a site, which looks perfect in IE7 and FF, but realized that that's not the case in IE6.

The site is: http://www.tlcomputers.ca

As you can see (if you have IE6), that the main content box is pushed below the left panel. What's weird, is that the products page works perfectly fine.

One other thing I noticed, if I change

.panel_text {
padding: 10px 15px 0px 10px;

to

.panel_text {
padding: 10px 0px 0px 10px;

it works. Only problem is is that the text isn't aligned anymore then.

Here's the link to the CSS:

http://www.tlcomputers.ca/style.css

Anyone know the issue?
Thanks.

 

This will solve your problem:

CSS:

.panel_text {
	padding: 10px 0 0 30px;
	color: #a3abb7;
	font-size: 11px;
}

Code (markup):

There could be other errors in your CSS. You should also search & read about box model.

 

Except that removes his right padding for the text.

Since your left panel content comes before the main in the source, you could just float the left but leave the right, giving it a left margin of 142 or so px. Then IE can't bitch about there not being enough room because the main content won't have a set width.

 

Thanks.

I tried it, still had the same effect though. I put the left margin to 238px, it shows up good in all the browsers, except IE6. Still pushes it below the left panel for some reason.

 

I added up main (492px) and panel (238px) and got precisly 730px (which is what your wrapper is). IE6 is either doing the three-pixel jog, or possibly doubling the margins (since you're floating both). Three pixels would be enough to make IE6 think it's got 238 + 492 + 3 =more than wrapper (730).

I don't KNOW that it's three pixel jog, or one of the other pixel-adding bugs (you can read about them here).

One possible way out of this is to give something a negative margin somewhere of 3 pixels. Since you're floating the main right, you could give main a negative left margin of 3 pixels. But read that page, because 3-pixel isn't the only possible culprit and sometimes there are two or three bugs working at once.

Let us know.

 

Turns out that all the scripts, along with the horizontal rules were the culprits. The width of the scripts all fit the width of the panel, but did not fit if you include the space taken away by the margins. I just lowered the width to fit the actual width and it worked. Also I had a hr class because I wanted it an image, but it was creating the same problem. I didn't check to see if it was the width of it as well, but instead simply inserted an image in the html.

Thanks a lot though Stomme poes.