CSS Forum

**pealo86** · 03-21-2009, 05:47 PM

I sort of wish that the problem was in IE as the solution would probably just involve a quick little CSS hack to fix it! But seen as These browsers tend to follow standards, Im completely clueless on what to do.

http://www.freshbeat.co.uk/freshStuff/

On every page (apart from the homepage) you can see a gap below the image of the tree and sky. It works fine in FF, Opera and even IE7 (WOW!!!)

Here is all of the CSS Im using, any help would be great!

Code:

http://www.freshbeat.co.uk/freshStuff/css/styleDef.css

@charset "utf-8";
/* default styles */

body {
	padding:0;
	margin:0;
	background:#353535 url(../image/bgDot.gif);
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:11pt; }

p {
	margin:1em 0;
	padding:0;
	line-height:1.5em; }
	
a {
	color:#97fe2b; }

a:hover {
	color:#a4e93d; }

a:active {
	border:none; }

img {
	border:none; }

h1, h2, h3, h4, h5, h6 {
	font-size:150%;
	margin:1.9em 0 .7em;
	font-weight:normal; }

h1 {
	font-size:200%;
	margin-top:10px; }

.highlight {
	color:#97fe2b }

.ctaHead {
	margin-top:.4em; }

.clear {
	clear:both;
	line-height:0;
	height:0; }

.borderTop, .borderBtm {
	background:url(../image/borderTop.gif) repeat-x;
	border:none;
	height:2px;
	margin-top:10px; }

.borderBtm {
	background-image:url(../image/borderBtm.gif);
	margin:0 0 20px; }
	
.alignRight {
	text-align:right; }

.advert {
	border:#88c528 dotted 1px;
	margin-bottom:.8em; }





http://www.freshbeat.co.uk/freshStuf...styleDivId.css

@charset "utf-8";
/* div id's */

#head {
	height:100px;
	background:#FFF url(../image/bgHead.jpg) repeat-x 0 100%;
	text-align:center; }

#headInner {
	width:760px;
	margin:0 auto;
	text-align:left;
	position:relative;
	height:100px; }

#headInner #logo {
	margin-top:50px; }
	
#bgSky, #bgSkyIndex {
	min-height:70px;
	background:url(../image/bgSky.jpg) repeat-x 0 100%;
	text-align:center; }

#bgSkyIndex{
	background:url(../image/bgSkyIndex.jpg) repeat-x; }

#treeIndex {
	background:url(../image/treeIndex.jpg) no-repeat;
	margin:0 auto;
	width:760px;
	height:250px; }

#treeIndex .title1 {
	width:520px;
	height:220px;
	float:right;
	margin-top:25px;
	text-align:left; }

#wrapper {
	background:#529709 url(../image/bgLeafPattern.jpg) repeat-x;
	border:#88C528 solid;
	border-width:1px 0; }

#wrapperInner {
	background:url(../image/bgLeafPatternBtm.jpg) repeat-x 0 100%;
	border:#003C00 solid;
	border-width:1px 0; }

#content, #contentIndex {
	width:760px;
	margin:0 auto;
	padding:20px 0;
	background:url(../image/leafContent.png) no-repeat 250px 0; }

#contentIndex {
	background:none;
	margin:20px auto;
	padding:0;
	overflow:auto; }

#footer {
	padding-top:20px;
	margin:0 auto 50px;
	width:760px;
	line-height:1.5em; }

#footer #left {
	float:left;
	width:60%;
	min-height:40px; }
	
#footer #left img {
	margin-top:5px; }

#footer #left b {
	display:none; }
	

#colLeft {
	width:460px;
	float:left;
	margin-right:20px; }

#colRight {
	width:270px;
	float:left;
	position:relative;
	bottom:20px;
	font-size:80%; }

#colRight h2 {
	margin-top:30px; }

#colRight .borderInner {
	padding:1em;
	background:#3c6e0f url(../image/bgDotGreen.gif); }

#colRight .borderOuter {
	width:250px;
	margin:0 auto; }
	
http://www.freshbeat.co.uk/freshStuf...leDivClass.css

@charset "utf-8";
/* div classes */

.cta, .ctaLast {
	width:230px;
	float:left;
	min-height:200px;
	border-right:#FFf dotted 1px;
	margin-right:15px;
	padding-right:5px; }

.cta p, .ctaLast p {
	margin-top:0; }

.cta img, .ctaLast img {
	position:relative;
	right:3px; }

.ctaLast {
	border-right:none; }

.infoBox {
	background-color:#3c6e0f;
	padding:10px;
	overflow:auto; }

.infoBox p {
	margin-top:0; }

.infoBoxWidth {
	width:440px;
	margin:0 auto; }

.infoBox img {
	float:left;
	margin:10px 10px 0 0; }

.infoBox .title {
	font-size:120%;
	margin-bottom:.7em;
	display:block; }

.infoBox .content {
	width:250px;
	float:left; }

.borderOuter {
	border:#88C528 solid;
	border-width:0 1px; }

.borderInner {
	border:#003C00 solid;
	border-width:0 1px; }
	

http://www.freshbeat.co.uk/freshStuff/css/styleFrm.css

@charset "utf-8";
/* forms */

form {
	margin:0;
	padding:0;
	position:relative; }

input, textarea, select  {
	border:none;
	border-color:#FFF;
	color:#665;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11pt; }

textarea {
	width:210px;
	height:120px; }

#send {
	background:url(../image/btnSend.png) no-repeat;
	color:#FFF;
	position:relative;
	right:5px;
	text-align:right;
	padding:0 5px 0 0;
	width:75px;
	height:23px;
	margin:0; }

#send:hover {
	background-image:url(../image/btnSendHover.png); }

#send:active {
	background-image:url(../image/btnSendHover.png);
	right:4px;
	top:1px; }

.bgInput, .bgTextarea {
	background:url(../image/bgInput.png) no-repeat;
	padding:4px 5px 8px;
	margin:10px 0; }

.bgTextarea {
	background-image:url(../image/bgTextarea.png); }

.tipGood, .tipBad {
	font-size:12px;
	font-weight:bold;
	text-align:right;
	padding-right:5px;
	margin:0; }

.tipGood {
	color:#a4e93d; }

.tipBad {
	color:#f2e400; }
	
.pop {
	background:url(../image/frmPopTop.png) no-repeat;
	padding:10px 0;
	width:200px;
	position:absolute;
	float:left;
	right:250px; }

.pop p {
	background-color:#353535;
	margin:0;
	padding:0 10px; }

.popBtm {
	width:200px;
	height:10px;
	background:url(../image/frmPopBtm.png) no-repeat; }



http://www.freshbeat.co.uk/freshStuff/css/styleUl.css

@charset "utf-8";
/* lists */

ul {
	padding:0;
	margin:0; }

ul li {
	list-style-type:none;
	margin:0;
	padding:0; }

#nav {
	position:absolute;
	margin-top:50px;
	right:0;
	width:500px;
	text-decoration:none; }

#nav li {
	display:inline; }

#nav a {
	float:right;
	margin-left:30px;
	color:#3c6e0f;
	height:14px;
	padding-bottom:30px; }

#nav a img {
	display:none; }
	
#nav a:hover img {
	display:inline; }

#nav b {
	display:none; }

#navHome {
	background:url(../image/navHome.gif) no-repeat 100% 50%;
	width:85px; }

#navAbout {
	background:url(../image/navAbout.gif) no-repeat 100% 50%;
	width:85px; }

#navService {
	background:url(../image/navService.gif) no-repeat 100% 50%;
	width:95px; }

#navContact {
	background:url(../image/navContact.gif) no-repeat 100% 50%;
	width:90px; }

#navFooter {
	float:right;
	width:35%;
	font-size:90%; }

#navFooter li {
	display:inline; }

#navFooter a {
	float:right;
	margin-left:.5em;
	padding-left:.5em;
	background:url(../image/navFooterLi.gif) no-repeat 0 .45em; }

http://www.freshbeat.co.uk/freshStuf...imgReplace.css

@charset "utf-8";
/* use transparent .png's! */

.title1, .title2 {
	background-repeat:no-repeat; }

.title1 {
	height:40px; }

.title2 {
	height:25px; }

.title1 b, .title2 b {
	display:none; }
	

/* large titles */
#titleAbout {
	background-image:url(../image/title1About.png); }
	
#titleService {
	background-image:url(../image/title1Service.png); }

#titleContact {
	background-image:url(../image/title1Contact.png); }
	

/* smaller titles */
#titleWeb {
	background-image:url(../image/title2Web.png); }
	
#titleBus {
	background-image:url(../image/title2Bus.png); }
	
#titleAnalysis {
	background-image:url(../image/title2Analysis.png); }
	
#titleCms {
	background-image:url(../image/title2Cms.png); }

#titleCurrent {
	background-image:url(../image/title2Current.png); }

#titleWebDesign {
	background-image:url(../image/title2WebDesign.png); }

#titleBusDesign {
	background-image:url(../image/title2BusDesign.png); }
	

/* right-hand titles */
#titleFreshWork {
	background-image:url(../image/title2FreshWork.png); }

#titleContent {
	background-image:url(../image/title2ContentManagement.png); }

#titleTestimonial {
	background-image:url(../image/title2Testimonial.png); }

#titleQuote {
	background-image:url(../image/title2Quote.png); }
	
/* background images*/
#freshWork {
	background:url(../image/freshWork.png) no-repeat;
	height:210px; }

#cms {
	background:url(../image/cms.png) no-repeat;
	height:145px; }

**jason_bristol** · 03-21-2009, 06:59 PM

Hi KkillgasmM

I tried to have a look but because it's part of a template my dreamweaver doesn't let me edit the text. I've never used this feature and don't know how to turn it off. anyway.

I would first try adding

* {
margin: 0px;
padding: 0px;
}

into the top of your stylesheet if you haven't already.

**pealo86** · 03-22-2009, 01:20 PM

Turns out it was that clearing <br> I had in there, luckily the other browsers still work without it!