Oddity with Chrome and Dialogs...Bug?
So I have a PHP script that creates a variable number of divs for my
product's accessories. It creates 3 of these divs per line, then
breaks and moves to the next line. The page displays a link (that
opens the dialog) and a short description. Each div also contains a
table that has the info for the accessories, which is hidden and is
the content of the dialog window. The resulting HTML looks like this:
<div style="padding: 3px; width: 32%; float: left;">
<a id="5" class="acc-info" name="5" href="#">Accessory Name</a>
<br/>
Overview goes here
<div id="acc-5" class="acc-dialog" style="display: none;"
title="Accessory Info">
<table class="accessory">
<tbody>
<tr>
<td style="text-align: center;" rowspan="2">
<strong>Accessory Name</strong>
</td>
<td style="width: 125px;" rowspan="2">
<img width="125px" src="img.gif"/>
</td>
</tr>
<tr> </tr>
<tr>
<td colspan="2">
<strong>Overview:</strong>
<br/>
Overview goes here too
</td>
</tr>
<tr>
<td colspan="2">
<strong>Description:</strong>
<br/>
Descriptive text goes here
</td>
</tr>
</tbody>
</table>
</div>
<br/>
</div>
When you click on these link in any browser other than Chrome,
everything is just fine. However when using Chrome, the dialog
displays properly, but the other divs around the one you click on
move. Its almost like the table is displaying (even though the space
created is blank) in the DOM and in the pop-up dialog. If you click a
link that is after the one that broke the DOM, then the DOM breaks
after that one but the previous one returns to normal.
Hope this is making sense... I'll try to get some screen shots later,
though I don't know how to attach them here.