IE/Win a:hover problem – Jumping paragraphs

When working yesterday on new exciting project for one of our clients I encountered a very strange and annoying bug in IE/Win. The problem came out when we went over a link with a mouse. Paragraph which contained a link including a heading just above it jumped 20px above to the form and fieldset.

This is our code example.



<!-- CONTENT -->
<div id="content">

<div class="column left">

<h2>Search</h2>

<form action="words.php" method="post">
<fieldset style="margin-bottom:30px;">
	<input type="text" name="sl" class="text" /><br/>
	<label for="dialect"><input type="checkbox" name="dialect" value="1" class="checkbox" /> Search the dialects</label><br/>
	<input type="submit" name="search" value="Search" class="button" />
</fieldset>
</form>


<h2>Search by letters</h2>

<p>
	<a href="/words/a/" title="A">A</a>
	<a href="/words/b/" title="B">B</a>
	<a href="/words/c/" title="C">C</a>
</p>

</div>

<div class="column right">

<h2>Search result</h2>

<p>Nothing yet.</p>

</div>

</div>
<!-- /CONTENT -->


Please note: The code above was translated to English for better understanding. The original code and text was written in Croatian like in this picture showing the problem.

IE/Win a:hover problem

I googled a little to find if this problem was documented, and at first I had problems finding the solution. Then I discovered this article, which explained the problem.

The nature of this problem lies in IE inadequate standards support. The page was constructed with a container, a content and two columns inside it (one floated left, one right), and only the container and columns had width defined in pixels. I suppose that IE had problems with calculating the width of a paragraph, and because of that when mouse got over the link in paragraph, the paragraph jumped above to the form.

The solution was to define a width of paragraph to 100% in a separate CSS file which is read by Internet explorer on Windows. In IE box model if you apply padding or margin to the paragraph, you wouldn’t have problems of expanded DIV, because IE subtracts the paragraph for defined padding.

You can also define a CSS rules for IE/Win like in this example.


<!--[if lte IE 6]>
<style type="text/css">
	p { width:100%; }
</style>
<![endif]-->


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *