Margin / Border / Padding issue

Posted on 2009-02-15
Last Modified: 2012-05-06

I am learning CSS and I have run into yet another problem. I W3C validated my page and validated the CSS but I have now managed to cause another issue by doing this.

I have a lot of hover areas, they seem to all have been shifted down slightly. If I try setting on of them to Top: 0px I can see a ~15px padding between it and the top edge of the picture. I have tried setting margin: 0px, padding: 0px, border: 0px everywhere I can think of.

The page works fine in my IE7, but it wont work in FF3.

You can see it for yourself here,

The aerial is the most obvious part, the a:hover zone should go up to the very top of the aerial but it starts 14 pixels below.

Any idea?
Question by:Fredde87
    LVL 1

    Author Comment

    Also I just noticed that for some reason all of the hover zones dont work in IE but in FF. They are generated in Perl though and should be identical, is there a limitation in IE to how many you can have?

    You can see it for yourself in IE if you rotate the car and try to highlight the FIAT badge.

    Any ideas why this is?
    LVL 29

    Accepted Solution

    It's the paragraph elements inside the definition elements that has a top margin.

    Add this to your css to remove the margin for the paragraph elements in the list:

    #Loading p { margin: 0; }
    LVL 1

    Author Comment

    Thanks, that fixed it =)

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now