Jump to content
Sign in to follow this  
strat76

Gap in FF and not in IE ????

Recommended Posts

Im fairly new to the css world and have been fighting with this site i'm designing for days now.. Finally made some headway and fixed alot of lil bugs.. but now just when i get IE working right something messed up in FF and I can't get rid of this lil gap.. see picture.. Im needing to fix the gap in FF.. and i need the .leftbox and .centerbox to have equal hieghts.. FFERROR.gifheres the css

/* CSS Document */body {	margin: 0;	padding: 0;	background-color: #FFFFFF;	font: 80% Arial, Helvetica, sans-serif;	line-height: 130%;}body, html {	width: 100%;	position: relative;	background-image:url(bg-patt.gif);}/*  Containers----------------------------------- */#bodyCont {	width: 100%;	min-height: 100%;	margin: 0;	padding: 0;	}*html #bodyCont {	height: _100%;	min-height: _100%;}#headerCont {	width: 100%;	height: 278px;	display: block;	position: relative;	margin: 0;	padding: 0;	background-position: top left;	background-repeat:repeat-x;	background-image:url(top.gif);}#coreCont {	width: 813px;	margin: 0 auto;		padding: 0 0px;	position: relative;	background-image:url(tan.gif);	min-height: 450px;	height: _450;	font-size: 8pt;	color: #333333;}*html #coreCont {	left: -3px;	height: 450px;}.leftbox {	position: absolute;	margin: 0px 0px 0px 0px;	padding: 0px;	width: 297px;	height: 450px;	background-image:url(left-col.gif);	left: 0px;}.centerbox {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 306px;width: 500px;height: 450px;text-align:justify;}#footerCont {	position: relative;	clear: both;	margin: 0;	padding: 0;	width: 100%;	height: 200px;	display: block;	background-color: #000000;	background-image:url(footer.gif);	background-position:top left;	background-repeat:repeat-x;}.clear { clear: both; }/* 		Header	--------------------------------------------------- */#header {	position: relative;	width: 813px;	height: 278px;	margin: 0 auto;	padding: 0;	background-color:#33CCFF;}/* 				CONTENT --------------------------------------------------- */#content {	position: relative;	min-height: 450px;	margin: 0 auto;	padding: 0px 0px 0px 0px;		font-size: 8pt;	color: #333333;    margin: 0 0 0 297px;     width: 516px;    height: _200px;}*html #content {	left: -3px;	height: 450px;}h2 {	font-size: 2em;	font-weight: normal;	color: #3DAAEA;	letter-spacing: 0.10em;	height: 26px;	display: block;	margin: 0px 0px 10px 0px;}h3 {	font-size: 1.35em;	display: block;	margin: 3px 0px 0px 0px;	padding: 0;	color: #FFFFFF;	font-weight: normal;}#content p {	position: relative;	margin-top: 0px;	text-align:justify;}#content a {	text-decoration: underline;	color: #3DAAEA;}#content a:hover {	text-decoration: none;}/* 				Footer --------------------------------------------------- */#footer {	clear: both;	position: relative;	width: 813px;	display: block;	margin: 0 auto;	padding: 10px 20px;	font-family: Arial, Helvetica, sans-serif;	font-size: 0.80em;	color: #FFFFFF;	line-height: 120%;}#footer a {	text-decoration: none;	color: #3DAAEA;}#footer a:hover {	text-decoration: underline;}#footer strong {	color: #3DAAEA;}#footer div.left {	text-align: left;}#footer div.right {	text-align: right;}#footerCenter {	border-left: 1px dotted #3DAAEA;	border-right: 1px dotted #3DAAEA;	margin: 0px 17px;	text-align: center;	padding: 0px 6px;}div.footerBlock {	width: 255px;	display: block;	margin: 0px 0px 10px 0px;	float: left;}

and here's the htm

<body>  <div id="bodyCont">	   <div id="headerCont">		   <div id="header"><img src="header.gif"></div>	   </div>  </div>	    <div id="coreCont">	  <div class="leftbox">THIS IS LEFT COLUMN 	           		<ul>					<li><a href="http://www.test.com" title="">TESTLINK</a></li>					<li><a href="http://www.test.com" title="">TESTLINK</a></li>						<li><a href="http://www.test.com" title="">TESTLINK</a></li>						<li><a href="http://www.test.com" title="">TESTLINK</a></li>									</ul>		   </div>     <div class="centerbox">	     <div class="content">              <p>Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.The CSS specifications are maintained by the World Wide WebCascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.CSS can be used locally by the readers of we</p></div>      </div>	  <div class="clear"></div>             </div>    <div id="footerCont">		<div id="footer">		   <div class="footerBlock right">				<p><h3>TEST</h3><br/>				Phone: 29088808080<br/>				Email: jfkdlsajklfdsa</p></div>		   <div class="footerBlock" id="footerCenter">				<p>COPYRIGHT 2008 - TEST<br/><br/>			  Designed by <a href="">TEST</a></p></div>           <div class="footerBlock left">				<p>Links of Interest:<br/>				<a href="terms-conditions.htm" title="Conditions">Terms & Conditions</a><br/>				<a href="" title="Privacy Policy">Privacy Policy</a><br/></p></div>	    </div>    </div></body>

THANKS IN ADVANCE FOR ANY HELP.. I'm sure im overlooking something silly..

Share this post


Link to post
Share on other sites

The <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <form> elements all have margin on them that causes this to happen.Just add this to your CSS:p { margin: 0; }

Share this post


Link to post
Share on other sites
The <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <form> elements all have margin on them that causes this to happen.Just add this to your CSS:p { margin: 0; }
worked like a charm.. thanks a ton for the fast reply

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...