My Cherry Zen site Shows Different in almost Every Major Browser..

[RsUnv]

I'm using the Cherry Zen template as a basic template for almost all designs I do, but from time to time I get into some issues regarding placement of graphics that will not show correctly, which I usually am able to fix - but not this time, as most browsers (except Firefox and Internet Explorer 8!) will show it the bad way. Take a look at vaho.no - the lower wave in the footer area is the problem. The CSS that I use for placement is:

#bottom_illustration
{
    background-image:url("../images/footer-bar.gif");
    background-repeat:no-repeat;
    color:#FFFFFF;
    height:52px;
    margin-top:-120px;
    margin-left:364px;
    position:absolute;
    width:950px;
}

I have also tried using position: relative; but with no exciting results..

Anyone got any pointers I would appreciate it tremendously

Also attaching what I get in the different Browsers:

Firefox


Internet Explorer 8


Chrome 6.0.472.63


Safari 4.0.4


Internet Explorer 8 With Compatibillity View:


Thanks for taking the time to read this cry for help

Cheers,
Surtsey

[kobra]

From your source

<!-- end mainWrapper -->
<div id="bottom_illustration">
</div>

Notice your added div "bottom_illustration" is outside of the mainWrapper...
If moved so as contained within the mainWrapper you should not have the issue

[first trading]

Remove the position:absolute commands, after you've done that.

[RsUnv]

Hi and thanks for taking the time

I tried this now, but I can not see any visible changes - thinking I done this the wrong way, since you guys obiously know what you're talking about

I did move it within the MainWrapper div and so on, but same result. I also removed the position tag within the CSS code.

Thanks for helping

Cheers,
Surtsey

[gjh42]

This is quite strange... you currently have the bottom image inside #contentMainWrapper, but #contentMainWrapper is after everything else on the page (and holds nothing else) instead of containing most of the page. Is that the way the template is built, or did you modify it?

[kobra]

Now from your source

<!-- end mainWrapper -->
  <div id="contentMainWrapper">
    <div id="contentMainWrapperb">
      <div class="outer">
        <div class="inner">
          <div class="float-wrap">
                <div id="bottom_illustration">
    </div>

Still outside of the mainwrapper

[RsUnv]

Sorry for not giving any feedback for this yet (I just fell off the earth there for a little while). But I'm happy to say that your advices worked and made all the difference for me. Thanks guys! :-D

PROBLEM SOLVED!

Cheers,
Geir

[gjh42]

Glad it's working now:)