SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    floating a text area.

    I had a long night, and am a bit tired. this could be a simple mistake, but I just cant seem to find it anywhere.

    first of all this code works fine in Safari ( on a mac); FF however, seems to drop the TEXTAREA below its label, as if something were clearing it. There doesnt seem to be any clears and the size of the TEXTAREA is small enoughthat it shoudlnt need to drop down as it does in FF.

    Any suggestions would be appreciated..

    CSS:
    body * {margin:0; padding: 0; }
    fieldset{border:none}
    form { width:30em; background: silver; border-left:12em pink solid; font-size: 15px}
    #main, #sidebar, #sb2{padding:1em}
    #main p{margin-bottom:.5em}
    #main {float: right; width:28em; outline:1px solid #000}
    #main p label { display:block; width:6em; float:left ;margin-right: 1em; text-align: right }
    #main p textarea, #main p #headline{width:27em}
    #sidebar, #sb2{ width:10em;}
    #sidebar, #sb2{float: left; margin-left:-12em;clear: left}
    .clear{ display: block; clear: both}
    #main .sns {padding-left:7em; margin-top:-.25em; margin-bottom: 2em}
    #main p.submit{text-align: right; padding-right:1.5em;}


    MARKUP:

    <p><label>Headline</label> <input id="headline"></p>
    <p><label>for text area</label> <textarea name="target" rows="20" id="target" ></textarea></p>
    <p id="styling" class="sns"><span><noscript>Styles are currently unavailable! Please, turn on Javascript.<br></noscript></span>
    <a href="#" onclick="void(applyTag('b', 'target'))">b</a> | <a href="#" onclick="void(applyTag('i', 'target'))">i</a> | <a href="#" onclick="void(applyTag('u', 'target'))">u</a> | <a href="#" onclick="void(applyTag('h', 'target'))">h</a> | <a href="#" onclick="void(applyTag('a', 'target'))">a</a> | <a href="#" onclick="void(applyTag('img', 'target'))">img</a>
    </p>
    <p class="sns2 submit"><input type="reset"> <input type="button" value="cancel"> <input type="submit" name="submitButtonName"></p>
    </fieldset>
    <fieldset id="sb2">
    <p>THE SECOND SIDEBARthis is for the second sidebar stuff. it should continue right bellow the main sidebar</p>
    </fieldset>
    <span class="clear"></span>
    </form>

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
     label {
        display:block;
    }

    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I had a long night, and am a bit tired. this could be a simple mistake, but I just cant seem to find it anywhere.

    first of all this code works fine in Safari ( on a mac); FF however, seems to drop the TEXTAREA below its label, as if something were clearing it. There doesnt seem to be any clears and the size of the TEXTAREA is small enoughthat it shoudlnt need to drop down as it does in FF.

    Any suggestions would be appreciated..

    CSS:
    body * {margin:0; padding: 0; }
    fieldset{border:none}
    form { width:30em; background: silver; border-left:12em pink solid; font-size: 15px}
    #main, #sidebar, #sb2{padding:1em}
    #main p{margin-bottom:.5em}
    #main {float: right; width:28em; outline:1px solid #000}
    #main p label { display:block; width:6em; float:left ;margin-right: 1em; text-align: right }
    #main p textarea, #main p #headline{width:27em}
    #sidebar, #sb2{ width:10em;}
    #sidebar, #sb2{float: left; margin-left:-12em;clear: left}
    .clear{ display: block; clear: both}
    #main .sns {padding-left:7em; margin-top:-.25em; margin-bottom: 2em}
    #main p.submit{text-align: right; padding-right:1.5em;}


    MARKUP:

    <p><label>Headline</label> <input id="headline"></p>
    <p><label>for text area</label> <textarea name="target" rows="20" id="target" ></textarea></p>
    <p id="styling" class="sns"><span><noscript>Styles are currently unavailable! Please, turn on Javascript.<br></noscript></span>
    <a href="#" onclick="void(applyTag('b', 'target'))">b</a> | <a href="#" onclick="void(applyTag('i', 'target'))">i</a> | <a href="#" onclick="void(applyTag('u', 'target'))">u</a> | <a href="#" onclick="void(applyTag('h', 'target'))">h</a> | <a href="#" onclick="void(applyTag('a', 'target'))">a</a> | <a href="#" onclick="void(applyTag('img', 'target'))">img</a>
    </p>
    <p class="sns2 submit"><input type="reset"> <input type="button" value="cancel"> <input type="submit" name="submitButtonName"></p>
    </fieldset>
    <fieldset id="sb2">
    <p>THE SECOND SIDEBARthis is for the second sidebar stuff. it should continue right bellow the main sidebar</p>
    </fieldset>
    <span class="clear"></span>
    </form>
    So, am I man. lol I've been up since yesturday working on a project for a client. It sucks!
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    thanks... i havent stayed up all night since college. it's STILL no fun.

    i thought i had the labels set as block...already

    #main p label { display:block; width:6em; float:left ;margin-right: 1em; text-align: right }

    and the mark up copied wrong

    it's been that kind of day


    its supposed to be this :

    <form id="FormName" action="" method="get" name="FormName">
    <fieldset id="sidebar">
    <p> this is for the sidebar stuff</p>
    <p> this is for the sidebar stuff</p>
    <p> this is for the sidebar stuff</p>
    <p> this is for the sidebar stuff</p>
    </fieldset>
    <fieldset id="main">
    <p><label>Headline</label> <input id="headline"></p>
    <p><label>for text area</label> <textarea name="target" rows="20" id="target" ></textarea></p>
    <p id="styling" class="sns"><span><noscript>Styles are currently unavailable! Please, turn on Javascript.<br></noscript></span>
    <a href="#" onclick="void(applyTag('b', 'target'))">b</a> | <a href="#" onclick="void(applyTag('i', 'target'))">i</a> | <a href="#" onclick="void(applyTag('u', 'target'))">u</a> | <a href="#" onclick="void(applyTag('h', 'target'))">h</a> | <a href="#" onclick="void(applyTag('a', 'target'))">a</a> | <a href="#" onclick="void(applyTag('img', 'target'))">img</a>
    </p>
    <p class="sns2 submit"><input type="reset"> <input type="button" value="cancel"> <input type="submit" name="submitButtonName"></p>
    </fieldset>
    <fieldset id="sb2">
    <p>THE SECOND SIDEBARthis is for the second sidebar stuff. it should continue right bellow the main sidebar</p>
    </fieldset>
    <span class="clear"></span>
    </form>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Try floating the textarea as well
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •