I'm having trouble trying to select a <textarea>

Question

HI,

Any ideas why I can't highlight the text in the "blurbedit" or "headlineblack" divs?

I think I did a bit of sloppy coding to get the footer divs to line up horizontally, but that then meant that the top divs can't be selected, which isn't great when one of them is an input field!

check out this example to see what I mean: www.gherkin.co.nz/ff/textarea.html

You can select the text of the three divs at the bottom, but not the ones at the top.

I'm sure it's a very obvious thing but I'm having a hard time trying to spot it...

    <div class="container">
    <div class="headlinered">Homepage Blurb:</div>
    <div class="home_headline_edit">


    <form method="post">
    <input type="hidden" name="id" value="
    1">
    <textarea name="blurb" cols="40" rows="10" class="box" id="blurbedit">

blurb edit content
    </textarea>
    <input name="update1" type="submit" class="box" id="editbutton" value="Update Article"></form>
    </div>
    <div class="header2cms">

    <p class="headlineblack">

    headline content
    </p>
    </div>
    </div>

    </div>

    <div class="container">
    <div class="headlinered">Footer:</div>

    <div style="height:300px;">
      <div class="footer">
        <p class="bodyblack">
       footer content

    </p>
      </div>


    <div>


    <form method="post">
    <input type="hidden" name="id" value="
    1">
    <textarea name="footer" cols="30" rows="10" class="box" id="footeredit">
footer edit content
    </textarea><br />
    <input name="update2" type="submit" class="box" id="footerbutton" value="Update Article"></form>
    </div>

    <div class="footerhelp">
    (footer help)

    </div>
    </div>

    </div>

and here is the css:

.footerhelp{
    width: 300px;
    position: relative;
    left: 475px;
    margin-top:60px;
    top: -270px;
    overflow: hidden;

}
.footer {
    width: 170px;
    padding-top: 20px;
    position:absolute;
}
#blurbedit{
    font-family: Helvetica, Arial, sans-serif;
    font-size:0.8em;
    border: none;
    background:#CCC;
    color:#666;
    padding:10px;
}
#footeredit{
    font-family: Helvetica, Arial, sans-serif;
    font-size:0.8em;
    border: none;
    background:#CCC;
    color:#666;
    padding:10px;
    margin-top:20px;
    margin-left:20px;
    position: relative;
    left: 190px;
    top: 0px;
}
.headlinered {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 140%;
    color: #991200;
    margin-top: 0px;
}
.headlineblack {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 140%;
    margin-top: 5px;
    margin-bottom: 0px;
    width:455px;
}
.home_headline_edit{
    float:left;
    width: 360px;
    margin-right:20px;
}
.container {
    width: 835px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.header2cms {
    width: 455px;
    padding-left: 0px;
    padding-bottom: 40px;
    float: left;
    margin-left: -50px;
}
.bodyblack {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .7em;
    line-height: 140%;
    color: #000000;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
}

Answer 1

Would you believe that it's a combination of the float: left and position: relative settings of your .home_headline_edit and .container rules that is causing this issue?

Removing the position: relative rule seems to work while retaining the visual style of the page.

Smells like a browser bug...but I can't seem to reproduce it with a trimmed down page.