arvindandrion.com » Browser http://www.arvindandrion.com Hi! My name is Arvind Andrion web designer from Philippines Thu, 18 Aug 2011 05:15:17 +0000 en hourly 1 Fieldset and Legend in IE http://www.arvindandrion.com/css/fieldset-and-legend-in-ie/ http://www.arvindandrion.com/css/fieldset-and-legend-in-ie/#comments Thu, 26 Nov 2009 10:48:31 +0000 Arvind http://www.arvindandrion.com/?p=479 While I was very happy and I am about to finish my form layout testing in firefox, chrome and safari, I crossed my fingers and took a quick look to check at IE and suddenly BOOOOMMMM! What the hell happened? Of course it looks like a storm had past by on the site I’m working on. I was like “darn this browser!?!”. I came a cross tyssendesign.com.au Layer of Style and it helped me a lot.

Check out this simple HTML and CSS.

<div class="box one">
 <fieldset>
  <legend><span>This is the legend</span></legend>
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" />
  <label for="phone">Phone:</label>
  <input id="phone" name="phone" type="text" />
  <label for="email">Email:</label>
  <input id="email" name="email" type="text" />
  <button>Submit</button>
 </fieldset></div>
fieldset { border: none; }
 
.box{
width: 30em;
position: relative;
padding: 2.5em 1em 0.5em 1em;
border: 1px solid #000;
background: #F8F8F8;
font-size: 90%;
}
 
label { display: block; }
 
input {
width: 50%;
padding: 2px;
margin-bottom: 0.5em;
border: 1px solid #00;
}
 
button { display: block; }
 
legend span {
position: absolute;
width: 29em;
top: 0.5em; left: 1em;
color: #000;
font-weight: bold;
}

]]> http://www.arvindandrion.com/css/fieldset-and-legend-in-ie/feed/ 0