Member Avatar for kssi89

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;
}
  • 4 Contributors
  • 3 Replies
  • 137 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MJ Pieterse
Member Avatar for Magicianer

You .bgtablealign might be the issue, try:

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

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.

Member Avatar for MJ Pieterse

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.