CSS help for IE! Want to cry....

[doberdoo]

I spent loads of time developing my page to get it looking just right. However, stupid me was only looking with Firefox. Now, after all that work, I notice that the top banner is messed up in IE!

I have an alpha channel GIF on the right and it seems to be interfering with my background color of another division. Any web gurus out there have a suggestion?

Thanks!

website is:
http://www.doberdoo.com

Any other input would also be appreciated!

[doberdoo]

I have a feeling that this is one of those IE "a float box that is bigger than its containing box so IE expands the wrapper box to contain it" bug. I am trying several work arounds, but nothing has worked yet!

[brandtim]

You did right starting in Firefox ... that'll make the rest easy.

IE7's support for alpha channel is spotty at best and in IE6 it's virtually non-existent. Since you're just doing a fade to white, just make your background image fade to white and eliminate the alpha channel entirely. That will fix the background image display.

The white line across the dog is actually the breadcrumb.

Add this as the last line of your #navBreadCrumb css:

	margin-right: 115px;

... and that will match your site in IE7 to FF2. Didn't check IE6, but I expect that will work there as well.

BrandTim

[usernamenone]

This is the ie bug

<div id="navBreadCrumb">Home
</div>

By removing the code your image pops up as it should.

You may try to turn off breadcrumbs in admin to see if that works and if not removing the code does.

Or if you want to use breadcrumbs you could add a style in the style sheet for navbreadcrumbs and give it a width so it does not span the width of you column and interfering with the image path.

[brandtim]

Just realized that I was mistaken about the transparency problem. IE7 was rendering the transparency fine ... but the float was pushing the div with the gradient to the left and showing the color below.

Here's the fix:

Move these lines from #tagline to #logoWrapper:

  background-image: url(../images/header_bg.jpg);
  background-repeat: repeat-y;

And then move this line from #logoWrapper to #headerWrapper (you'll need to make a section for it):

  background-color: #485766;

and all will be well.

BrandTim

[doberdoo]

thank you all so much for your help!!! in other forums (slickdeals.net for example) when someone responds to your post, they send you an email. i didn't check back for a few weeks b/c i didn't think anyone had responded! i had managed to stumble across some of the solution in that time, but your suggestions worked the best!

for posterity sake this is what i found:
in ie7 the code
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-y;

didn't render properly, but, if i commented that out and put this instead

background: url(../images/header_bg.jpg) bottom right;

that seemed to render properly, though it doesn't look like it should...

still, moving the gradient to the #logowrapper and the background color to header wrapper works perfectly.

as far as the bread crumb issue, i just used margin-right : 115px as suggested and it worked as well!

thanks to the zen-cart community for all of your help and input. you guys are wonderful!

now all i need to know is how to install ie5, ie6, and ie7 on the same machine so i can test my code with each!