BubblesSOC

i have to type this entry in lowercase because my keyboard is acting up again

in my quest to convert my site to pure css, i’ve been working a lot with styled fieldsets using a great tutorial found here. i stumbled upon a bug that’s been bothering me for days. the textarea and submit button inside of my fieldsets keep getting shoved over in ie, causing the entire layout to collapse. the other form elements, however, are not affected.

here’s what it’s supposed to look like (firefox)
here’s what it looks like in ie

after tweaking the stylesheet a bit, i discovered that the textarea/button nested inside the fieldset was inheriting all other specified left-margins in ie. here’s an example of what i mean:

the code:

<div class="cont1">
     .cont1
     <div class="cont2">
          .cont2
          <fieldset>
               <textarea cols="10" rows="5"></textarea><br />
               <input type="button" value="Button" />
          </fieldset>
     </div>
</div>

the css:

.cont1 {
     background: blue;
     margin: 0 0 0 10px;
     padding: 5px;
}
.cont2 {
     background: yellow;
     margin: 0 0 0 15px;
     padding: 5px;
}
fieldset {
     margin: 0;
     padding: 0;
}
fieldset textarea {
     margin: 0;
     padding: 0;
}

the textarea and input button are shoved to the right by 25 pixels (the left margin of cont1 + the left margin of cont2). i haven’t had time to do thorough research, but as far as i know, there is no workaround for this bug. i did find someone else who had the same problem, however. someone suggested in the comments to enclose the elements in an arbitrary div, and that seemed to work for me.

new code (same stylesheet):

<div class="cont1">
     .cont1
     <div class="cont2">
          .cont2
          <fieldset>
               <div class="arbitrary">
                    <textarea cols="10" rows="5"></textarea><br />
                    <input type="button" value="Button" />
               </div>
          </fieldset>
     </div>
</div>

the arbitrary div idea is fine for now, but i’d like to find another way to remedy this bug. has anyone else had this problem? if so, how did you fix it?

this is the last week of the semester! hopefully i’ll be back to blogging regularly by next week