Whitespace in IE and not in FF

[rune79]

I have now spend many hours trying to figure out what can be wrong and how to solve this issue.

I have a whitespace in the left side of the website (beside the logo), and not at the right side, and it doesn't seem to be a problem when viewing the site with FF, only IE.

http://www.boofoowoo.dk/index.php

I have tried following some of the advices given elsewhere on this issue, but it still have'nt solved my problem. Any advice would be apreciated a lot :).

The CSS looks like this

* {
margin: 0;
padding: 0;
}


#mainWrapper {
	topmargin:0 auto;
	top:0em;
	text-align:center;
	vertical-align:top;
	position:relative;
	padding-bottom:25px;
	width: 769px;
	background-color:#FFFFFF;
	white-space: nowrap;
	}
	
/* Start hide from IE-Mac \*/
* html #mainWrapper{height: 1%;}
/* End Hide from IE-Mac */

#contentMainWrapper {
	text-align:left;
	position:relative;
	top:0em;
	width:769px;
	white-space: nowrap;
	}
	
	#centerColumnWrapper, #centerColumnWrapperb  {
	width:69.9em;
	white-space: nowrap;
	}
	
	#centerColumnOuter {
	margin:0 .5em;
	width:70em;
	height:15px;
		white-space: nowrap;
	}

#centerColumnWrapper2 {
	margin:0 .5em;
	width:70em;
	white-space: nowrap;
	}

#centerColumnWrapper2b {
	margin:0 auto;
	overflow:hidden;
	width:70em;
	white-space: nowrap;
	}
	
	#centerColumnOuter {
/*	background:url(../images/headerborder.gif) repeat-y; 
*/	}
	
#centerColumnWrapper2{
	background:url(../images/content_bg.gif) repeat-y 80% 0;
	white-space: nowrap;
	}
	* html #centerColumnWrapper, * html #centerColumnWrapperb, * html #headerWrapperb, * html #headerWrapperc, * html #dropMenuWrapperc, * html #dropMenuWrapperd, * html #bottomLine {
    background:none!important; /* Hides the transparent shadows from older versions of IE */
	}
	
* html #centerColumnWrapper2b, *html #centerColumnOuter{
	border:1px solid #999999;
	border-top:none;
		white-space: nowrap;

	}
	
*html #centerColumnOuter {
	border-bottom:none;
	}
	
#centerColumnWrapper {
	background:url(../images/shadowRight.png) repeat-y 100% 0;
	width:69.6em;
	white-space: nowrap;
	}

#centerColumnWrapperb {
	background:url(../images/shadowLeft.png) repeat-y 0 0;
	width:70em;
	white-space: nowrap;

	}
	
#bottomLine {
	background:url(../images/shadowAlpha_bot.png) repeat-x top;
	}

#headerWrapperb {
	background:url(../images/shadowRight.png) repeat-y 100% 0;
	width:70em;
	white-space: nowrap;
	}
	
#headerWrapperc {
	background:url(../images/shadowLeft.png) repeat-y 0 0;
	width:70em;
	}
	
#headerWrappera {
	width:70em; /* change to width:70em; or 100%for narrow header*/
	margin:0 auto;
	text-align:center;
	}
	
#headerWrapper {
	width:769px;
	text-align:center;
	margin:0 auto;
	/*background:#999fff;*/
	}

[langsor]

Just a place to start, first get rid of your CSS errors.
You can validate the CSS at this website:
http://jigsaw.w3.org/css-validator/

I noticed that you have un-commented non-CSS (plain text that should be commented out) in your stylesheet (I downloaded the entire thing off your site) and also that you use styles like top-margin and topmargin which neither are recognized style declarations and you use style properties like float: center which is not a valid property...the list goes on.

The crux of your problem is in the #mainWrapper div id style block, but with all the other errors here there's too many contributing factors to fix before narrowing down the specific issue.

Good luck

[rune79]

Hi Langsor,

Thank you very much for this link, it helped a lot it seems. Ususaly I'm not spending so much time on design and development, so it's really great to get this kind of fast and usefull tips.

Now life can go on.. :)