Bizarre IE rendering problem on my site design

Ein

Hi guys. I'll keep it simple.

http://fusedcreations.com/murray/

in Firefox, Chrome, Opera, you name it, this site looks pretty much as I intend it to. Mind, it's not done, but whatever, that's not the point. The problem I'm having is with regards to the 'horizon' images at the top.

Easiest explained with images.

This is what it looks like in firefox:



This is the exact same thing in IE 8:



For some inexplicable reason, the tiling horizon image on the left side is deciding not to show up at all.

This is the HTML and CSS for the relevant parts:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>      
     <div id="horizonleft">
    &nbsp;
    </div>
    </td>
    <td width=823>
         <div id="header">
	</div>
 </td>
    <td>    
     <div id="horizonright">
    &nbsp;
    </div>
  </td>
  </tr>
</table>

#horizonleft{
    margin-left:-983px;
	height:287px;
	width:983px;
	background-image: url('images/tiling_left.jpg');
	background-repeat: repeat-x;
}
#horizonright{
	height:287px;
	width:1000px;
	background-image: url('images/tiling_right.jpg');
	background-repeat: repeat-x;
}	
#header{
		height:287px;
		width:823px;
		background-image:url('images/header.jpg');
	}

It's not the most beautiful code in the world, because I'm an amateur. I was trying to get the divs to sit three-wide up top without much success, so I just jammed them into table columns instead and it worked beautifully on every browser but IE. The margin-left property on #horizonleft is just so that the tiling image at the top meets the proper seam in the middle picture, so the join between images isn't visible. I set the widths of horizonleft and horizonright to some arbitrarily high number so that it'd extend off to the sides for people viewing at 2000+ wide resolutions, as rare as that is (I'm at 1920 myself, though).

For whatever reason, IE refuses to acknowledge the background-image of the left side. What can I do?

Eat it You Nasty Pig.

Have you tried making the #horizon dimensions small enough to actually fit on the screen? IE didn't used to be that smart about figuring out what margins should be if left to it's own devices

Ein

I did, yes. I dropped both sides down to 200px just as a test, with identical results - the right side rendered, and the left side did not. I have also tried setting the td widths of either side to 100% with no change in rendering.

Ein

May have gotten it. On a lark, I added a position:relative; on #horizonleft, and it's showing now, and I don't think I broke anything else, so yay me. Now the only thing that seems to be wrong is that in Chrome and Safari, the middle image is shifted over 1px to the right for no reason at all.

Szechuanosaurus

There is absolutely no reason to have that much code for a background tile, let alone splitting it up into two seperate tables. Just tile the background inside a single header div then nest your logo image inside that.

Basically your HTML should just be a header div with an image tag inside it for the logo. Then the css dictates the width of the entire column, tiles the background image right across it, centres the column on the page and then centraly positions the logo location within that.

Incidentally, in it's current state it breaks in mobile safari as well. The left hand margin is tiny and the right hand goes on for miles.

Ein

Szechuanosaurus wrote: »

There is absolutely no reason to have that much code for a background tile, let alone splitting it up into two seperate tables. Just tile the background inside a single header div then nest your logo image inside that.

Basically your HTML should just be a header div with an image tag inside it for the logo. Then the css dictates the width of the entire column, tiles the background image right across it, centres the column on the page and then centraly positions the logo location within that.

Incidentally, in it's current state it breaks in mobile safari as well. The left hand margin is tiny and the right hand goes on for miles.

The problem with doing it the way you suggested is that I can't control where the tiling horizon image actually hits the middle logo image - on different resolutions, the tiling horizon would be scaled differently - so what'd end up happening is that the seam on either side of the image would be really visible.

Edit: a picture explains it better, so here's what your suggestion causes:



See what I mean? I can't control how the background image tiles like that.

Szechuanosaurus

Transparencies would be the most immediately obvious solution for that.

Also, now that I'm on my PC your layup is all kinds of broke in Chrome. No tiling at all on the right and the body frame doesn't line up with the header image.

Really, your solutions are causing more problems than they're solving. Now that I can take a look at the code it's obvious why. Spend some time figuring out the most efficient way to break down the styling and the content then scrap this code altogether and start from scratch with semantic layup.

Vrtra Theory

As Szechuanosaurus mentioned, there are much easier ways to do this. I did a site like this recently, and here is how I would do it: first, create your max-size tiled background image (let's say you create an image that's 2000 pixels wide). That will be your background image. Then, overlay your header stuff in the exact center of that image and capture the middle 800-something pixels (easier if it's an even number). This is your logo.

Now you can do what Szechuanosaurus suggested:

HTML:

<div id="header">
  <img src="images/header.jpg" alt="" />
</div>

CSS:

#header {
  background:transparent url('images/background.jpg') no-repeat center top;
  text-align:center;
  height:287px;
}

Way fewer lines, way more semantic, and probably easier to change later.

Ein

I did this in the header instead (a wee bit before I read the last two responses), and it seems to be working in everything I'm testing it in now:

<table width="100&#37;" height="287"border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td background="http://www.fusedcreations.com/murray/wp-content/themes/evening-sun/images/tiling_left.jpg" style="background-position:top right;">&nbsp;</td>
    <td width="823" background="http://www.fusedcreations.com/murray/wp-content/themes/evening-sun/images/header.jpg">&nbsp;</td>
    <td background="http://www.fusedcreations.com/murray/wp-content/themes/evening-sun/images/tiling_right.jpg">&nbsp;</td>
  </tr>
</table>

Only weird thing is that the relative URls to the images weren't working (images/tiling_left.jpg), so I had to use absolute ones (the whole URL).