SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Easy Firefox Problem - Help Fix Please!

    Hi,

    Here's my current css layout: http://www.classpile.com/current/template.html

    In IE, the date (on the upper right) will be centered in the navbar fine with no modifcations. However, in Firefox/Opera it is lower than the center. I can fix this by adding line-height: 16px to the #mainNavigation small area but this is undesired as it messes up the date's vertical alignment in IE.

    So, I'd like to know how I can center the date vertically in the navbar without having to hack this. I'm sure it's possible, I just don't know how!

    Thanks in advance.

    --
    tparkin

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    clear the floats in mainNavigation for FF NS Moz OP, haslayout for IE
    see FAQ CSS

    Don't set height, let one thing controll the height of the containers , padding is most safe, 11px font + 2x padding 8px makes the container 27px high


    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">
    <head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    				*
    			{
    				margin: 0px;
    				padding: 0px;
    				font-family: verdana, tahoma, arial, sans-serif;
    				font-size: 11px;
    			}
    
    			body
    			{
    			color: #000000;
    			background: #006699;
    			}
    
    			#mainPanel
    			{
    				width: 750px;
    				display: block;
    				border: 1px solid #000033;
    				margin: 16px auto 16px auto;
    			}
    
    			#header
    			{
    				display: block;
    				background: #000066;
    				vertical-align: middle;
    				line-height:100px;
    				padding: 0px 24px;
    			}
    			* html #header{height:1%;}
    			
    			#logo h1, #logo h1 i, #logo h1 small
    			{
    				font-family: "trebuchet ms", serif;
    				font-size: 48px;
    				color: #ff9933;
    			}			
    
    			#logo h1 i
    			{
    				font-style: italic;
    				color: #ffffff;
    			}
    
    			#logo h1 small
    			{
    				font-size: 11px;
    				color: #ffffff;
    			}
    			
    			#slogan
    			{
    				display: block;
    				width: 50%;
    				float: right;
    				padding-top: 8px;
    			}
    
    			#slogan i
    			{
    				float: right;
    				font-family: "trebuchet ms", serif;
    				font-style: italic;
    				font-weight: bold;
    				font-size: 24px;
    				color: #ffffff;
    			}
    
    			#slogan small
    			{
    				font-size: 24px;
    				color: #ff9933;
    			}
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0;
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    	/* End hide */
    			
    			#mainNavigation{
    			background:#99ccff;
    			}
    			
    			#mainNavigation small{float:right;padding:8px 5px 8px 5px;}
    			
    			#menuLinks{
    			background:#ffffcc;
    			float:left;
    			font-weight:bold;
    			}
    
    			#menuLinks a{
    			float:left;
    			color: #000066;
    			background:#99ccff;
    			text-decoration:none;
    			letter-spacing:1px;
    			padding:8px 5px 8px 5px;
    			}
    
    			#menuLinks a:hover
    			{
    				/*
    				border-top: 4px solid #ff9933;
    				padding-top: 0px;
    				margin-top: -4px;
    				*/
    				vertical-align: middle;
    				color: #ffffff;
    			}
    
    			#date
    			{
    				display: block;
    				/*float: right;*/
    				font-weight: bold;
    			}
    			
    			#subContent
    			{
    				display:block;
    				background: #ff9933;
    				color: #ffffff;
    				padding: 16px 8px;
    			}
    
    			#subContent h2
    			{
    				font-family: "trebuchet ms", serif;
    				font-size: 16px;
    				font-weight: bold;
    				line-height: 18px;
    			}
    			
    			.subContentRight
    			{
    				float: right;
    				width: 35%;
    				font-size: 11px;
    			}
    			
    			#topDivider
    			{
    				display: block;
    				height: 32px;
    				background: #000066;
    			}
    
    			#content
    			{
    				display: block;
    				background: #ffffff;
    				padding: 8px 8px;
    			}
    			
    			#contentBox
    			{
    				display: block;
    				background: #ffffff;
    				padding: 8px 8px 16px 8px;
    				line-height: 16px;
    			}
    			
    			#contentBox h1
    			{
    				display: block;
    				background: #000066;
    				color: #ffffff;
    				height: 24px;
    				line-height: 24px;
    				font-family: "trebuchet ms", serif;
    				font-size: 16px;
    				font-weight: bold;
    				border: 1px solid #000066;
    				margin-bottom: 4px;
    			}
    
    			#contentBox small
    			{
    				float: left;
    				width: 24px;
    				background: #ff9933;
    				color: #ffffff;
    				font-family: "trebuchet ms", serif;
    				font-size: 12px;
    				font-weight: bold;
    				text-align: center;
    				border-right: 8px solid #000066;
    			}
    
    			#bottomDivider
    			{
    				display: block;
    				height: 24px;
    				background: #99ccff;
    			}
    
    			#footer
    			{
    				display: block;
    				height: 64px;
    				background: #000066;
    				text-align: right;
    				vertical-align: middle;
    				line-height: 16px;
    
    			}
    
    			#footer p
    			{
    				color: #ffffff;
    				padding: 24px 8px 0px 8px;
    			}
    
    			#footer a
    			{
    				color: #99ccff;
    				text-decoration: none;
    			}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	*+html .fc{zoom:1;}
    	</style>
    	<![endif]-->
    	</head>
    
    	<body>
    		<div id="mainPanel">
    			<div id="header">
    				<div id="logo">
    					<div id="slogan">
    						<i>search<small>.</small> select<small>.</small> schedule<small>.</small></i>
    					</div>
    					<h1><i>class</i>pile<small>.com</small></h1>
    				</div>
    			</div>
    			
    			<div id="mainNavigation" class="fc">
    			
    				<div id="menuLinks">
    					<a href="#">home&nbsp;</a>
    					<a href="#">&nbsp;search&nbsp;</a>
    					<a href="#">&nbsp;blog&nbsp;</a>
    					<a href="#">&nbsp;about&nbsp;</a>
    					<a href="#">&nbsp;contact&nbsp;</a>
    					<a href="#">&nbsp;forums&nbsp;</a>
    				</div>
    				<small>Monday July 17, 2006</small>
    			</div>
    			
    			<div id="subContent">
    				<div class="subContentRight">
    					<h2>Report Problems</h2>
    					Classpile is currently in beta testing so be sure to let us know of any problems or suggestions by <a href="#">clicking here.</a>
    				</div>
    				<h2>Welcome to classpile.com</h2>
    				Introducing classpile.com, the newest, easiest, and fastest way to find the class schedules you want!  Choose your school, select a term, type your classes and let classpile do the rest.  It's that easy!  <a href="#">Click here to get started now.</a>
    
    			</div>
    			<div id="topDivider">
    			</div>
    			<div id="content">
    				<div id="contentBox">
    					<h1><small>>></small>Classpile.com Launches!</h1>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec nibh quis leo dictum dignissim. Nulla dictum nulla. Curabitur quis ante ut nunc aliquam mollis. Donec velit elit, scelerisque ut, congue ultrices, fringilla quis, libero. Sed id arcu. Donec sed diam. Donec vitae risus. Mauris pulvinar. Maecenas varius. Nullam sollicitudin dui ac ipsum. Nam a augue sit amet metus porttitor ultricies. Nunc neque libero, venenatis sed, ornare sed, ultricies eget, mi. Maecenas commodo imperdiet libero. Sed augue neque, faucibus id, lobortis lobortis, feugiat non, nulla. Morbi eleifend. Vivamus aliquet. Integer bibendum orci non magna. Etiam viverra egestas nisi. Vivamus odio.
    				</div>
    				<div id="contentBox">
    					<h1><small>>></small>Classpile.com Launches!</h1>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec nibh quis leo dictum dignissim. Nulla dictum nulla. Curabitur quis ante ut nunc aliquam mollis. Donec velit elit, scelerisque ut, congue ultrices, fringilla quis, libero. Sed id arcu. Donec sed diam. Donec vitae risus. Mauris pulvinar. Maecenas varius. Nullam sollicitudin dui ac ipsum. Nam a augue sit amet metus porttitor ultricies. Nunc neque libero, venenatis sed, ornare sed, ultricies eget, mi. Maecenas commodo imperdiet libero. Sed augue neque, faucibus id, lobortis lobortis, feugiat non, nulla. Morbi eleifend. Vivamus aliquet. Integer bibendum orci non magna. Etiam viverra egestas nisi. Vivamus odio.
    				</div>
    				<div id="contentBox">
    					<h1><small>>></small>Classpile.com Launches!</h1>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec nibh quis leo dictum dignissim. Nulla dictum nulla. Curabitur quis ante ut nunc aliquam mollis. Donec velit elit, scelerisque ut, congue ultrices, fringilla quis, libero. Sed id arcu. Donec sed diam. Donec vitae risus. Mauris pulvinar. Maecenas varius. Nullam sollicitudin dui ac ipsum. Nam a augue sit amet metus porttitor ultricies. Nunc neque libero, venenatis sed, ornare sed, ultricies eget, mi. Maecenas commodo imperdiet libero. Sed augue neque, faucibus id, lobortis lobortis, feugiat non, nulla. Morbi eleifend. Vivamus aliquet. Integer bibendum orci non magna. Etiam viverra egestas nisi. Vivamus odio.
    				</div>
    			</div>
    			<div id="bottomDivider">
    			</div>
    			<div id="footer">
    				<p>
    				&copy; 2006 classpile.com
    				<br />
    				<a href="#">terms of service</a> | <a href="#">disclaimer</a>
    				</p>
    			</div>
    		</div>
    	</body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all4nerds,

    Thanks for your help. Is there not a cleaner way to fix it?

    For example, using my existing styles.css but only adding this:
    Code:
    <!--[if !IE]>
    <style type="text/css">
    #mainNavigation small
    {
    line-height: 16px;
    }
    </style>
    <![endif]-->
    I haven't tested the above, but based on my first post I assume it will work and is much simpler. It's still a hack tho, which I am trying to avoid.

    Thanks again.

    --
    tparkin

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    use line-height:32px; but without padding or height's

  5. #5
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds,

    Thanks for the advice. Here's my changes, including no heights in #mainNavigation or #menuLinks and just line-height. I've also removed some redundant styling. Perhaps it's closer, but still the date is not vertically aligned correctly.

    http://www.classpile.com/current/template.html

    Thanks again.

    --
    tparkin

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Your header logo spile out of there set heights in FF etc, meaning they are higher then the set value

    Sorry but i am not going to debug your code a second time, try the code below
    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">
    <head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    				*{
    				margin: 0px;
    				padding: 0px;
    				font-family: verdana, tahoma, arial, sans-serif;
    				font-size: 11px;
    			}
    
    			body{
    			color: #000000;
    			background: #006699;
    			}
    
    			#mainPanel{
    				width: 750px;
    				border: 1px solid #000033;
    				margin: 16px auto 16px auto;
    			}
    
    			#header{
    				background: #000066;
    				vertical-align: middle;
    				line-height:100px;
    				padding: 0px 24px;
    			}
    			* html #header{height:1%;}
    			
    			#logo h1, #logo h1 i, #logo h1 small
    			{
    				font-family: "trebuchet ms", serif;
    				font-size: 48px;
    				color: #ff9933;
    			}			
    
    			#logo h1 i
    			{
    				font-style: italic;
    				color: #ffffff;
    			}
    
    			#logo h1 small
    			{
    				font-size: 11px;
    				color: #ffffff;
    			}
    			
    			#slogan
    			{
    				width: 50%;
    				float: right;
    				padding-top: 8px;
    			}
    
    			#slogan i
    			{
    				float: right;
    				font-family: "trebuchet ms", serif;
    				font-style: italic;
    				font-weight: bold;
    				font-size: 24px;
    				color: #ffffff;
    			}
    
    			#slogan small
    			{
    				font-size: 24px;
    				color: #ff9933;
    			}
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0;
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    	/* End hide */
    			
    			#mainNavigation{
    			background:#99ccff;
    			padding:0 8px;
    			}
    			
    			#mainNavigation small{float:right;line-height:32px;font-weight:bold;}
    			
    			#menuLinks{
    			background:#ffffcc;
    			float:left;
    			font-weight:bold;
    			}
    
    			#menuLinks a{
    			float:left;
    			color:#000066;
    			background:#99ccff;
    			text-decoration:none;
    			letter-spacing:1px;
    			line-height:32px;
    			}
    
    			#menuLinks a:hover
    			{
    				/*
    				border-top: 4px solid #ff9933;
    				padding-top: 0px;
    				margin-top: -4px;
    				*/
    				vertical-align: middle;
    				color: #ffffff;
    			}
    
    			#date
    			{
    				/*float: right;*/
    				font-weight: bold;
    			}
    			
    			#subContent
    			{
    				background: #ff9933;
    				color: #ffffff;
    				padding: 16px 8px;
    			}
    
    			#subContent h2
    			{
    				font-family: "trebuchet ms", serif;
    				font-size: 16px;
    				font-weight: bold;
    				line-height: 18px;
    			}
    			
    			.subContentRight
    			{
    				float: right;
    				width: 35%;
    				font-size: 11px;
    			}
    			
    			#topDivider
    			{
    				height: 32px;
    				background: #000066;
    			}
    
    			#content
    			{
    				background: #ffffff;
    				padding: 8px 8px;
    			}
    			
    			#contentBox
    			{
    				background: #ffffff;
    				padding: 8px 8px 16px 8px;
    				line-height: 16px;
    			}
    			
    			#contentBox h1
    			{
    				background: #000066;
    				color: #ffffff;
    				height: 24px;
    				line-height: 24px;
    				font-family: "trebuchet ms", serif;
    				font-size: 16px;
    				font-weight: bold;
    				border: 1px solid #000066;
    				margin-bottom: 4px;
    			}
    
    			#contentBox small
    			{
    				float: left;
    				width: 24px;
    				background: #ff9933;
    				color: #ffffff;
    				font-family: "trebuchet ms", serif;
    				font-size: 12px;
    				font-weight: bold;
    				text-align: center;
    				border-right: 8px solid #000066;
    			}
    
    			#bottomDivider
    			{
    				height:24px;
    				background: #99ccff;
    			}
    
    			#footer
    			{
    				height: 64px;
    				background: #000066;
    				text-align:right;
    
    			}
    
    			#footer p
    			{
    				color: #ffffff;
    				padding: 24px 8px 0px 8px;
    			}
    
    			#footer a
    			{
    				color: #99ccff;
    				text-decoration: none;
    			}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	*+html .fc{zoom:1;}
    	</style>
    	<![endif]-->
    	</head>
    
    	<body>
    		<div id="mainPanel">
    			<div id="header">
    				<div id="logo">
    					<div id="slogan">
    						<i>search<small>.</small> select<small>.</small> schedule<small>.</small></i>
    					</div>
    					<h1><i>class</i>pile<small>.com</small></h1>
    				</div>
    			</div>
    			
    			<div id="mainNavigation" class="fc">
    			
    				<div id="menuLinks">
    					<a href="#">home&nbsp;</a>
    					<a href="#">&nbsp;search&nbsp;</a>
    					<a href="#">&nbsp;blog&nbsp;</a>
    					<a href="#">&nbsp;about&nbsp;</a>
    					<a href="#">&nbsp;contact&nbsp;</a>
    					<a href="#">&nbsp;forums&nbsp;</a>
    				</div>
    				<small>Monday July 17, 2006</small>
    			</div>
    			
    			<div id="subContent">
    				<div class="subContentRight">
    					<h2>Report Problems</h2>
    					Classpile is currently in beta testing so be sure to let us know of any problems or suggestions by <a href="#">clicking here.</a>
    				</div>
    				<h2>Welcome to classpile.com</h2>
    				Introducing classpile.com, the newest, easiest, and fastest way to find the class schedules you want!  Choose your school, select a term, type your classes and let classpile do the rest.  It's that easy!  <a href="#">Click here to get started now.</a>
    
    			</div>
    			<div id="topDivider">
    			</div>
    			<div id="content">
    				<div id="contentBox">
    					<h1><small>>></small>Classpile.com Launches!</h1>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec nibh quis leo dictum dignissim. Nulla dictum nulla. Curabitur quis ante ut nunc aliquam mollis. Donec velit elit, scelerisque ut, congue ultrices, fringilla quis, libero. Sed id arcu. Donec sed diam. Donec vitae risus. Mauris pulvinar. Maecenas varius. Nullam sollicitudin dui ac ipsum. Nam a augue sit amet metus porttitor ultricies. Nunc neque libero, venenatis sed, ornare sed, ultricies eget, mi. Maecenas commodo imperdiet libero. Sed augue neque, faucibus id, lobortis lobortis, feugiat non, nulla. Morbi eleifend. Vivamus aliquet. Integer bibendum orci non magna. Etiam viverra egestas nisi. Vivamus odio.
    				</div>
    				<div id="contentBox">
    					<h1><small>>></small>Classpile.com Launches!</h1>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec nibh quis leo dictum dignissim. Nulla dictum nulla. Curabitur quis ante ut nunc aliquam mollis. Donec velit elit, scelerisque ut, congue ultrices, fringilla quis, libero. Sed id arcu. Donec sed diam. Donec vitae risus. Mauris pulvinar. Maecenas varius. Nullam sollicitudin dui ac ipsum. Nam a augue sit amet metus porttitor ultricies. Nunc neque libero, venenatis sed, ornare sed, ultricies eget, mi. Maecenas commodo imperdiet libero. Sed augue neque, faucibus id, lobortis lobortis, feugiat non, nulla. Morbi eleifend. Vivamus aliquet. Integer bibendum orci non magna. Etiam viverra egestas nisi. Vivamus odio.
    				</div>
    				<div id="contentBox">
    					<h1><small>>></small>Classpile.com Launches!</h1>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec nibh quis leo dictum dignissim. Nulla dictum nulla. Curabitur quis ante ut nunc aliquam mollis. Donec velit elit, scelerisque ut, congue ultrices, fringilla quis, libero. Sed id arcu. Donec sed diam. Donec vitae risus. Mauris pulvinar. Maecenas varius. Nullam sollicitudin dui ac ipsum. Nam a augue sit amet metus porttitor ultricies. Nunc neque libero, venenatis sed, ornare sed, ultricies eget, mi. Maecenas commodo imperdiet libero. Sed augue neque, faucibus id, lobortis lobortis, feugiat non, nulla. Morbi eleifend. Vivamus aliquet. Integer bibendum orci non magna. Etiam viverra egestas nisi. Vivamus odio.
    				</div>
    			</div>
    			<div id="bottomDivider">
    			</div>
    			<div id="footer">
    				<p>
    				&copy; 2006 classpile.com
    				<br />
    				<a href="#">terms of service</a> | <a href="#">disclaimer</a>
    				</p>
    			</div>
    		</div>
    		
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds,

    Simply brilliant! Thanks. Your explanation is what I needed and was very clear. I removed the height: 100px; from #header and it works fine now. No need for hacks.

    Thanks again for your help!

    --
    tparkin


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
  •