Hello,

I've had no problems getting the following page to display in IE but FireFox will only display a background image with no allignment, it's just thrown to the side and seems to follow the dimension specs for .bgtablealign. If I change the extension from .html to .php the page displays fine but the background image is missing!

I can't imagine what the difference is between firefox and IE here unless FireFox does not accept the way i've used the .bgtalbealign to select a background image. Perhaps it doesn't play well with .container1 or .absolutebackground that it is running in tandem with.

Any compatibility gurus out there that can shed some light on this?

<div class="container1">
<body class="absolutebackground">
    <table class="bgtablealign">
    <tr>
    <td>
    <div class="container2">
      <table class="bgtablealignCenter">
        <tr>
        <td height="44" valign="top">
        <div class="darkheading">DoomBlog</div>
        </td>
        </tr>
.container1 { 
	position: relative; 	margin-left: auto; 	margin-right: auto; 	width: 1000px; 	text-align: center;   overflow: auto;
	}
.container2 { 
 	position: relative; 	margin-left: auto; 	margin-right: auto; 	width: 800px; 	text-align: center;
	}
.absolutebackground {
	background-color: #000;
}
.bgtablealign {
	background-image: url(file:///C|/Users/xxx/Documents/WebStuff/stripe_384854a7dd3238d4a9aa8145342c5e36.png);
	background-repeat: repeat;
	height: 1500px;
	width: 1000px;
	text-align:center;
	border: 20px solid #666;
}
.bgtablealignCenter {
	height: 1300px;
	width: 800px;
	background-color: #666;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	border: thick dashed #C90;
}
.darkheading {
	font-family: "MS Serif", "New York", serif;
	font-size: 36px;
	font-weight: bolder;
	color: #F90;
	background-color: #000;
}

You .bgtablealign might be the issue, try:

background-image: url('c:/Users/xxx/Documents/WebStuff/stripe_384854a7dd3238d4a9aa8145342c5e36.png');

Your 'container1' div is outside of the 'body' tag, so it may be a browser standards issue; try moving that div inside of the 'body' tag. Firefox is much more standards compliant than IE, possibly resulting in the Firefox-specific behavior you're seeing.

The other thing is that you would need to use some more styling for FF and Chrome etc.

Maybe try and include

.sample {
  text-align: -moz-center;       //alignment for FireFox
  text-align: -khtml-center;    //alignment for Chrome
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.