26th
Nov
Fieldset and Legend in IE
Css | No Comments | Tags: Browser, Css, html
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; }