An IE7 Question

[luciano991]

Hello,

On this site I have two IE7 issues. http://www.cateringbydale.com

One is that logo at the bottom of the main menu goes outside the box that's supposed to contain it. You can see how it's supposed to look on Firefox.

The other issue is on the Behind the Scenes page where the slideshow covers the last sentence of the paragraph above it.

The problem I always have is that you can find tons of material on IE7 bugs and how to fix them but I am rotten at figuring out which bug is making trouble for my pages.

Thanks in advance.

Luciano

[Paul O'B]

Hi,

You ae using a negative margin to align that logo at the bottom of the menu because you didn't remove the default padding from the ul. IE7 doesn't apply default padding so it gets moved off screen instead.

Remove the padding:

div#sidebar1 ul {
  margin: 280px 0 0;
  padding: 0;
}

Then adjust the negative margin on that image and all browsers will be the same.

Finding and recognising bugs does take time but if you read the faq you will see most of the common ones mentioned there. In the end it's just practice and experience.

However as a start always remember that elements may have default padding and margins so you need to explicitly set them for the elements you use (apart from form elements which you may want to leave alone).

[luciano991]

Thanks very much. I'll read up in the faq on IE7 bugs and also the interesting looking article on the site about phasing out support for IE7. Thanks so much for your time.