IE Image Display Compared To FireFox

[zapme1]

I'm having a strange issue with the "Title-Bar Background" on my site when displayed in IE!

The image below is showing the way the bar Should look! It looks fine in FireFox AND if I set IE to "Compatibility View", it also looks fine like below!





However, if I display in IE "Without Compatibility View", This is the way the Title Bar displays!



Can someone tell me how to fix this?

My site... http://www.life-style-decor.com

[stevesh]

When I remove the display:table; element from .dt, they look the same in IE8 and IE7 (Compatibility Mode). I don't know what that'll do to the rest of the site, but it might be a place to start.

Also, something, probably your slide show, is causing your site to load very slowly here.

[zapme1]

When I remove the display:table; element from .dt, they look the same in IE8 and IE7 (Compatibility Mode). I don't know what that'll do to the rest of the site, but it might be a place to start.

Also, something, probably your slide show, is causing your site to load very slowly here.

Thanks Steve! Removing that did make the Title Bar better, but also messed up a few other things on the site! , so that won't work!

Since I added the slideshow, I did notice a pretty good delay in loading, but not sure how to make that any better. I do like the slideshow to show-off products with the scenic backgrounds!

[zapme1]

Well, nothing I've tried seems to work!

If I manage to make it look better in IE, then it's messed up in FF!

Anyone else have any suggestions?

[zapme1]

Does anyone know if there is a way to see the corrections that IE is making when put into Compatibility View?

If I knew that, then maybe I could make a permanent fix for this issue!

[gjh42]

This is a consequence of using a Template Monster template. They have replaced the

<h3 id="categoriesHeading" class=".leftBoxContainer">Categories

element with this set of nested divs:

  <div class="dt TTX_IN1">
	<div class="dt TTX_IN2">
		<div class="dt TTX_IN3">
			<div class="dt TTX_IN4">
				<div class="dt TTX_IN5">
					<div class="dr">
						<div class="dc TTX_IN6">
							<div class="tt_txt">
								Categories

which, when you look at their styling, are precisely a set of nested tables. Apparently they followed the "use divs with CSS instead of tables" recommendation literally, without the slightest understanding of what that really meant. This, of course, allows all kinds of weird behavior to crop up...

I could accept up to three wrapper divs inside the h3 if the design required four rounded corners for the heading, with automatic adjustment for both height and width, and support for old browsers and IE; but this is ridiculous (and standard for TM).

Also, the headings and their contents are not actually associated with each other, just separate elements following each other in the sidebar.

The best way to fix it (without scrapping the TM template entirely) would be to get rid of the TM sidebox files and style the stock Zen Cart sideboxes to look like the template. You might want to use Categories Dressing to get the categories sidebox to have the same list styling.