Forums

BigBrotherBiggs

Probably not a surprise to many of you here. and I am sure I am not alone when it come to the frustrations caused by Microsoft's inability to make things straight forward...

I am working on a project where surprise surprise it works and looks right on all browsers except IE.

I want a three column effect.

here is the CSS I created to do so

#cpy .col3 {
	padding: 10px;
	height: 130px;
	width: 275px;
	display: inline-block;
	vertical-align: text-top;
}

and here is a snippet of the HTML

<div id=\"cpy\">
			<div class=\"col3\" id=\"lft\">
				<h1>Welcome</h1>
				<p>Column 1 text will go in here </p>
			</div>
			<div class=\"col3 mdl\" id=\"mid\">
				<h1>News &amp; Events</h1>
				<p>Column 2 text will go in here </p>
			</div>
			<div class=\"col3\" id=\"rgt\">
				<h1>FREE MONTHLY HOME GUIDE</h1>
				<p>New articles, do it yourself projects, and maintenance tips right in your email every month.</p>
				<form name=\"catemaillistform97758\" onsubmit=\"return checkWholeForm97758(this)\" method=\"post\" action=\"http://guybiggsconstruction.designedbyjeff.com/CampaignProcess.aspx?ListID=20295\">
				<div class=\"itemBox\">
				<label for=\"CLFullName\">Full Name</label><br />
				<input class=\"FormTextbox\" type=\"text\" name=\"FullName\" id=\"CLFullName\" maxlength=\"255\" size=\"15\" />
				</div>
				<div class=\"itemBox\"><label for=\"CLEmailAddress\">Email Address</label><br />
				<input class=\"FormTextbox\" type=\"text\" name=\"EmailAddress\" id=\"CLEmailAddress\" maxlength=\"255\" size=\"15\" />
				</div>
				<div class=\"NewsBttn\">
				<input class=\"bttn\" type=\"submit\" value=\"Subscribe\" id=\"catlistbutton\" />
				</div>
				<script type=\"text/javascript\" src=\"http://guybiggsconstruction.designedbyjeff.com/CatalystScripts/ValidationFunctions.js\"></script>
				<script type=\"text/javascript\">function checkWholeForm97758(theForm){var why = \"\";if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (why != \"\"){alert(why);return false;}theForm.submit();return false;}</script></form>
				
			</div>

You can see the results on my development server at http://guybiggsconstruction.designedbyjeff.com/

I have never worried about it before having the attitude that it is the poor bugger's using IE that have the problem but I guess it has just been my in ability to learn what needs to be done to cover my bases for all browsers... especially the ones most people use... FF, Safari and IE.

So any help would be greatly appreciated.

apostrophe

Just add float:left to your style for #cpy .col3

BigBrotherBiggs

niiiiiiice it work... something so simple. Any ideas as to why it works on other browsers without that?

Just curious... but once again you have been a great help.

treehouse : what would you like to learn today?

Forums

display: inline-block issues in IE