Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the <a href="http://jasongaylord.com/Media/Default/WindowsLiveWriter/ReviewNewDeveloperToolsinInternetExplore_13F97/image_6.png">layout</a>. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".</p> <p>I can't tell you <em>why</em> this happens. But if you really want to fix these you might want to use these quick fixes.</p> <p><hr /></p> <h2>Use margin</h2> <p>Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.</p> <pre><code>span { margin-left: 10%; } </code></pre> <p>and ofcourse reset the padding of the sides:</p> <pre><code>div.table-cell { display: table-cell; padding: 20px 0; } </code></pre> <p>This "solution" is not as dynamic as with percentage padding on the table-cell itself.</p> <p><strong>Why not?</strong><br /> It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use <code>left-margin: 5%;</code>. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(<code>table width / table cell</code>). </p> <p>So to fix that i did 5 times the amount of cells (<code>5 * 2</code> in this case), which would result in the right percentage.</p> <p>However this is not dynamic when you want to add more cells.</p> <h1><a href="http://jsfiddle.net/xx4Z4/2/">jsFiddle</a><br /></h1> <p><hr /></p> <h2>Use border</h2> <p><em>Use border which its position is "reserved" before the padding is resetted.</em></p> <p><strong>Reserved border</strong><br /></p> <pre><code>span { border-bottom: 1px solid transparent; } </code></pre> <p><strong>Change property that doesn't need re-calculation of position; color</strong> <br /></p> <pre><code>div.table-cell-bug:hover span { border-bottom-color: black; } </code></pre> <p>Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.</p> <h1><a href="http://jsfiddle.net/xx4Z4/3/">jsFiddle</a></h1> <hr /> <p>I hope one of these quick fixes work for you.</p> <p>I see you sended a <a href="https://connect.microsoft.com/IE/feedback/details/809874/ie-11-table-cell-padding-collapses-on-hover">bug report to MS</a>. Keep us up-to-date when you get a reply, i would appreciate it :)</p>
    singulars
    1. This table or related slice is empty.
    1. POHow can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USChris Bloom
    1. USnkmol
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COExcellent answer! I would upvote this 10 times if I could. Thank you :)
      singulars
      1. PO
      1. USMichael
    2. COGlad i could help. And thanks for your question, was very interesting :)
      singulars
      1. PO
      1. USnkmol
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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