Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical Rhythm and Form Elements

    Anyone have any thoughts on vertical rhythm and form elemts?

    Is inconsistency between browsers so great that it's not worth trying to work out?

    I have the following html and css if anyone wants to give there opinion. It is based off of the article by Richard Rutter.

    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    		<title>Test Page</title>
    		<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    	</head>
    <body id="index">
    	
    	<div id="wrapper">
    		
    		<div id="left">
    			<h1>Heading h1</h1>
    			<img src="img/sample.jpg" style="float: left;"/>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    			<h2>Heading h2</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    			<h3>Heading h3</h3>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    		</div>
    		<div id="right">
    			<ul>
    				<li>Item 1</li>
    				<li>Item 2</li>
    				<li>Item 3</li>
    				<li>Item 4
    					<ul>
    						<li>Sub Item 1</li>
    						<li>Sub Item 2
    							<ul>
    								<li>Sub Item 1</li>
    								<li>Sub Item 2</li>
    							</ul>
    						</li>
    					</ul>
    				</li>
    				<li>Item 5</li>
    			</ul>
    			<dl>
    				<dt>Term 1:</dt><dd> Definition 1</dd>
    				<dt>Term 2:</dt><dd> Definition 2</dd>
    				<dt>Term 3:</dt><dd> Definition 3</dd>
    			</dl>
    			<ol>
    				<li>Item 1</li>
    				<li>Item 2</li>
    				<li>Item 3</li>
    				<li>Item 4</li>
    				<li>Item 5</li>
    			</ol>
    		</div>
    		<div id="footer">
    			<table border="0" cellspacing="0" cellpadding="0">
    				<tr><th>Header</th><th>Header 2</th><th>Header 3</th></tr>
    				<tr><td>Data</td><td>Data 2</td><td>Data 3</td></tr>
    				<tr><td>Data</td><td>Data 2</td><td>Data 3</td></tr>
    			</table>
    			<p><a href="#">Test link</a></p>
    			<fieldset>
    				<legend>Form Legend 1</legend>
    				<form action="index_submit" method="get" accept-charset="utf-8">
    					<label for="input1">Input 1:</label><input type="text" name="input1" value="" id="input1" />
    					<label for="input2">Input 2:</label><input type="text" name="input2" value="" id="input2" />
    					<label for="textarea1">Text Area 1:</label><textarea name="textarea1" id="textarea1" rows="6" cols="20"></textarea>
    					<input type="radio" name="radio1" value="" id="radio1" /><label for="radio1" class="radio">Radio 1</label>
    					<input type="radio" name="radio2" value="" id="radio2" /><label for="radio2" class="radio">Radio 2</label>
    					<input type="checkbox" name="checkbox1" value="" id="checkbox1" /><label for="checkbox1" class="checkbox">Checkbox 1</label>
    					<input type="checkbox" name="checkbox2" value="" id="checkbox2" /><label for="checkbox2" class="checkbox">Checkbox 2</label>
    					<input type="checkbox" name="checkbox3" value="" id="checkbox3" /><label for="checkbox3" class="checkbox">Checkbox 3</label>
    					<input type="submit" value="Continue" />
    				</form>
    			</fieldset>
    			<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    		</div>	
    	</div>
    	
    </body>
    </html>
    css:
    Code:
    /* @group resets */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { margin: 0; padding: 0; border: none; }
    ul, ol, dl, li, dt, dd { list-style-type: none; }
    li, dt { background: url(../img/bullet-arrow.png) no-repeat 0 .208em; padding-left: 1.3em; }
    img { border: 1px solid #ccc; padding: .8333em; background-color: #fff; margin-right: .8333em; }
    fieldset { }
    label { display: block; }
    input[type="text"], textarea { border-left: 2px solid #999; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 2px solid #999; padding-left: 0.41666666667em; }
    input[type="text"]:focus, textarea:focus { background-color: #fff7e9; }
    input[type="radio"], input[type="checkbox"] { width: auto; height: auto; float: left; clear: both; margin-top: 0.15em; margin-bottom: 0em; padding: 0; }
    input[type="submit"] { padding: .2em; display: block; clear: both; }
    textarea { width: 21.66666666667em; height: 7.8333em; }
    
    /* @end */
    
    
    /* @group typography */
    body { font: 75% "Lucida Grande", Verdana, sans-serif; }
    html>body { font-size: 12px; } /*=FILTER: to set font size in pixels in non-ie browsers*/
    p, ul, ol, dl, table { margin-top: 1.5em; margin-bottom: 3em; line-height: 1.5em; }
    p, li, dt, dd, td, th { font-size: 1em; }
    li ul { margin-top: 0; margin-bottom: 0; }
    h1 { font-size: 1.5em; line-height: 1em; margin-top: 0; margin-bottom: 1em; }
    h2 { font-size: 1.1667em; line-height: 1.286em; margin-top: 1.1929em; margin-bottom: 0.643em; }
    h3 { font-size: 1em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; }
    legend { font-size: 1.1667em; margin-bottom: 1.286em; height: 1.286em; line-height: 1.286em; }
    label { font-size: 1em; line-height: 1.5em; margin-bottom: 0; }
    input[type="text"] { font-size: 1em; line-height: 1.5em; margin-bottom: 1.333em; }
    input[type="submit"] { font-size: 1.1667em; line-height: 1.286em; margin-bottom: 0.626em; margin-top: 1.286em;}
    textarea { margin-bottom: 1.5em; }
    p.small { font-size: .8333em; margin-bottom: 1.8em; margin-top: 1.8em; line-height: 1.8em; }
    
    /* @end */
    
    
    /* @group color */
    html { color: #333; }
    #right { background-color: #f6f6f6; }
    
    /* @end */
    
    
    /* @group layout */
    body { margin: 3em 6em; }
    div#wrapper { width: 60em; position: relative; left: 50%; margin-left: -30em; }
    div#left { float: left; width: 30em; }
    div#right { float: right; width: 15em; }
    div#right li, div#right dt, div#right dd { background-color: #f6f6f6; margin-left: .8333em; }
    div#footer { clear: both; }
    
    /* @end */

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    For the very reason you cited (rending inconsistencies) I try my best to avoid the headache of vertical rhythm in forms. I think it and a grid-based approaches are great angles to design text on a website with, but it's just too painful to try to make it work cross-browser with form elements.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •