[Last Call] Learn how to a build a cloud-first strategyRegister Now


Margin / Border / Padding issue

Posted on 2009-02-15
Medium Priority
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, http://www.giles-and-elsas-wedding.com/test.pl

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
  • 2

Author Comment

ID: 23645510
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

Göran Andersson earned 200 total points
ID: 23645529
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; }

Author Comment

ID: 23645817
Thanks, that fixed it =)

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month18 days, 14 hours left to enroll

834 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