Databases
StackOverflow2013
Postsdbo
POSimple CSS formatting issue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple CSS formatting issue
    primarykey
    data
    text
    <p>I've created a simple page for processing three forms via jquery/ajax. Everything functions properly, but somehow I can't seem to debug this simple CSS issue. I have a parent DIV, with three DIVs inside it, each one containing a form and the relevant success message when a form is submitted. If someone could take a look at it I would really appreciate it. You can find it here (<a href="http://thenally.com/work/form-test" rel="nofollow">LINK</a>). The style sheet can be seen through the source and is really simple. I've included the gist of the page architecture below and the bit of CSS I've written.</p> <p><strong>HTML</strong></p> <pre><code>&lt;div id="wrap"&gt; &lt;div class="form-container"&gt; &lt;form&gt;&lt;/form&gt; &lt;div class="success"&gt; &lt;p&gt;Form Success!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-container"&gt; &lt;form&gt;&lt;/form&gt; &lt;div class="success"&gt; &lt;p&gt;Form Success!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-container"&gt; &lt;form&gt;&lt;/form&gt; &lt;div class="success"&gt; &lt;p&gt;Form Success!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>#wrap{ width:900px; height:450px; margin:25px; padding:0; } div.form-container { background:#9c9; width:300px; height:100%; float:left; position:relative; padding:0; } div.success{ background:#ffa07a; padding:0; margin:0; width:100%; height:100%; } form { background:#999; float:left; position:relative; padding:10px; } </code></pre> <p>You'll notice that the second and third form containers have 19px margins at the top, however this isn't reflected anywhere in the CSS. I've been trying to debug this for hours to no avail. I'm almost embarrassed to ask for help, as I know it must be something simple. I've moved virtually every element around to find the issue, but nothing changes it! I can get it working using negative margins to pull the two containers up, but I don't think I should need that kind of fix.</p> <p>Thanks for taking a look,</p> <p>Mike</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USTheNally
    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
    1. VO
      singulars
      1. POSimple CSS formatting issue
      1. This table or related slice is empty.
      1. VTUpMod
    1. COyou should avoid having the same unique identifier (`id`'s) in several elements... use a `class` for that, witch will make your example work as `div.success` means a `div` element with a `success` class, like: `<div class="success">`
      singulars
      1. POSimple CSS formatting issue
      1. USbalexandre
 

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