Anyone know why this background is appearing on IE?

Hi all.

I've got a new site here:
https://www.in-the-spirit-shop.co.uk/shop

Becase I needed round corners I made the main wrapper have a background with the 6px edge as part of a graphic.

Then I put corners on the top image and I made a lower image with curves to match.

Firefox - It works.
IE - I get a bit of page background showing between my content and the 'terms/conditions' line.

If I get rid of the lower image (the one with the corners) the line disappears, so it's presumably associated with that.

However, try as I might, I can't work out what is actually telling IE to put the image there.

Making it bigger doesn't help, as does throwing a suitable style at the image.

I am stumped, a would appreciate any pointers you guys might have.

Regards
Steve

You've got several mistakes in the header and other areas that firefox can work around but the lovely IE freaks out with.

Using the html validator addon for firefox will point out where you have changed an <li> to a <a> without removing the <ul> and other items as well.

The validator says you've got sixteen errors when the main page loads.

Bud i appreciate this isnt helping with your question however, i can see you have customized your sub nav links, i am trying to do this!! im going mad do you have any suggestions as to how i can change them from the defualt links!!

many thank

Elliot

Which links exactly do you mean? The ones in the main side menu?

Well whichever ones you mean it's just the css targetting thing, which I'm only just beginning to get to grips with.

My understanding is that when you have a class defined like class="mylinks" then you can specifiy a.mylinks in your css and only those links get affected.

There's plenty of stuff on the web, but your answer is that it's just about getting to grips with css and how specific things get targetted.

budfox,
you still have this in the footer> <!--bof-ip address display -->

<!--eof-ip address display --> <!--bof-banner #5 display --> <!--eof-banner #5 display --> <!--bof- site copyright display --> <div id="footerimg"><img src="images/footer_curved.gif" width="750" <div>height="16" alt=""></div> <div id="terms" align="center" class="termsclass"> <a href="http://www.in-the-spirit-shop.co.uk/shop/index.php?main_page=conditions" class="white">TERMS AND CONDITIONS</a> | <a href="http://www.in-the-spirit-shop.co.uk/shop/index.php?main_page=conditions" class="white">CONTACT</a><br /></div> <div id="footerstuff" class="nobackground" align="center"> <img src="images/paymentcards.jpg" alt="Payment_Cards" title=" Payment_Cards " width="250" height="20"/> <div> <div id="copyright" class="copy">© Copyright: In The Spirit - Powered By Zencart </div> <!--eof- site copyright display --> </div> <!--bof- parse time display --> <!--eof- parse time display --> <!--bof- banner #6 display --> <!--eof- banner #6 display --> </body></html> try changing it to> <!--bof-ip address display --> <!--eof-ip address display --> <!--bof-banner #5 display --> <!--eof-banner #5 display --> <!--bof- site copyright display --> <div id="footerimg"><img src="images/footer_curved.gif" width="750" height="16" alt=""/></div> <div id="terms" align="center" class="termsclass"> <a href="http://www.in-the-spirit-shop.co.uk/shop/index.php?main_page=conditions" class="white">TERMS AND CONDITIONS</a> | <a href="http://www.in-the-spirit-shop.co.uk/shop/index.php?main_page=conditions" class="white">CONTACT</a><br /></div> <div id="footerstuff" class="nobackground" align="center"> <img src="images/paymentcards.jpg" alt="Payment_Cards" title=" Payment_Cards " width="250" height="20"/>

<div> <--delete this

<div id="copyright" class="copy">© Copyright: In The Spirit - Powered By Zencart </div> <!--eof- site copyright display --> </div> <!--bof- parse time display --> <!--eof- parse time display --> <!--bof- banner #6 display --> <!--eof- banner #6 display --> </body></html>

You may need to change which <div> is deleted to give you the look you're after but I believe that one will do it.
Also, the class calls of "white" COULD lead to mistaken readings. Maybe "navWhite" to avoid confusion?

Thanks. Didn't work, but thanks.

I'll keep looking :-(

budfox:

Hi all.

I've got a new site here:
https://www.in-the-spirit-shop.co.uk/shop

Becase I needed round corners I made the main wrapper have a background with the 6px edge as part of a graphic.

Then I put corners on the top image and I made a lower image with curves to match.

Firefox - It works.
IE - I get a bit of page background showing between my content and the 'terms/conditions' line.

If I get rid of the lower image (the one with the corners) the line disappears, so it's presumably associated with that.

However, try as I might, I can't work out what is actually telling IE to put the image there.

Making it bigger doesn't help, as does throwing a suitable style at the image.

I am stumped, a would appreciate any pointers you guys might have.

Regards
Steve

Try to set the height for #footerimg

#footerimg {height:16px;}

Also, now you have a missing </div> if you try to validate your site.

Validation Link

Brilliant. Many thanks.

The </div> Jettrue talks about is very important as it is the closing for the mainWrapper. Try adding </div> just after > <!--eof- banner #6 display --> in the footer.

All done. I wonder what the next 'issue' will be :-)

Murphy was an optimist:yes: