Opera CSS Alignment Issue

Hello. I have been having some compatibility problems with Opera and Safari for my site http://www.legislativesmackdown.com

At this point, I've solved every issue (on the index page, anyway) except for one. In opera, the intro text is not centered. It works fine in IE and Firefox, but in Opera, it hangs around on the lefthand side, aligned with the lefthand side of my background image.

Here is the css:

html, body { 
	margin: 0 auto;
	padding: 0; 
	font: 12px Verdana; 
	color: #600000;  	
	height: 100%;	
	line-height: 1.4em;
	text-align:center;	
	background-color:#ffffff; 
	background-image: url("body_bg.gif");
	background-repeat: repeat-y;
	background-position: center;
}
p { padding: 0; margin-bottom: 7px; margin-left: 0; margin-right: 0; margin-top: 0; color: #000; }
div#Main {
	text-align:center;
	margin: 0 auto;
	padding: 0; 		
	} 
div#Other {
	width:750px;
	position:relative;
	}
	
	div#Header {
		width: 748px;
		height: 170px;
		float:left;
		position:relative;
		}
	div#Layer1 {
	position:relative;
	width:146px;
	z-index:1;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	float:left;
	background-color: #F9FD24;
	border-right:solid;
	border-right-color:#000000;
	border-right-width:4px;
	border-bottom:solid;
	border-bottom-color:#000000;
	border-bottom-width:4px;
	}
	div#Menu{
		text-align:center;
		font-size:10px;
		position:relative;		
		}	
		div#MainTextContent {
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		text-align:center;
				}			
		div#BodyTitle {
		font-family:Arial, Helvetica, sans-serif;
		font-size:20px;
		font-weight: bold;
		text-align:center;
		}
		div#Image {
		text-align:center;
		}
		.BodyText{
		margin-right:50px;
		margin-left:50px;
		text-align:-moz-center;
		float:none;
		width:748px;						
		}	
		div#BodyElements{
		text-align:center;
		float:none;			
		}

Code (markup):

Any ideas?

Thanks
Tom

 

You have troubles in Firefox, too. Here is one cause:

.BodyText{
		margin-right:50px;
		margin-left:50px;
		text-align:-moz-center;
		float:none;
		width:748px;						
		}

Code (markup):

That makes the container 100px wider than the main container. Instead of that, do this;

.BodyText {
  margin-right: 50px;
  margin-left: 50px;
  text-align: center;
  }

Code (markup):

No new page should be written with deprecated elements or attributes. You have both. Use a strict DTD and validate your html. You can keep the invalid embed element if you must, but there is a valid way to mark up a Flash object. Google "flash satay".

cheers,

gary

 

I made that change, but the issue remains.
Tom

 

No, you didn't. This

.BodyText{
	margin-right:50px auto;
		margin-left:50px auto;
		text-align:center;					
		}	

Code (markup):

is not this

.BodyText {
  margin-right: 50px;
  margin-left: 50px;
  text-align: center;
  }

Code (markup):

cheers,

gary

 

Good call.

I made that change, and that allows me to set the margins. When I set them much larger, it works on Firefox. However, FF and IE seem to use a different reference point--IE is setting the margins based on the edge of the Main container, whereas FF seems to be setting it based on the edge of the background image, which includes some white space on each side. So it looks centered in FF, but it's pinced in IE.

Is there a way to reconcile that without trimming down the image (I want to be able to add a gradient or something to the image if I ever change the layout, so I'd prefer to leave the white in place if possible).

Thanks
Tom

 

I don't see the pinched effect you talk about. Can you show a (cropped) screen cap with circles and arrows (apologies to Arlo) to indicate the differences?

cheers,

gary