CSS - Css Help - Center Image On Page/browser Size

Hello,

I'm using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can't seem to figure out if it's something im not setting properly within css or if it have something to do with jquery and the cycle plugin.

here's the website thus far:

www.beaucoupla.com

this is my first time writing code so please any help would be appreciated!

Code:

@charset "utf-8";
/* CSS Document */

#mainWrapper {
	/*
	background:#000 right top no-repeat; 
	min-width:1000px;
	min-height:775px;
	border:0px;
	background-color:#000; */
	padding: 0 0 0 1px;
	margin:0;
	top:0;
	left:0;
	width:100%;
}

.mainbar { 
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	visibility:hidden;
	width:78%;
	min-height:100%;
	height:auto;
	/*This works for IE7
	min-height:775px;
	height:775px;*/ 
	border-right: #FFF solid medium;
}

#imagelist {
	left:0;
	position:absolute;
	display:block;
	visibility:visible;
	/* width:auto; static size */
}

#imagelist img {
	display:block;
}

#imagelist img.first {
	display:block;
}

.theimage {
	position:absolute;
	left:0;
	width:100%;
	/* Adding this works for IE7 */
	/* height:775px; */
	border-right: solid #FFF medium;
}


#podcast {
	/*right:303px; */
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
}


.about_info p {
	font-size:1.1em;
		
}

.contact_info, .about_info, .news_info {
	position:relative;
	margin-top:4em;
	margin-left:10%;
	width:78%;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:1.3em;
	color:#FFF;
	height:100%;
}

.contact_info #title, .about_info #title, .news_info #title {
	font-size:1.75em;
	padding-bottom:1.5em;
	color:#1ac089;
	color:#03c5d1;
}
.contact_info .heading {
	color:#c04141;
	font-size:1.2em;
}

.contact_info .mail {
	text-decoration:underline;
}

.contact_info a:hover {
	color:blue;
	text-decoration:underline;
}

.news_info .heading {
	color:#c04141;
}



body {
	/*width:1400px;
	height:775px;*/
	padding:0;	
	margin:0;
	border:0;
	background-color:#000;
}



#share td {
	padding-left:0.5em;
}


#share {
	margin-left:1.4em;
	margin-top:0;
	border-top:0;
	/* padding-top:5; */
	font-size:0.65em;	
}

.sidebar {
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-left:78%;
	margin-top:1em;
	font-size:2em;
	color:#FFF;
}


ul {
	border:0;
	margin:2px;
	text-decoration:none;
}

li {
	list-style:none;
}

a {
	text-decoration:none;
	color:#FFF;
}

a.home:hover {
	color:#bc7bd4;
}

a.news:hover {
	color:#7bd488
}

a.podcast:hover {
	color:#d47b88;
}

a.blog:hover {
	color:#d4cb7b;
}

a.about:hover {
	color:#7bd4c6;
}

a.contact:hover {
	color:#d4a37b;
}

a.twitter:hover {
	color:#33ccff;
}

a.myspace:hover {
	color:#999;
}

a.facebook:hover {
	color:#5b61d5;
}

Hi,

I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is).

i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically.

Many thanks!

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,


How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div>