IE8 and Firefox issue

HTML & CSS
1

Hey,

Just a little issue, i am having a formatting issue on this page in IE8 and firefox:

http://kidsunlimited.co.uk/nursery.aspx?ID=42

If you look at the page in IE7 it looks fine. The problem is with the speech bubbles on the right, the top and bottom appear to far apart.

How can i make it work in all browsers?

Thanks again.

2

Have you fixed this as IE7 looks much the same as IE8 and FF if I’m not mistaken:)

3

haha, sorry i was messing around with, i had to put a minus value on the top gray box, however i’m sure there is a better way of doing this?

Can you see a more appropriate way to do this, ecause i have put a minus value on the top gray box, the text look too far at the top in IE7 :slight_smile:

Thanks

4

It’s the margin-bottom on the h5 that causes the gap. Do something like this:


.speech-quotes-top {
    width:269px;
    background:url(http://kidsunlimited.co.uk/images/top_box.png);
   [B] padding-left:15px;
    padding-right: 20px;
   [/B][B] height: 21px;
    margin-left:-2px;[/B]
}
[B].speech-quotes h5{margin:0;padding:0 0 8px}[/B]