2 replies [Last post]
d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 16 years 19 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Tableless form layout not working in IE mac

Hi d3signmonk3y,
Try setting the margin of frow to 1px;

Hope that helps

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 16 years 19 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

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.