Resizing and centering my site in IE?

[gumbald]

Another thread, for another silly little niggle I've found...

When I resize the window, my site goes funny in IE, but not in FF. Guessing this is a CSS problem, I can't seem to find a definitive solution though.

Can anybody point me in the right direction?

http://gumbald.co.uk

EDIT: I've managed to fix it, IE seems to have a problem with the width being defined in the body rather than the wrap. It's messed my colours up now though, should be easier to sort though.

 

[Eriedor]

What exactly is the problem with resizing? Seems fine to me in FF and IE6. However thats not to say there isn't thins wrong with yer CSS,

 

[furnace]

EDIT: I've managed to fix it, IE seems to have a problem with the width being defined in the body rather than the wrap. It's messed my colours up now though, should be easier to sort though.

Width? Or do you mean height?

Either way, you can't change the bodies width or height. It'll be the size of the browser window, always... that's probably the reason for the weirdness.

 

[gumbald]

The width is fixed at 640px...

I've now got an issue with the colours, can anybody work out where the small border at the top of my page is coming from?

html {
	height: 100%;
	overflow: -moz-scrollbars-vertical;
	background-color: #111;
}

* html #wrap {
	height: 100%;
}

#wrap a:link {
	color: #0054A6;
	text-decoration: none;
}     
#wrap  a:visited {
	color: #0054A6;
	text-decoration: none;
}  
#wrap  a:hover {
	color: #828282;
	text-decoration: none;
}   
#wrap  a:active {
	color: #000000;
	text-decoration: none;
}   

body {
	font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
	min-height: 100%;
}

h1 {
	font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
	color: #00f;
	margin: 0;
}

h2 {
	font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
	padding-top: 3px;
}

.imgLeft {
	float: left;
	padding-right: 10px;
	margin-top: 0px;
}
.imgRight {
	float: right;
	padding-left: 10px;
	margin-top: 0px;
}

#wrap {
  position: relative;
	min-height: 100%;
	width: 640px;
  margin: auto;
	border: 1px solid red;
}

#headwrap {
}

#logo {
  text-indent: 10px;
	width: 100%;
	height: 42px;
	background: #BBF repeat center;
	text-align: left;
}

#navbar {
  text-indent: 10px;
  width: 100%;
	font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
	margin: auto;
	height: 16px;
	padding-top: 2px;
	color: #000;	
	text-align: left;
	background: #DCDCDC repeat-x;
	border-bottom: 1px solid #ccc;
}

#navbar li {
	display: inline;
	padding-right: 10px;
	margin: 0;
}

#navbar ul {
	padding: 0;
	margin: 0;
}

#mainwrap {
}

#mainwrap:after {
	display: block;
	clear: both;
}

#content {
	position: relative;
	padding: 16px;
	text-align: justify;
	background-color: #FFF;
}

I want the outside borders of the page to be a certain colour, and the middle section (content) to be white right to the bottom of the page. Setting "min-height: 100%" has stopped working since I made the changes to get IE working

EDIT: tidier CSS code, still no idea where the top border is coming from, or why the white box isn't down to the bottom of the page.

 

[Eriedor]

Width? Or do you mean height?

Either way, you can't change the bodies width or height. It'll be the size of the browser window, always... that's probably the reason for the weirdness.

In strict mode you have to specify body attributes to achieve desired widths and heights.

OP original layout was most likely caused from using minus numbers for margins and left:50%

 

[gumbald]

OP original layout was most likely caused from using minus numbers for margins and left:50%

I did try that, but it was no different to using "margin: auto".

Any thoughts as to where the brown border at the top is from?