Databases
StackOverflow2013
Postsdbo
POProblem with CSS's display: inline-block and IE7!
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem with CSS's display: inline-block and IE7!
    primarykey
    data
    text
    <p>I created this to simply explain my problem. It is of some list items being displayed as inline blocks. I had an original method that didn't work either, so I used this <a href="https://stackoverflow.com/questions/628407/hidden-features-of-css/1973313#1973313">CSS</a>.</p> <p><a href="http://jsbin.com/upexu/edit" rel="nofollow noreferrer">http://jsbin.com/upexu/edit</a></p> <p>This works great in FF and IE7, as a standalone. </p> <p>Unfortunately, in my implementation on my site, it doesn't display correctly in IE7 (they appear stacked one above the other).</p> <h2>Firefox</h2> <p><a href="http://www.alexanderdickson.com/hosted/stackoverflow.com/display-inline-ff.png" rel="nofollow noreferrer">firefox http://www.alexanderdickson.com/hosted/stackoverflow.com/display-inline-ff.png</a> </p> <h2>IE7</h2> <p><a href="http://www.alexanderdickson.com/hosted/stackoverflow.com/display-inline-ie7.png" rel="nofollow noreferrer">ie7 http://www.alexanderdickson.com/hosted/stackoverflow.com/display-inline-ie7.png</a></p> <p>Now can anyone tell me why they don't work in my example (see images above and look at site, it is in the far right (can't miss it).</p> <p>It seems to work in IE7 if I give the list items an explicit width - but this seems dangerous, as well as an extra piece of maintenance I don't want to do. I could probably do <code>li#nsw { width: 3.5em }</code> but is ugly and I <em>shouldn't</em> have to.</p> <p>I do use <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/" rel="nofollow noreferrer">Eric Meyer's CSS Reset Reloaded</a>.</p> <p>If you know of a solution, please tell!</p> <p>Thanks.</p> <h2>Update</h2> <p>Here is the HTML of the checkboxes</p> <pre><code>&lt;ul class="checkboxes"&gt; &lt;li&gt;&lt;input type="radio" id="free-case-review-nsw" value="nsw" name="state" /&gt;&lt;label for="free-case-review-nsw"&gt;&lt;acronym title="New South Wales"&gt;NSW&lt;/acronym&gt;&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;input type="radio" checked="checked" id="free-case-review-qld" value="qld" name="state" /&gt;&lt;label for="free-case-review-qld"&gt;&lt;acronym title="Queensland"&gt;QLD&lt;/acronym&gt;&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;input type="radio" id="free-case-review-nt" value="nt" name="state" /&gt;&lt;label for="free-case-review-nt"&gt;&lt;acronym title="Northern Territory"&gt;NT&lt;/acronym&gt;&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;input type="radio" id="free-case-review-other" value="other" name="state" /&gt;&lt;label for="free-case-review-other"&gt;Other&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>And here is the CSS</p> <pre><code> #free-case-review-form .checkboxes { border: 1px solid #000; padding: 5px 0; margin-bottom: 8px; overflow: hidden; } #free-case-review-form .checkboxes li { display: inline-block; display: -moz-inline-box; *display: inline; /* for ie */ zoom: 1; overflow: hidden; } #free-case-review-form .checkboxes li input { display: inline; width: auto; border: none; margin-bottom: 0; padding: 0; float: left; } #free-case-review-form .checkboxes li label { display: inline; /* just an attempt - they should be block level anyway */ float: right; } </code></pre> <p>Though I do recommend looking at the site above, as a lot more CSS is inherited, especially by using the style reset.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USalex
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POProblem with CSS's display: inline-block and IE7!
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POProblem with CSS's display: inline-block and IE7!
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POProblem with CSS's display: inline-block and IE7!
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou should post the actual html + css. It's hard to get the html from the site because the html is built
      singulars
      1. POProblem with CSS's display: inline-block and IE7!
      1. USsantosc
    2. COThat header is really evil! Specially because as it isn't done in flash Flashblock didn't block it :P I wan't my webpages as my car trips: unsurprising and with little unexpected movements/distractions.
      singulars
      1. POProblem with CSS's display: inline-block and IE7!
      1. USEsteban Küber
    3. COYou can use FireBug to view the HTML from the form. I'll post an excerpt anyway,
      singulars
      1. POProblem with CSS's display: inline-block and IE7!
      1. USalex
 

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