SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Funnily enough I re-read that article just the other day. It makes some good points and I guess that from a designers perspective it makes sense but I have trouble telling the good examples from the bad

    Usually I code to a psd that a designer has sent me so I will be making the page fit the design which if designed correctly will have the correct proportions anyway.

    Regarding form elements then they are hard to style in a cross browser way as there are only some things you can change and indeed changing the height of things like select boxes isn't going to work cross browser anyway.

    However for most items you should be able to get the alignment pretty close even if some elements can't be styled.

    I notice you are using a lot of attribute selectors and as Ie6 and under don't understand those you will still need to add classes to the elements if you want to support ie6.

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hear ya.

    I code for the compliant browsers first, and once I have that setup I start a separate file for non compliant browsers and add classes as needed.


Bookmarks

Posting Permissions

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