Cross Browser CSS Input Form Layout Problem

[nevets2001uk]

Thanks to the help of some members of this site I've started to get my head around coding with a DOCTYPE for cross browser compliance of my website.

I'm now stuck trying to get a fairly simple input form to work styled using CSS. I attached the code below. In IE it's displaying properly with all of the input fields within the containing DIV, formatted correctly. In firefox however most of the formatting is correct except the final input box is not the right size and drops over the top of the grey containing div. The pushes the next paragraph to the right of the page.

I did wonder if it was to do with having the height element in the 'row' div but if I take it out it works in neither.

Is this something silly I'm doing?

HTML

<div class="form">	
							<div class="row">
								<span class="label">Name:</span>
								<span class="formw"><asp:TextBox ID="txtName" CssClass="textbox" Runat="server" /></span></div>
							<div class="row">
								<span class="label">Email:</span>
								<span class="formw"><asp:TextBox ID="txtEmail" CssClass="textbox" Runat="server" /></span>
							</div>
							<div class="row">
								<span class="label">Subject:</span>
								<span class="formw"><asp:TextBox ID="txtSubject" CssClass="textbox" Runat="server" /></span>
							</div>
							<div class="row">
								<span class="label">Message:</span>
								<span class="formw"><asp:TextBox ID="txtContent" Font-Name="Arial" TextMode="MultiLine" Height="150px" Width="500px"
									CssClass="textbox" Runat="server" /></span>
							</div>
						</div>
<p>Test</p>

CSS

/* CSS FOR FORMS LAYOUT */

div.form {
	
	background : #DEDEDE;
	border: 1px dotted #333; 
	padding: 10px;
	margin-bottom : 15px;
	}
		
div.row {
  clear: both;
  height : 25px;
  /*padding-top: 10px;*/
  }

div.row span.label {
  	float: left;
  	width: 100px;
  	text-align: left;
  	font-weight : bold;
 	}

div.row span.formw {
  float: left;
  width: 550px;
  text-align: left;
  }
 
.textbox {
	width : 180px; 
	border : 1px solid #878787;
	}

Steve G (MCP)

 

[ChrisHunt]

First, you'll save yourself (and us) some brainache by realising that browsers work by applying CSS to HTML, not to asp. When you write [tt]<asp:TextBox ...>[/tt] in your code, the server will convert that into an HTML element (presumably an <input>) before sending it to the browser. So when figuring out your CSS, debugging it, and/or sending questions here it's better to do a "View Source" on the page in question to see the actual HTML the browser's working with, rather than making assumptions on what the asp will do.

Now, your problem is that you've defined div.row as having a height of 25px, and put someting into one that's 150px high. Unlike IE, FF won't expand elements to accommodate oversize contents, especially if they're floated (you might want to look at

http://www.positioniseverything.net/easyclearing.html

for a technique of containing floated elements).

Frankly, I don't see what div.row is there for, and the whole thing looks over-complex. Take a look at

http://www.themaninblue.com/writing/perspective/2004/03/24/

for a suggested approach to laying forms. If nothing else, you should use the <label> element in preference to <span class="label">.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[nevets2001uk]

Thanks for the links Chris. I'm going to take a look at the second one and try re-laying out my form using some of the advice there. Better at this stage than later!

As for the first link I'm afraid I could get my head around it. I have actually got this problem elsewhere with a different page where the content is dropping out of the bottom of the DIV which is fixed to 400px. The reason I've added the height at all is that I want it to be a minimum of 400px and only expand if required by the content. I attached the code for that section (This time from the source produced by IE!)

I've tried to add the clearfix advice as suggested in the site you linked to. It doesn't seem to work as the content still drops out the bottom in firefox. Could you let me know if I've added it to the right place?

<div class="[COLOR=red]clearfix[/color] main">

<div class="header"><img alt="Logo" src="../images/general/logo_c.gif" /></div><img alt="Random Image Header" src="../images/headers/image1-2.jpg" /><div class="menubar">
<ul>
<li><a href="../index.aspx">HOME</a></li>
<li>ABOUT</li>
<li><a href="blog/index.aspx">BLOG</a></li>
<li><a href="gallery/index.aspx">GALLERY</a></li>
<li><a href="motorsport/index.aspx">MOTORSPORT</a></li>
</ul>
</div>	

<div class="contents">
<h3>ABOUT</h3>
Me<br />
<a href="equipment.aspx">Equipment</a>
</div>
<div class="mainpage">
<div class="content">
<h1>About Me</h1>

<img src="../images/general/me2.gif" class="floatright" />

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mi lacus, lacinia venenatis, commodo sagittis, pellentesque dapibus, erat. Vivamus sit amet lectus ac arcu mollis tincidunt. Duis vehicula orci ut leo. In hac habitasse platea dictumst. Curabitur et lectus ut lectus tempor nonummy. Nam malesuada. Integer massa tellus, euismod ut, suscipit vitae, tempus in, arcu. Integer imperdiet lorem nec nibh. Integer sed ligula. Cras tortor metus, nonummy ac, ullamcorper eget, mollis a, velit. Vestibulum consectetuer. Curabitur elit.
</p>
<p>
Cras purus ipsum, viverra quis, volutpat in, viverra vitae, turpis. Pellentesque eget neque vitae nisl lacinia dictum. Duis vitae tellus id mi accumsan luctus. Morbi sit amet ante et justo tempor sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer at libero. Sed diam. Nam ac nisi at est euismod scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque arcu. Suspendisse lacinia cursus sem.
</p>
<p>
Praesent eleifend bibendum pede. Etiam dictum orci at est. In dictum porta dolor. Quisque lacinia, felis eget placerat ultricies, magna odio laoreet ligula, nec faucibus mi leo ut turpis. Aliquam sed orci nec ipsum molestie suscipit. Cras ornare ante vitae eros. Etiam sollicitudin nisl quis nunc. Sed convallis porttitor ligula. In fringilla feugiat tortor. Morbi convallis laoreet urna. Mauris non lectus. Suspendisse congue dolor sit amet ipsum. Aenean vel nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eget metus. Integer massa risus, consequat ac, porta quis, rutrum vitae, arcu. Sed ultrices porttitor tellus. Donec id diam. Quisque quis sem. Duis ac nunc at eros aliquet porttitor.
</p>
<p>
Aliquam sed felis. Ut mattis vestibulum velit. Cras turpis. Donec nec augue. Donec condimentum, risus eget porttitor commodo, mi dolor tristique est, id adipiscing dolor nunc in massa. Aenean aliquam. Duis elementum. Sed porttitor ipsum vel lorem. Vivamus nulla. Integer dignissim purus bibendum est. Aenean vulputate, turpis et ornare molestie, orci nunc porttitor ligula, vel elementum nibh magna non nisl. Suspendisse malesuada diam eu odio commodo feugiat. Pellentesque arcu metus, posuere in, accumsan a, ultrices sed, purus.
</p>

</div>
</div>

<div class="locationstrip">
You are here &gt; HOME
</div>
			
<div class="footer">
Copyright © 2005 Steve Gordon. All Rights Reserved
</div>

</div>

.main {
	background : #FFFFFF;
	margin : 0 auto;
	width : 900px;
	margin-top:50px;
	}
	
.header {
	background : #000000;
	padding-top : 15px;
	padding-left : 15px;
	height : 50px;
	}
		
.menubar ul {
	margin : 0;
	padding : 7px;
	background : #979797;
	font : 13px Arial;
	font-weight : bold;
	color : #FFFFFF;
	border-bottom : 1px solid #000000;
	border-top : 1px solid #000000;
	white-space : nowrap;
	}

.menubar ul li{
   display : inline;
   padding-left : 4px;
   padding-right : 4px;
} 	

.menubar a:link			{color : #000000;}
.menubar a:visited 		{color : #000000;}
.menubar a:hover 		{color : #DDDDDD;}

.contents {
	float: left;
	display: inline;
	margin-left : 10px;
	margin-top : 10px;
	padding: 5px;
	width : 120px;
	}

.contents h3 {
	margin:0px;
	padding:0px;
	margin-bottom : 10px;
	}
		
.mainpage {
	float: right;
	display: inline;
	margin-top : 5px;
	padding-top:7px;
	padding-bottom : 12px;
	margin-right : 10px;
	width : 732px;
	}

.content {
	padding-left:15px;
	border-left: 1px solid #000000;
	height : 400px;
	}
		
.locationstrip {
	clear: both; 										/*Forces location bar to be properly below the contents section in Firefox*/
	padding-left : 15px;
	padding-top : 6px;
	height : 22px;
	font : 12px Arial;
	border-top : 1px solid #000000;
	background : #DDDDDD;
	}
	
.footer {
	background-color : #000000;
	color : #FFFFFF;
	text-align : center;
	padding-top : 7px;
	padding-bottom : 7px;
	}

p	{
	text-align : justify;
	margin : 0px;
	margin-bottom : 15px;
	}

[COLOR=red].clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */[/color]

Steve G (MCP)

 

[nevets2001uk]

The solution I used to stop the overlap I mentioned above was to add display:table; in the .content section.

Can anyone tell me if this is a suitable solution to use to allow firefox to display my page correctly?

Cheers,
Steve

Steve G (MCP)