StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs Chrome (webkit?) rendering inline-block incorrectly? How can I align this layout?
text
Body
copied!<p>I have a layout that consists on an input type="text" followed (on another line) by an a (link) containing an img. I cannot change this, because it's generated by another application, but I can style the elements.</p> <p><strong>EDIT:</strong> Some pseudohtml for those who cannot read prose and also with a few extra details:</p> <pre><code><td class="a"> <input type="text" class="b"> <a class="c"> <img> </a> <div></div> </td> </code></pre> <p>What happened: If I tried to use inline blocks, and in the absence of margins, padding or positioning, all non-webkit browsers offset the top of the image equally above the input, allowing me to fix the vertical alignment using relative positioning. Chrome on the other hand rendered exactly as if I'd used display: inline instead of inline-block, putting the image below the input.</p> <p><strong>END OF EDIT</strong></p> <p>What I need to do is align the text input and the image perfectly, side by side (horizontally). Floating to the left is not an option because it breaks the elements that come next, over which I have no control either.</p> <p>When trying to use inline-block, which is the obvious solution for this issue, I was able to get it working perfectly on the latest releases of Firefox 8 and IE 9. However, using the exact same styles, Chrome renders as inline instead of inline-block, which ruins everything.</p> <p>Is this a known issue? Does anyone know of a way to align this arrangement? I believe I need to be IE7 friendly, so using table cell displays is also out of the question, by the way.</p> <p><strong>EDIT:</strong></p> <p>Thanks for the comments, using some convoluted selector combinations I managed to pick the div element after the a > img and add clear: both. This allowed me to get rid of the inline-block display in favor of floating to the left, only to find out that it's still broken in chrome (while working perfectly in the other browsers), this time because chrome apparently doesn't allow empty/hidden containers to affect layout, in clear violation of the standard.</p> <p>I'll never understand why there are developers who like chrome, anyone working on styling complex automatically generated layouts must run into standards issues on a daily basis. I know I do.</p> <p><strong>TO SUMMARIZE</strong> the attempts to fix vertical alignment of text input and img with the same height:</p> <p>First attempt: In my specific situation (may have been caused by the nested containers inside which this was, but it's definitely a Chrome or Webkit bug) inline-block was rendered as inline.</p> <p>Second attempt: Using blocks and floating things to the left caused the block after this to be rendered on the same line as this arrangement. Selecting that block was possible, but even though clear: both put it below the arrangement where it belonged, once again a Chrome or Webkit bug stopped this from working by not resizing the main container (overflow: hidden) to contain all of the block's size, including margins (works on other browsers).</p> <p>Third attempt: Using min-height: on the container in order to simulate the offset in height that should have been caused by the margin of the inner block even when hidden. Chrome/Webkit simply ignored this.</p> <p><strong>Final solution</strong> used (crutch): Set fixed absolute height: on the main container.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload