I'm trying to get a form layout working for a tableless site.
I have it set up like the following:
<p class="frow"> <span class="label"><label for="email">E-MAIL ADDRESS:</label></span> <input type="text" name="email" id="email" value="" style="width: 135px" class="input" /> </p>
with the following CSS
.frow { clear: both; padding: 2px 0; margin: 0; } .label { font: bold 10px/1.6 arial, helvetica, verdana, sans-serif; } .frow .label { float: left; display: block; width: 130px; text-align: right; margin-right: 2px; }
The problem I'm running in to is that in IE 5.2.3 on mac OS X the text input boxes randomly appear and disappear.
Any ideas on how to fix this or suggestions on a better way to set this up?
thanks
Tableless form layout not working in IE mac
Hi d3signmonk3y,
Try setting the margin of frow to 1px;
Hope that helps
Tableless form layout not working in IE mac
That didn't seem to take care of the problem.
I forgot to mention in the first post that the site is a centered layout which seems to be the source of the problem.
The form lives inside a structure like the following:
<div id="contentrow"> <div id="mainblock2"> <div id="content2"> <div class="contentpad"> </div> </div> </div> </div>
#contentrow { position: relative; text-align: center; padding-top: 116px; background-color: #F6F0DB; color: #000; } #mainblock2 { position: relative; text-align: left; margin-left: auto; margin-right: auto; padding: 0; border-left: 1px solid #600; background: transparent url("/images/bg-mainblock2.gif") repeat-y top right; } width: 779px !important; width /* */: 780px; /* False value for IE4-5.x/Win. */ } #content2 { position: relative; float: left; padding: 0; background: #F6F0DB; width: 604px; } .contentpad { padding: 20px 34px; }
I'm finding IE mac to be more and more flaky the more I get into this site design. I just discovered that my image replacement is failing in IE mac because the overflow: hidden; attribute is ignored if the item has position: absolute.
I appreciate any feedback on these issues.