SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Menu and Form. Probs with Firefox display, not in IE?

    Hi,

    I'm a back-end developer trying to build a html template I can use in .NET. Having abandoned tables I want to create a vertical menu and form on the page.

    The initial test page that has a header row, left column where the menu resides and a footer which will hold copyright details. Built it (well, scavenged from various places) and all looks good in IE but not Firefox. In firefox the left column disappears.

    Any advice from an expert CSS user?

    Cheers

    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test Page</title>
    <style type="text/css">

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    font: "Comic Sans MS";
    }

    b{font-size: 110%;}
    em{color: red;}


    #topsection{
    background: #6699FF;
    height: 90px; /*Height of top section*/
    color: #FFFFFF;
    }

    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }

    #topsection img{
    padding-top: 15px;
    padding-left: 15px;
    margin-right: 80px;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin-left: 200px; /*Set left margin to LeftColumnWidth*/
    }

    #leftcolumn{
    float: left;
    width: 200px; /*Width of left column*/
    margin-left: -100%;
    background: #6699FF;
    /*Added in */
    position: absolute;
    /*height: 100%;*/
    }

    #footer{
    position: absolute;
    bottom: 0;
    clear: left;
    width: 100%;
    background: white;
    color: black;
    text-align: center;
    padding: 4px 0;
    /*clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;*/
    }

    #footer a{
    color: black;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    /* #################################Menu Layout ################################## */
    .glossymenu{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    width: 170px;
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    background: #6699FF;
    }

    .glossymenu li a{
    background: #6699FF url(glossyback.gif) repeat-x bottom left;
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 10px;
    text-decoration: none;
    }

    * html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
    width: 160px;
    }

    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }

    .glossymenu li a:hover{
    background-image: url(glossyback2.gif);
    }

    /* ############################### Set up form details ######################################### */
    form.cmxform fieldset {
    margin-bottom: 10px;
    }
    form.cmxform legend {
    padding: 0 2px;
    font-weight: bold;
    }
    form.cmxform label {
    float: left;
    width: 10em;
    margin-right: 1em;
    }/*label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
    }*/

    form.cmxform fieldset ol {
    margin: 0;
    padding: 0;
    }
    form.cmxform fieldset li {
    list-style: none;
    padding: 5px;
    margin: 0;
    }
    form.cmxform fieldset fieldset {
    border: solid;
    margin: 3px 0 0;
    }
    form.cmxform fieldset fieldset legend {
    padding: 0 0 5px;
    font-weight: normal;
    }
    form.cmxform fieldset fieldset label {
    display: block;
    width: auto;
    }
    form.cmxform em {
    font-weight: bold;
    font-style: normal;
    color: #f00;
    }
    form.cmxform label {
    width: 120px; /* Width of labels */
    }
    form.cmxform fieldset fieldset label {
    margin-left: 123px; /* Width plus 3 (html space) */
    }

    </style>
    </head>
    <body>
    <div id="maincontainer">

    <div id="topsection">
    <div class="innertube">
    <h1>
    Header Text Here
    </h1>
    </div>
    </div>

    <div id="leftcolumn">
    <div class="innertube">
    <p>Text here?</p>
    <ul class="glossymenu">
    <li><a href="reports.aspx">Reports</a></li>
    <li><a href="admin.aspx">Administration</a></li>
    </ul>
    </div>
    </div>

    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube">
    <form class="cmxform">
    <fieldset>
    <legend>Delivery Details</legend>
    <ol>
    <li>
    <label for="name">Name<em>*</em></label>
    <input id="name" />
    </li>
    <li>
    <label for="address1">Address<em>*</em></label>
    <input id="address1" />
    </li>
    <li>
    <label for="address2">Address 2</label>
    <input id="address2" />
    </li>
    <li>
    <label for="town-city">Town/City</label>
    <input id="town-city" />
    </li>
    <li>
    <label for="county">County<em>*</em></label>
    <input id="county" />
    </li>
    <li>
    <label for="postcode">Postcode<em>*</em></label>
    <input id="postcode" />
    </li>
    <li>
    <fieldset>
    <legend>Is this address also your invoice address?<em>*</em></legend>
    <label><input type="radio" name="invoice-address" /> Yes</label>
    <br />
    <label><input type="radio" name="invoice-address" /> No</label>
    </fieldset>
    </li>
    </ol>
    </fieldset>
    </form>
    </div>
    </div>
    </div>

    <div id="footer">
    <p style="TEXT-ALIGN: center">
    Copyright here
    </p>
    </div>

    </div>
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's disappearing in Opera as well. If you can give me a minute or two, I'll show you an easy way to do this.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks Dan

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, maybe more than a minute or two. By the way, what version of Internet Explorer are you using? I can't see the menu in IE 6, which is why I'm asking (I don't have IE 7 on this spare computer I'm being forced to use).

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries Dan. As you suspect I'm using IE7.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Try this HTML (and limited, mostly unstyled) CSS out and let me know if you want me to proceed with styling it to look like you want it to. Bear in mind, I'm an architechtural-level minimalist coder, so what you see may be quite a shock to you. I also included a 100&#37; document height model for you (courtesy of Paul O'B) so that the footer can rest at the bottom of the browser viewport if there isn't enough content to push it over the edge. I also have a DIV with a class of "section" applied to it after the form as an example. Feel free to remove it from the code if you want.

    (I'm asking if this could meet your needs before I show you how to style the page further.)
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title Goes Here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="keywords" content="Keywords go here" />
    <meta name="description" content="A description of this page goes here." />
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html, body {
    	height: 100%;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    }
    
    #container {
    	margin-bottom: -3em;
    	min-height: 100%;
    }
    
    * html #container {
    	height: 100%;					/* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
    }
    
    html>body #container {
    	height: auto;					/* for modern browsers as IE 5 and 6 treats height as min-height anyway */
    	min-height: 100%; 				/* squashes an IE 7 bug */
    }
    
    	/* rest of styles will go here */
    
    	#clear-footer {					/* needed to make room for the footer */
    		clear: both;
    		height: 3em;
    	}
    
    #footer {
    	background: #FFF;
    	clear: both;
    	color: inherit;
    	height: 3em;
    }
    	#footer p {
    		padding-top: 1em;
    		text-align: center;
    	}
    
    </style>
    </head>
    <body>
    <div id="container">
    	<h1>Header Text</h1>
    	<div id="sidebar">
    		<p>Text here?</p>
    		<ul id="menu">
    			<li><a href="reports.aspx">Reports</a></li>
    			<li><a href="admin.aspx">Administration</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div class="section">
    			<h2>Heading Text</h2>
    			<form action="#" id="sample-form" method="post">
    				<div class="fieldset">
    					<fieldset>
    						<legend><span>Delivery Details</span></legend>
    						<label for="name">Name<span>*</span></label>
    						<input type="text" id="name" size="30" /><br />
    						<label for="address1">Address 1</label>
    						<input type="text" id="address1" size="30" /><br />
    						<label for="address2">Address 2</label>
    						<input type="text" id="address2" size="30" /><br />
    						<label for="town-city">Town/City<span>*</span></label>
    						<input type="text" id="town-city" size="30" /><br />
    						<label for="county">County<span>*</span></label>
    						<input type="text" id="county" size="30" /><br />
    						<label for="postcode">Post Code<span>*</span></label>
    						<input type="text" id="postcode" size="30" /><br />
    					</fieldset>
    				</div>
    				<div class="fieldset">
    					<fieldset>
    						<legend><span>Is this address also your invoice address?</span><em>*</em></legend>
    						<label for="yes"><input id="yes" name="invoice-address" type="radio" value="Yes" />Yes</label><br />
    						<label for="no"><input id="no" name="invoice-address" type="radio" value="No" />No</label>
    					</fieldset>
    				</div>
    				<div>
    					<input type="submit" class="submit" value="Submit Form" />
    					<input type="reset" class="reset" value="Clear Form" />
    				</div>
    			</form>
    		</div>
    		<div class="section">
    			<h2>Just a sample heading.</h2>
    			<p>
    				Just a sample paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    				Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
    				scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue
    				quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum.
    				Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo
    				tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam
    				ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
    			</p>
    		</div>
    	</div>
    	<div id="clear-footer"></div>
    </div>
    <div id="footer">
    	<p>&copy; Copyright here</p>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This site has a layout similar to what I would like. Is this CSS kosher?

    http://www.cssplay.co.uk/layouts/body2.html

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    Your HTML Code above looks like what I need. Just want a nice crisp layout that I can control easily when adding .NET objects.

    Really appreciate this!

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It uses more hacks than I'm comfortable with, and the CSS is a bit on the sloppy side (by my standards, such as the use of absolute positioning where it's not needed). What I'd like to do won't need any of that.

    Don't get me wrong, Stu is VERY GOOD with CSS, but not all of his examples are what I'd consider to be examples of "best practice" quality code.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Let me get to the CSS then.

    Just so you know, I edited the post with the HTML code, because I had put the second "section" DIV outside of its parent container (the "content" DIV). Oh, and I had some extra line breaks in there (which were removed).

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's a partial. I've been up since 3PM yesterday, so I need to head to bed. I was working on an image-free faux column for you, but I'll have to continue working on that (I removed the relevant CSS for now) when I wake up. The code here supercedes the previous HTML/CSS code.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title Goes Here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="keywords" content="Keywords go here" />
    <meta name="description" content="A description of this page goes here." />
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html, body {
    	height: 100&#37;;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    	font: 100%/1.2 "Lucida Console", sans-serif;
    }
    
    #container {
    	margin-bottom: -3em;
    	min-height: 100%;
    }
    
    * html #container {
    	height: 100%;					/* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
    }
    
    html>body #container {
    	height: auto;					/* for modern browsers as IE 5 and 6 treats height as min-height anyway */
    	min-height: 100%; 				/* squashes an IE 7 bug */
    }
    
    	h1 {
    		background: #69F;
    		color: #FFF;
    		height: 90px;
    		padding-top: 15px;
    		text-indent: 10px;
    	}
    	
    	#sidebar {
    		background: #69F;
    		color: #FFF;
    		float: left;
    		padding-left: 0.25em;
    		width: 9.75em;
    	}
    		#sidebar ul {
    			list-style: none;
    		}
    			#sidebar li {
    				background: #69F;
    				border-top: 1px solid #9A9A9A;
    				color: inherit;
    			}
    				#sidebar a {
    					background: transparent;
    					color: #FFF;
    				}
    	
    	#content {
    		margin-left: 10em;
    	}
    		#content .section {
    			margin-bottom: 0.5em;
    			padding-left: 1em;
    			
    		}
    			#sample-form {
    				margin-top: 1em;
    			}
    				#sample-form fieldset {
    					border: 0;
    					padding-top: 1em; 
    				}
    				
    				.fieldset {
    					border: 1px solid #000;
    					margin-bottom: 1em;
    					padding: 0 0 0.5em 0.5em;
    					position: relative;
    				}
    				
    				legend span {
    					background: #FFF;
    					color: #000;
    					font-weight: bold;
    					padding: 0 0.5em;
    					position: absolute;
    						top: -0.55em;
    						left: 0.5em;
    				}
    				
    				* html legend span {
    					left: 0;
    				}
    					legend span em {
    						background: #FFF;
    						color: #F00;
    					}
    					
    					#sample-form label {
    						margin: 0.25em 0 0.25em 0.5em;
    					}
    					
    					.fieldset label {
    						clear: left;
    						float: left;
    					}
    						#delivery label {
    							width: 7em;
    						}
    						
    						#radio label {
    							margin: 0;
    							width: 10em;
    						}
    					
    					.fieldset input {
    						margin: 0.25em auto;
    					}
    						#radio input {
    							margin: 0 0.25em;
    						}
    				
    				#sample-form label span {
    					background: #FFF;
    					color: #F00;
    				}
    
    	#clear-footer {					/* needed to make room for the footer */
    		clear: both;
    		height: 3em;
    	}
    
    #footer {
    	background: #FFF;
    	clear: both;
    	color: inherit;
    	height: 3em;
    }
    	#footer p {
    		border-top: 1px solid #000;
    		padding-top: 1em;
    		text-align: center;
    	}
    
    </style>
    </head>
    <body>
    <div id="container">
    	<h1>Header Text</h1>
    	<div id="sidebar">
    		<p>Text here?</p>
    		<ul id="menu">
    			<li><a href="reports.aspx">Reports</a></li>
    			<li><a href="admin.aspx">Administration</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div class="section">
    			<h2>Heading Text</h2>
    			<form action="#" id="sample-form" method="post">
    				<div id="delivery" class="fieldset">
    					<fieldset>
    						<legend><span>Delivery Details</span></legend>
    						<label for="name">Name<span>*</span></label>
    						<input type="text" id="name" size="30" /><br />
    						<label for="address1">Address 1</label>
    						<input type="text" id="address1" size="30" /><br />
    						<label for="address2">Address 2</label>
    						<input type="text" id="address2" size="30" /><br />
    						<label for="town-city">Town/City<span>*</span></label>
    						<input type="text" id="town-city" size="30" /><br />
    						<label for="county">County<span>*</span></label>
    						<input type="text" id="county" size="30" /><br />
    						<label for="postcode">Post Code<span>*</span></label>
    						<input type="text" id="postcode" size="30" /><br />
    					</fieldset>
    				</div>
    				<div id="radio" class="fieldset">
    					<fieldset>
    						<legend><span>Is this address also your invoice address?<em>*</em></span></legend>
    						<label for="yes"><input id="yes" name="invoice-address" type="radio" value="Yes" />Yes</label><br />
    						<label for="no"><input id="no" name="invoice-address" type="radio" value="No" />No</label>
    					</fieldset>
    				</div>
    				<div>
    					<input type="submit" class="submit" value="Submit Form" />
    					<input type="reset" class="reset" value="Clear Form" />
    				</div>
    			</form>
    		</div>
    		<div class="section">
    			<h2>Just a sample heading.</h2>
    			<p>
    				Just a sample paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    				Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
    				scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue
    				quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum.
    				Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo
    				tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam
    				ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
    			</p>
    		</div>
    	</div>
    	<div id="clear-footer"></div>
    </div>
    <div id="footer">
    	<p>&copy; Copyright here</p>
    </div>
    </body>
    </html>

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    That is sweet. Thanks for your help. Indispensible!

    Cheers

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not done yet. I'll be tinkering with it even more, before I even get to optimizing the stylesheet.

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    As an aside and this is probably mentioned elsewhere but where is a good place to start with CSS. i.e. what sites/blogs/books are the best places to go for "best practices" for a design illiterate? Assume all of the sitepoint books though now I'm not so sure http://www.sitepoint.com/forums/showthread.php?t=481881

    Thanks again Dan.

    Cheers

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be honest, there isn't a single site/book I'd recommend as the mega-source. It's all trial and error.

    Technology changes so fast it's not even funny, and trying to keep up with each and every development would render any book obsolete before it even gets to the printers.


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
  •