Jump to content

Gap in FF and not in IE ????

strat76

By strat76
in CSS

Recommended Posts

strat76 Newbie

strat76

Posted
Posted

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..

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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; }

Link to comment
Share on other sites
strat76 Newbie

strat76

Posted
  • Author
Posted
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
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...