IE8 - How can I remove extra padding from an image?

Question

Hi,

See the (image) for a clearer understanding of what's happening to the header graphic.

I've added the interconnect solutions worldwide logo to the orange banner through a customized joomla module; I did this to make editing and updating easier. But this resulted in adding extra padding to the top in IE8 - it collapses and is fine in IE7 How do I remove this extra padding?

I’ve tried lots of different css but nothing seems to pin point the issue.

#header-bot .moduletableisw .isw  
{
    float: right;
    margin-top: 0px;!important'
    padding-top: 0px;!important'
}

I’ve managed to figure out most issues I’ve had with css, but this one’s got me. Hopefully there will be a simple solution?

Thanks, Jason

Answer 1

For starters your CSS is invalid, it should be:

#header-bot .moduletableisw .isw  
{
    float: right;
    margin-top: 0px !important;
    padding-top: 0px !important;
}

(You can remove the px when the size is zero.)

Also check for margin/padding on the parent element(s) such as .moduletableisw and also any spacing on sibling elements.

Posting your HTML would help.