8 replies [Last post]
grittyminder
Offline
newbie
Japan
Last seen: 12 years 40 weeks ago
Japan
Timezone: GMT+9
Joined: 2007-12-18
Posts: 8
Points: 0

I have a fairly standard contact page with form elements that have been CSS-ified (no tables!). The problem is that when I navigate to the page by clicking on a link to the page, the textarea element located at the bottom of the form does not appear in Internet Explorer (works in Firefox). However, when I refresh the page the textarea element shows up just fine. The problem seems to be isolated to the textarea element only (input elements and the like appear as normal). I've been searching around on this and can't seem to find an answer... It seems that there must be *somebody* who has experienced this problem before. Maybe I am wording my search queries wrong?

HTML

Contact



#container {
margin-left: -401px;
}











  • Home
  • Contact
  • FAQ





  • Header




    Questions?





    Contact us!









    *First Name:



    A '*' denotes a required field.


    Your personal information will not be disclosed to any 3rd party under any
    circumstances. All entered information is protected by our Privacy Policy.





    *Last Name:





    Address 1:


    Address 2:


    City:


    State/Province:


    Zip/Postal Code:



    Country/Region:
    Select...United StatesCanada




    * Email address:



    *
    Can we send questionaires, product samples, etc. to you?


    Yes
    No




    * Message subject or title:




    * Enter your message here:





     









    CSS

    body {
    margin: 0;
    padding-left: 50%;
    background: white url(images/bg800s.gif) center repeat-y;
    position: absolute;
    font: 0.875em Verdana, Arial, SunSans-Regular, Sans-Serif;
    word-spacing: -0.06em;
    }
    img {
    vertical-align: text-bottom;
    }
    a {
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: #636;
    }
    a:hover {
    text-decoration: underline;
    }
    fieldset {
    width: auto;
    padding: 10px 25px 30px;
    border: 1px solid #efefef;
    background: #fbfbfb;
    }
    legend {
    margin: 10px;
    border: 1px solid #781351;
    padding: 2px 6px;
    background: #FCC;
    }
    input, select, textarea, div.radio-short-req {
    padding: 0.15em;
    }
    input, div.radio-short-req {
    height: 1.3em;
    }
    input.text-short, input.text-short-req, div.radio-short-req {
    width: 8em;
    }
    input.text-med, input.text-med-req {
    width: 15em;
    }
    input.text-long, input.text-long-req {
    width: 23em;
    }
    input.text-med-req, input.text-long-req, textarea.mesg-req, div.radio-short-req {
    border: 1px solid #781351;
    color: #781351;
    background: #fee3ad;
    }
    input.text-med-req, input.text-long-req, div.radio-short-req {
    height: 1.4em;
    }
    input.submit {
    padding: 0;
    height: 2.1em;
    width: 6em;
    }
    select {
    height: 1.85em;
    width: 20em;
    }
    textarea.mesg-req {
    height: 15em;
    width: 25em;
    float: left;
    overflow: auto;
    }
    label.radio, input.radio {
    height: 1.3em;
    line-height: 1.3em;
    vertical-align: 50%;
    }
    label.form-label {
    width: 14em;
    margin-right: 3px;
    float: left;
    text-align: right;
    }
    div.wrapper-text, div.wrapper-submit, div.wrapper-textarea, div.wrapper-select, div.radio-short-req {
    float: left;
    }
    div.radio-short-req {
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    }
    div.form-item, div.form-item-big {
    padding-top: 3px;
    float: left;
    }
    div.form-item {
    width: 430px;
    }
    div.form-item-big {
    width: 580px;
    }
    div.spacer {
    height: 5px;
    width: 400px;
    float: left;
    }
    div.spacer-long {
    height: 1px;
    width: 700px;
    }
    .main-header {
    font-size: 1.500em;
    font-weight: bold;
    }
    .font-header1 {
    font-size: 1.5em; /* 24px; */
    letter-spacing: -0.06em; /* -1px; */
    word-spacing: -0.19em; /* -0.25em; */
    font-weight: bold;
    }
    .font-header2 {
    font-size: 1.250em; /* 18-20px; */
    letter-spacing: -0.05em; /* -1px; */
    word-spacing: -0.08em; /* -0.25em; */
    }
    .font-strong {
    /* font-style: italic; */
    }
    .font-japanesesite {
    padding: 0.31em 0.44em 0.31em 0;
    font: 0.750em verdana;
    font-weight: bold;
    float: right;
    clear: both;
    }
    .noborder {
    border: none;
    }
    #container {
    width: 800px;
    margin-left: -400px;
    background: #CF9;
    }
    #topbar {
    width: auto;
    height: 1.25em;
    color: #CCC;
    text-align: right;
    }
    #headerwrapper {
    width: auto;
    border: 2px solid #efefef;
    border-left: none;
    border-right: none;
    }
    #headerlogo {
    width: 800px;
    height: 120px;
    background-image: url(images/mochikichi-logo1ca.jpg);
    }
    #tabholder {
    width: auto;
    }
    #tabs8 {
    float: left;
    width: 100%;
    font-size: 93%;
    line-height: normal;
    }
    #tabs8 ul {
    margin: 0;
    padding: 10px 10px 0 0.44em;
    list-style: none;
    }
    #tabs8 li {
    display: inline;
    margin: 0;
    padding: 0;
    }
    #tabs8 a {
    float: left;
    background: url("images/tableft8c.gif") no-repeat left top;
    padding: 0 0 0 4px;
    text-decoration: none;
    }
    #tabs8 a span {
    float: left;
    display: block;
    background: url("images/tabright8c.gif") no-repeat right top;
    margin: 0 0.25em 0 0;
    padding: 0.44em 15px 4px 6px;
    color: #eee;
    font-weight: bold;
    }
    #tabs8 a span {
    float: none;
    }
    #tabs8 a:hover span {
    color: #591333;
    }
    #tabs8 a:hover {
    background-position: 0 -42px;
    }
    #tabs8 a:hover span {
    background-position: 100% -42px;
    color: #888;
    }
    #tabs8 #current a {
    background-position: 0 -42px;
    }
    #tabs8 #current a span {
    background-position: 100% -42px;
    color: black;
    }
    #searchbox {
    width: auto;
    padding: 0;
    clear: both;
    background: #FCC;
    }
    #mainbox {
    height: auto;
    width: auto;
    padding: 3px 5px 20px 0;
    background: #FCC;
    }
    #inner {
    height: auto;
    width: auto;
    padding: 10px 0px 5px 0;
    border: 1px solid #fbfbfb;
    text-align: justify;
    overflow: hidden;
    background: white;
    }
    #inner .body .hidden {
    display: none;
    }
    #main-image {
    width: 500px;
    height: 176px;
    padding: 14px 10px 10px 0;
    border: 1px solid #efefef;
    border-left: none;
    float: left;
    text-align: center;
    background-image: url(images/gourmet-senbei-assortment1b.jpg);
    }
    #column-right, #column-left, #column-center {
    width: 250px;
    }
    #column-right {
    margin: 0 5px 8px 0;
    float: right;
    }
    #column-center {
    margin: 0 0 8px 0;
    float: left;
    }
    #column-left {
    margin: 8px 8px 8px 5px;
    float: left;
    }
    .text-columns, .text-fieldset, .text-border {
    padding: 7px 7px 18px;
    border: 1px solid #efefef;
    display: block;
    background: #fbfbfb;
    }
    .text-columns {
    width: 236px;
    float: none;
    clear: both;
    }
    .text-border {
    height: 166px;
    min-height: 166px;
    width: 240px;
    margin-right: 7px;
    padding: 15px 10px 18px;
    text-align: center;
    float: right;
    }
    .text-fieldset {
    height: 180px;
    min-height: 182px;
    width: 240px;
    margin-right: 7px;
    border: none;
    padding: 15px 10px 18px;
    text-align: center;
    float: right;
    clear: right;
    }
    .text-fieldset-main {
    width: auto;
    margin: 0 0 10px 0px;
    padding: 5px 15px;
    border: none;
    background: #fbfbfb;
    float: right;
    }
    div.h3 {
    margin-top: 2.5em;
    }
    .image {
    width: 250px;
    height: 190px;
    margin: 8px 0 0;
    border: 1px solid #efefef;
    float: none;
    clear: both;
    display: block;
    }
    .image-caption {
    width: 250px;
    height: 2.25em;
    min-height: 2.25em;
    line-height: 2.25em;
    margin: 0 0 9px 0;
    border: 1px solid #efefef;
    border-top: none;
    font-size: 1em;
    text-align: center;
    vertical-align: middle;
    float: none;
    clear: both;
    display: block;
    background: #fbfbfb;
    }
    .notes {
    float: right;
    width: 220px;
    height: auto;
    padding: 15px;
    border: 1px solid #666666;
    background-color: #ffffe1;
    color: #666666;
    }
    .readmore {
    margin-left: 1em;
    text-align: right;
    width: auto;
    }
    .picbox {
    width: auto;
    line-height: 22px;
    color: #4C8616;
    padding: 5px 6px 6px;
    border: 1px solid #efefef;
    border-top: none;
    text-align: center;
    }
    .picbox .slide {
    width: 190px;
    filter: progid: DXImageTransform.Microsoft.Fade();
    border: 1px #DDD solid;
    vertical-align: middle;
    float: center;
    }
    .noteheader {
    width: auto;
    padding: 10px 3px;
    margin: 12px 10px;
    border-bottom: 1px solid #DDD;
    border-top: none;
    text-align: center;
    background: #e6e6e6 url(images/headerBGb.jpg) repeat-x;
    font: italic 0.750em verdana;
    }
    .required {
    color: red;
    }
    #footer {
    height: 4.5em;
    min-height: 4.5em;
    line-height: 4.5em;
    width: auto;
    color: #fff;
    background: #CCC;
    text-align: center;
    vertical-align: middle;
    }
    /* Float containers fix: http://www.csscreator.com/attributes/containedfloat.php */
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix{display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */

    ABCruz
    ABCruz's picture
    Offline
    Enthusiast
    Pilipinas
    Last seen: 6 years 25 weeks ago
    Pilipinas
    Timezone: GMT+8
    Joined: 2005-06-16
    Posts: 279
    Points: 0

    This must be another case

    This must be another case with the Peekaboo bug. Smile
    There must be sufficient space (greater than 5 pixels, I think) between floated elements and the clearing elements. Else, the floated elements tend to disappear for some reason. It's an IE bug.

    I am a Man of Truth.
    I am a Free Human Person.
    I am a Peacemaker.

    http://www.abcruz.com

    grittyminder
    Offline
    newbie
    Japan
    Last seen: 12 years 40 weeks ago
    Japan
    Timezone: GMT+9
    Joined: 2007-12-18
    Posts: 8
    Points: 0

    Thank you for the

    Thank you for the suggestion! I'm going to investigate this Peakaboo bug business Smile I'll report back what happens.

    One other weird thing I just discovered (and I don't know if this is a symptom of the Peakaboo bug or something else entirely), is that the dissappearing textarea element issue occurs *only* when the page is served from my webpage host over the Internet. When I request the same page, same code and everything, from my local test server (Ubuntu server Feisty ed., php5) the textarea element renders in the same ie browser with no problems(??!). Wow, can somebody explain why that is happening...?!?

    NOTE: when I check the HTML from the page served from my host, I can see that the relevant code for the texarea *does* exist. So, yeah, it's still is an ie problem.

    grittyminder
    Offline
    newbie
    Japan
    Last seen: 12 years 40 weeks ago
    Japan
    Timezone: GMT+9
    Joined: 2007-12-18
    Posts: 8
    Points: 0

    The Peekaboo bug sounded

    The Peekaboo bug sounded promising, but I am not entirely sure that it is the culprit in this case. I have quite a few floating elements, including floating elements within other floating elements, but none of these elements are clearing any other elements--they are all just merely floating.

    There is something fundamentally different about the way ie is rendering pages served up from my local server and the host server. I've checked over and over and can tell you that the local and remote code are exactly the same. I don't know if this is a red herring or what.

    Another thing I noticed, when I examine the location on the page where the textarea is supposed to be (I'm talking about the pages being served by the hosted server here) I can see that the textarea is being rendered to some degree. More specifically, it is an invisible square with the same dimensions as the 'real' textarea. I can 'select' the invisible textarea by double-clicking on it, or by clicking and dragging the mouse over it. When selected, the invisible textarea shows up as a big blue rectangle.

    What is going on...?

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 20 hours 52 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9772
    Points: 3854

    Can you post a link to the

    Can you post a link to the live page?

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    grittyminder
    Offline
    newbie
    Japan
    Last seen: 12 years 40 weeks ago
    Japan
    Timezone: GMT+9
    Joined: 2007-12-18
    Posts: 8
    Points: 0

    I thought it might come to

    Okay, I've discovered something. If I copy a section of form element code (e.g. the code for "Message subject") and paste it underneath the textarea (of course after changing the relevant class, etc. attributes), the textarea element shows up just fine. I have no idea why.

    However, the only problem is that the new form element now fails to show up. So it appears that whatever form element is located directly above the submit element will be invisible. I'm going to fiddle with this some more...

    Has anybody else seen this problem?

    grittyminder
    Offline
    newbie
    Japan
    Last seen: 12 years 40 weeks ago
    Japan
    Timezone: GMT+9
    Joined: 2007-12-18
    Posts: 8
    Points: 0

    Problem solved. What I did

    Problem solved. What I did is place a dummy 'spacer' div between the textarea div section and the submit div section. Why... did this work? I have no logical explanation. Anyways, thanks all for your support and your suggestions.

    ABCruz
    ABCruz's picture
    Offline
    Enthusiast
    Pilipinas
    Last seen: 6 years 25 weeks ago
    Pilipinas
    Timezone: GMT+8
    Joined: 2005-06-16
    Posts: 279
    Points: 0

    grittyminder wrote:When I

    grittyminder wrote:
    When I request the same page, same code and everything, from my local test server (Ubuntu server Feisty ed., php5) the textarea element renders in the same ie browser with no problems(??!). Wow, can somebody explain why that is happening...?!?

    I can't explain it but I can confirm the weirdness. Smile
    In my case, it has something to do with the fonts rendering somewhat differently.

    As to the original floating issue, I think something wrong also happens if the floating elements' total width does not equal the containing element's width. For example, when floating two divs of 390px each inside an 800px wide parent div, the element following the two divs forces itself to take up the 20px difference, even if it is cleared.

    Or I could just be imagining things.

    I am a Man of Truth.
    I am a Free Human Person.
    I am a Peacemaker.

    http://www.abcruz.com

    burlster
    burlster's picture
    Offline
    Leader
    Bournemouth
    Last seen: 3 years 4 weeks ago
    Bournemouth
    Timezone: GMT+1
    Joined: 2007-05-31
    Posts: 693
    Points: 45

    Hmmmm...

    I have a theory, albeit just off the top of my head. Problems like this that I've had in the past (primarily problems solved by a 'refresh') have been solved by the 'order' of code. For example putting one element after another can often resolve the issue.

    I guess in my head I've drawn the elements racing each other for the browsers attention as they get downloaded, but when refreshed, the browser of course knows what's going on so loads things a lot quicker and in the correct order. This would also explain why it loads things correctly from your local server.

    So yeah, that's what I would do, look at ensuring your code is read precisely as a browser might read it Smile

    Have YOU said Hello yet?
    The CSSCreator Hello Thread