Databases
StackOverflow2013
Postsdbo
PODynamic element width and IE9 subpixel precision
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic element width and IE9 subpixel precision
    primarykey
    data
    text
    <p>I have 3 divs, #left, #center and #right that I want to position on the same line which has a specific width, say 300px.</p> <p>#left and #right have little content, say 50px each, and I am displaying them fully.</p> <p>#center has a lot of content, say 400px, and I want to display as much as possible within the remaining space on the line. For this, I have included the content of #center within #inner.</p> <p>I have floated #left and #center to left and #right to right.</p> <pre><code>&lt;div id="left"&gt; LEFT &lt;/div&gt; &lt;div id="center"&gt; &lt;div id="inner"&gt; LONG CONTENT ... &lt;/div&gt; &lt;/div&gt; &lt;div id="right"&gt; RIGHT &lt;/div&gt; </code></pre> <p><a href="http://jsfiddle.net/R7nJU/4/" rel="nofollow">Example fiddle</a></p> <p>Question 1: Is there a way of making the #center div take all of the available remaining space on the line through CSS (in our example, #center has to be 200px wide - the width of the line, 300px, minus the width of #left and #right, each 50px) ?</p> <p>Question 2: I did not find a solution through CSS and I have used jQuery to dynamically calculate the remaining available space. This works ok in all browsers except IE9.</p> <p>The problem with IE9 is that it has subpixel precision and jQuery returns only integer values for the dimensions of elements.</p> <p>Here's an example: IE9 sees #left as having 50.5px width while jQuery sees it as having 50px. This difference causes the layout to break in IE9.</p> <p>If I need to calculate the available space through JavaScript, what can I do to overcome this IE9 issue ?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjsgroove
    1. USjsgroove
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODynamic element width and IE9 subpixel precision
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODynamic element width and IE9 subpixel precision
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODynamic element width and IE9 subpixel precision
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm not sure if this will work, but could you just floor the value returned and make 50.5 go to 50? If the values are always more, then this will work. If it was say 49.5, then you will be a pixel short, but this atleast won't cause your content to not fit.
      singulars
      1. PODynamic element width and IE9 subpixel precision
      1. USM. Laing
    2. COThere is no way for me to affect the float value used the IE9 in it's layout. When I call the element width with jQuery in IE9, it always returns an integer, 50px. But in in't internal display, IE9 uses floats, 50.5px. I know this because I looked over the IE9 developer tools and for the element dimensions it displays float values.
      singulars
      1. PODynamic element width and IE9 subpixel precision
      1. USjsgroove
    3. COSo when you set the width to 50px, ie9 sets it to 50.5px? That is strange... I've lined things up like this before on a pixel level and never had trouble. Seems strange. Well good luck, sorry I wasn't able to help!
      singulars
      1. PODynamic element width and IE9 subpixel precision
      1. USM. Laing
 

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