Databases
StackOverflow2013
Postsdbo
POCSS Problem in Firefox with display:table-row
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Problem in Firefox with display:table-row
    primarykey
    data
    text
    <p>I'm having a problem with Firefox (tried with 3.6 and 4).</p> <p>I need to create a 2 column layout with a static size menu, and a dynamic size content-column (if there is a simpler way than the code below, I'd like to know).</p> <p>The easiest is probably that I paste the html and style (which is just a simple example of the "bug").</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;link type="text/css" href="style.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="padding:0 9%;"&gt; &lt;ol class="container row padd"&gt; &lt;li class="content cell padd"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id laoreet orci. Aenean congue pharetra enim, et sollicitudin est congue quis. Sed sit amet nibh ut nibh suscipit sagittis. Curabitur eros nisi, pulvinar id placerat blandit, vulputate id eros. Nullam tempor placerat ultrices. Sed ut dui ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor felis non felis commodo in volutpat sapien malesuada. Nunc congue bibendum leo, sed rutrum sem imperdiet vel. Cras gravida leo id odio scelerisque ut pharetra turpis sollicitudin. Morbi urna lorem, laoreet a lacinia ac, convallis sed urna. Morbi ut diam magna, a elementum erat. Nulla viverra molestie vestibulum. Ut nec ante in urna egestas tincidunt.&lt;/p&gt; &lt;p&gt;Nullam malesuada, urna ac pretium suscipit, purus est viverra nulla, semper placerat lacus urna in mauris. Integer egestas venenatis commodo. Mauris sagittis rutrum erat, quis tincidunt erat bibendum non. Etiam quis erat diam, at ullamcorper nisl. Suspendisse non convallis ante. Fusce eget augue nunc. Praesent pellentesque commodo est, nec vulputate dolor tincidunt vitae. Ut in pretium felis. Sed rutrum, nisi vel commodo accumsan, ante neque mattis neque, quis convallis magna metus molestie erat. Duis aliquet tempus neque ac vestibulum. Morbi nec lectus in lectus blandit blandit sit amet blandit justo. &lt;/p&gt; &lt;p&gt;Sed lorem ligula, rhoncus ac ornare vel, vulputate nec dui. Suspendisse id lectus in est aliquam tristique nec et augue. Morbi non quam id lorem sollicitudin gravida ut ut sem. Aenean nec nunc ac enim sodales laoreet sed quis neque. Maecenas auctor feugiat risus, eget porttitor lorem laoreet porttitor. Ut in ipsum non felis bibendum scelerisque convallis ac nibh. Vivamus nec viverra quam. Nam urna justo, eleifend eget semper ut, tristique non nisl. Duis posuere malesuada metus sed aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nulla tellus, condimentum vitae tincidunt gravida, tristique vel odio. Praesent sed nulla quam, fringilla convallis tellus. Suspendisse potenti. Morbi accumsan elementum placerat. Duis tellus nunc, lacinia non mattis et, varius a magna. Donec consequat viverra massa. Morbi sit amet metus lacus. Curabitur mattis lacinia eros, ac semper nisi dapibus nec. &lt;/p&gt; &lt;p&gt;Duis et diam sit amet metus aliquet cursus. Vivamus lobortis purus id ante accumsan tincidunt. Ut auctor sodales velit, imperdiet aliquet dui facilisis eu. Mauris porta pulvinar tortor ut mattis. Nullam congue sapien ut est luctus egestas. Curabitur eget neque augue. Donec a lacus sed purus consectetur euismod. Vivamus ut odio magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sagittis dui ac odio convallis vel iaculis nibh rutrum. Donec porttitor sapien vel ipsum lacinia ut tristique ante consequat. In sodales malesuada odio, vitae iaculis dui molestie quis. Mauris eu magna at eros viverra pretium. Fusce placerat dolor turpis, id imperdiet orci. Proin sed magna aliquet sem accumsan rutrum. Etiam id sagittis purus. &lt;/p&gt; &lt;/li&gt; &lt;li class="menu cell padd"&gt; &lt;div id="menu1" class="cell padd"&gt; Column 1 &lt;/div&gt; &lt;div id="menu2" class="cell padd"&gt; Column 2 &lt;/div&gt; &lt;!--&lt;ul&gt; &lt;li&gt;Punkt 1&lt;/li&gt; &lt;li&gt;Punkt 2&lt;/li&gt; &lt;li&gt;Punkt 3&lt;/li&gt; &lt;/ul&gt;--&gt; &lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the CSS:</p> <pre><code>.container { display:table-row; } .container .content { width:auto; background-color:#B0B0B0; display:table-cell;} .container .menu { background:none repeat scroll 0 0 #FFFFEC; display:table-cell; width:350px; } #menu1 { width:200px; float: left; margin-left: 5px; height:200px; } #menu2 { width:100px; float: left; margin-left: 5px; height:200px; } /* Misc */ .table { border: 1px solid #7777A0; } .row { border: 1px solid #777799; background-color: #A000A0; } .cell { border: 1px solid black; background-color: white; } .padd { margin:4px; } </code></pre> <p>The problem should be obvious when opened in Firefox, the menu column on the right pushes the text in the left column down for some reason.</p> <p>It looks correct in Opera. The example uses a list, but can be replaced by divs (makes no difference).</p> <p>Am I doing something illegal in the stylesheet to provoke this behavior?</p> <p>Ps. it also looks completely rubbish in IE8.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USthirtydot
    1. USDarkNeuron
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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