Firefox adds unwanted space

HTML & CSS
1

I have this code

<h2>Tutti i modi per seguirci</h2>
<a href="http://localhost/sandboxdb/?page_id=4395"><img class="rightimg" src="http://localhost/sandboxdb/wp-content/uploads/information.png" width=15 height=15/></a>
<div class="clearer">
<a href="http://localhost/sandboxdb/?page_id=4395#emailSubscribe"><img alt="Mailing list FotoComeFare" height="45" src="http://localhost/sandboxdb/wp-content/uploads/emailicon50x50.png" width="45" /></a><a href="http://www.facebook.com/FotoComeFare"><img alt="FotoComeFare su Facebook" height="45" src="http://localhost/sandboxdb/wp-content/uploads/facebookicon50x50.png" width="45" class="auto-style1" /></a>
<a href="http://twitter.com/FotoComeFare"><img alt="FotoComeFare su Twitter" height="45" src="http://localhost/sandboxdb/wp-content/uploads/twittericon50x50.png" width="45" class="auto-style1" /></a>
<a href="http://www.youtube.com/fotocomefare"><img alt="FotoComeFare su YouTube" height="45" src="http://localhost/sandboxdb/wp-content/uploads/youtubeicon50x50.png" width="45" class="auto-style1" /></a>
</div>

It works correctly in Chrome and Explorer, but not in Firefox 13. Unwanted space is added after the div containing the image links.
You can see the result in the attachments. Screenshot 1 is what is shown by Chrome, Screenshot 2 shows Firefox.
Background, borders, shadow, rounded corners, top and left padding are specified using the theme I’m using in Wordpress (Headway), but nothing else.
I’ve also inspected the code in Chrome using the Developer tools and in Firefox using Firebug. In the latter, the extra space is not highlighted neither as padding nor as margin.

2

Hard to say without the relevant CSS, and more HTML (the containing round cornered box, at least). A link would be best but it looks like you’re working on a local server.

Though this is unlikely to be contributing to the problem, you have a possible error in the topmost img element. The width and height values are unquoted: width=15 height=15. If you’re working to HTML5 then it’s OK either way but is not consistent with the other img elements in your markup.

3

Yes, we really need to see this in context to have a hope of debugging it for you. A live link would make it easiest to help. There are various things in your CSS that could be causing that effect.

4

Thank you for the answers. I know it’s a problem I’m working on a local installation. Would it help if I share the html code of the page and the css?

I attach them to this post. I’m using the Headway theme and it compiles the css at runtime. So I copied and pasted it into a new file. You will find no reference to the style.css file in the html file.

5

The problem seems to be caused by this:


#block-20 {
    min-height: 100px;
}

It appears in your style sheet a few time (in 3 places) so make sure to remove all instances. Then perhaps use something like this instead:


#block-20 {
    padding-bottom: 10px;
}
6

Thank you, it did it. Why do you think Firefox is the only one rendering the code in this way?
Maybe it doesn’t include borders, paddings and margins in min-height while the others do?

7

I’m really not sure, to be honest, but is certainly does inclue borders, paddings and margins like the others. For some reason it calculates the space following the links differently.