CSS + IE = Perfect Nightmare

[explorer11]

I give up... please see http://www.spicyglitters.com, looks good in FF but not in IE (using IE6), I have tried everything I can - including banging my head to the keyboard if it counts -.

I have tried to adjust these in wp_style.css:
#container
.width
* html .minwidth
* html .holder
#content

Would anyone help me on this?

Thanks in advance.

[semantic7]

They look the same in Firefox2 and IE6. May be I am not looking at the right thing. Can you explain the problem you notice in IE6 ?

[explorer11]

oh sorry... forgot to say it's not correct in 800x600 resolution... or when we resize IE window smaller.

[semantic7]

Try floating the white box to the right.

[explorer11]

still going down... and now on FF too...

[semantic7]

Try positioning the menu using absolute. Float the white box to the left with [the width of the menu as ] left margin.

[Dan Schulz]

There's no need to. I haven't looked at the code, but if the container is being pushed down, then you need to double-check your math and make sure that everything adds up.

[explorer11]

Thanks semantic7, but from the css, it seems it had already been like that, but I'm not sure.

if the container is being pushed down, then you need to double-check your math and make sure that everything adds up.

Yeah, that's the problem, this is a pre-defined template and I can't understand the whole codes, look like I lost in CSS jungle now

Ok here is some codes (the divs) that I suspect might raise the problem:

On html page:

<!-- wrapper to keep IE from overlapping right sidebar with main content -->
<div class="width">
<div class="minwidth">
<div class="holder">
<!-- End IE wrapper -->

   <div id="container">
      <div id="wrap">
         <div id="leftside">
         <div id="content">  --> this one is the 'white box'

and the CSS:

.width {
	width:100%;
	min-width:1000px;
}

* html .minwidth {
	border-left:850px solid #fff;
	position:relative;
	float:left;
	z-index:1;
}

* html .holder {
	margin-left:-850px;
	position:relative;
	float:left;
	z-index:2;
}


#container {
	color:#303030;
	margin:0;
	min-width:1000px;
	padding:0;
	text-align:left;
	width:100%;
}

#wrap {
	clear:both;
	font-size:0.9em;
	padding:0;
	margin-top: 5px;
}

#leftside {
	margin:0;
	padding:0 10px 10px;
	width:165px;
}

#leftside {
	float:left;
	margin-right:10px;
}

#content {
	background-color:#fafcff;
	border:1px solid #909090;
	color:#2a2a2a;
	padding:15px 20px 5px;
}

#content {
position:relative;
float:right;
margin:0 20px 0 200px;
}

*html #content {
	display:inline-block;
	position:relative;
}

Hope it can help you to point out which one is not correct.
As Dan's suggestion, I had tried to change the '1000px' to larger number '1500px', but still messy in IE.

Please notice that the problem is not the big white box only, but also these things (on stupid IE):
1. The main menu bar (HOME,UPLOAD FILE etc) isn't fully to the right.
2. The 'category' bar inside the big white box

But let's focus on the 'big white box' problem first...

Thanks guys... appreciate your help here...

[explorer11]

yay... at last...

changed width:100% to

width:1000px;
width /* */:100%;

seems it works now... spent 2 days just to find it
does anyone have IE7? I hope it works ok in IE7

[B24]

yay... at last...

seems it works now... spent 2 days just to find it
does anyone have IE7? I hope it works ok in IE7

Doesn't look like anything is out of place to me with IE7.

[explorer11]

Good!... it should be so, as IE7 is more "CSS friendly" than previous ones. But I do like FF muchhh better, if only Windows came with FF so no one use IE