center column is a mile wide in IE - HELP!

hi,

so the my site looks as i want it to in FF and chrome, but when
i view it in IE - the center coulmn is 10 times (not exactly) wider!

http://195.28.180.70/~kmeot

any clues?

ive tried to look into W3C validator but no error that i found there was relevant to this issue

thanks!

In your stylesheet you have the #mainWrapper and #contentmainWrapper set to 1600px. Although your #headerWrapper is 849px, you will still have to set the first two to the same to stop the width of the whole page from getting bigger.
The center does not seem too wide in FF, but I'm still getting a horizontal scroll. Not good. Most people will not have screens wider than 1024px. You can still design for the wider screens visually, but you really should set the important content of the page for less.

Are you trying to center the page ? You should google "center my page with CSS" and find a couple of good methods of doing that. I personally like to use the auto margin method.

yeah thanks, ive just noticed that. the thing is this:

there is a footer (brown bottom line) and i want it to be at the end
thats why i have the back ground divided to three pictures (header, content and footer) and the width contains the padding.

so thats why its so wide, but yeah, its pretty stupid, thanks for pointing that out :) :oops:

any way, now the problem is this:

1- the main wrapper is still not exactly in place in ie (chrome and FF just dandy) - is there any way to fix this specifically for ie?
2 - i wanted the background to scroll, now i cant (because now the header and content are the same picture), is there a way to make a fixed back ground in a div (or body) that is text-align center? cause when i try it cancels the margin:0 auto of the mainwrapper (making it not in the center)

thanks! man this forum is really helpfull

correction - forgot bout the other things, im having a progblem only in the RTL languages, every thing else is fine

Okay, I've studied it a bit more and I think I see what may be going on. You have more than one stylesheet trying to set the same properties for the same classes. Your stylesheet.css should set everything that you want the be the same for every language. Your OTHER_LANGUAGES_stylesheet.css should only specify what you want to change about the first stylesheet. You do not need to declare every setting again. Having it called after the stylesheet.css will put it closer to the content and therefore will override any settings previously set. So if want to set your main stylesheet.css for rtl then in your english_stylesheet.css to override it set it to ltr.

Delete the OTHER_LANGUAGE_stylesheets from the server and perfect your main stylesheet first. Then tweak the settings for the other languages one little thing at a time.
******This is important **** Delete all the -350 margins you have set for all the stuff you want in the footer. Put margin:0 if you want the images to fill up the page. So if you resize it will always be to the edge.
This along with the settings below should get rid of your horizontal scroll AND your IE problem. If it doesn't work perfectly, it should at least get you closer to your goal.

Start with this in your main stylesheet.css to replace what you have now for each of these:

body {
	text-align:center; /*to center mainWrapper */
	background-image:url(../images/mainbg.jpg);
	background-position: top center; /*to center background-image */
	background-repeat: no-repeat;
	background-attachment:scroll;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	direction:rtl;	
	}

#mainWrapper {
	width:878px;  /*This can be anything you want*/
	min-height:1134px; /*I don't think this works in IE  */
	margin: auto; 
        text-align:right; /*CHANGE TO left for english, etc.*/

	}

#headerWrapper {
	height:300px;
	padding-right:29px;
	margin:0 auto;

}
#contentMainWrapper {
	margin: 0em;
	padding: 0em;
}
#logoWrapper { /*you don't need the width your image in already in your background image*/
	height:250px;
	clear:both;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	position: relative;
	} 


#taglineWrapper {
	width:100%;
	}
		
#tagline {
	color:#000000;
	font-size: 2em;
	text-align: center;
	padding:5px 5px 0 0; /*CHANGE TO what you need for the respective languages.*/
	margin: 450px; /*Use this to position not padding CHANGE TO what you need for the respective languages. */
	}

thank you so much tammy! you haelped a lot, saved a lot of time for sure.:clap:

hope i could help someone like you helped me in my turn :)

this forum really expresses the power of cumminty

That is what the forum is all about. That is why I've been a loyal zencart user for a while now. It's my turn to give back. When you are ready, pass it on. Don't give up. It is totally worth it. Not every question will get answered right away. Sometimes if it doesn't get answered, the reason is that it has already been answered in the faqs, on the wiki site or in the forum. Sometimes it's because it is not (strictly speaking) related to zencart, like your CSS issue, but many times there are people who will step up to help. Best of luck.