Search code examples
htmlcssstylesheet

Inline element will not rest even with other inline images

When I make a jsfiddle to practice what I would like to do on the website it works fine. http://jsfiddle.net/texascapresident/27g6f8dw/

HTML

<div class="link-image-container">
    <a href="https://twitter.com"><img class="employee-contact-images" src="http://www.texasca.com/graphics/icons/twitter-link.png" /></a>
    <a href="https://www.linkedin.com/in/zacharygcook" target="_blank" ><img class="employee-contact-images" src="http://www.texasca.com/graphics/icons/linkedin-link.png" /></a>
    <form class="form-containing-email" action="contact-team-member.php" method="POST">
        <INPUT TYPE="hidden" NAME="teamMemberName" VALUE="Zach">
        <INPUT TYPE="hidden" NAME="teamMemberTitle" VALUE="CTO" >
        <input type="image" class="special-email-image" src="http://www.texasca.com/graphics/icons/email-link.png" >
    </form>
</div>

CSS

.form-containing-email {
    display: inline;
}

However, in practice on the website, one of the images (the one in the form) behaves strangely.

On the site it messes up

As you can see, the last image is kind of "popped up". I'm not sure what is going wrong.

The HTML & CSS on the website is slightly more complicated, feel free to check it out for yourself.

HTML of site: http://texasca.com/team.html

CSS of site: http://texasca.com/includes/team.css

Please help me out if you can! Thank you.

Solution

  • You need to give the form (<form class="form-containing-email" action="contact-team-member.php" method="POST">) in that section vertical-align:top.