Another Firefox Space Issue

markei · #1 03-12-2009, 10:20 AM

Can this be fixed, or is it an issue with the free hosting provider and the iframe they put there?
It won't let me post a link so please remove spaces to see the problem(Firefox only problem):

apostolicprinciples . org

The space at the top(between the actual page and the ad banner) is ok in IE, but Firefox adds about a 10px space there.

my css:

Code:

* {
	margin: 0px;
	padding: 0px;
	border: none;
}
body {
	background: #ddbb77;
}
.button {
	float:left;
	width:144px;
	height:18px;
	border:1px solid #998800;
	background:#664400;
	color:#FFFFDD;
	font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	cursor: pointer;
}
#footer {
	font: 9pt/200% Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #446644;
}
#footer a {
	font: 8pt/200% Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #336633;
}
#footer a:hover {
	font: 8pt/200% Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	color: #889988;
}
#footer span {
	font: 8pt/200% Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #336633;
}
#header {
	background: url(../images/head_bg.png) repeat-x;
	height: 76px;
	text-align: left;
	width: 1024px;
}
#main {
	width: 1024px;
	float: left;
	border-bottom: 1px solid #BBBBBB;
}
#nav {
	height: 20px;
	background:#444444;
	border: 1px solid #BBBBBB;
	clear:both;
}
#page {
	text-align: center;
	width:1024px;
	background: #eaffce;
	border: thin solid silver;
	margin: 0 auto;
}

I have tried adding top:0px; to body and divs and have read just about all of the margin-collapsing websites I can handle, but no answer is apparent.

Thanks in advance for any attempts.

Keep In Tune!
markei

markei · #2 03-17-2009, 12:09 AM

Since I can't find this answer in CSS and nobody will touch it, I have decided to use a workaround for now. It may be the only way to fix it, as the free web page banner may be making the site jump(but only in firefox) and I can't change that. I've spent too many hours researching this and I can usually find answers fairly quickly when I have an issue.

I am simply checking for the firefox browser and if detected, add this line of code to the <head> of the web page:
<style>#page{margin-top:-12px;}</style>

It works beautifully.

- even though I know it's "wrong".

HTML · #3 03-17-2009, 12:37 AM

With code, wrong is relative

I looked at the code the other day and assumed that it was probably the host inserted code. Good job on the fix.

markei · #4 03-17-2009, 12:46 AM

Thanks.

I know it's the right fix for now, I was just hopoing there was a more general solution, but at least I know it will display correctly in the most popular browsers IE and Firefox.

I'll have to check Browsershots to see how else it displays. If it displays wrong in everything but IE, I will reverse my code and check for NOT IE...lol

I know it's just a minor glitch, but it just bothers me...lol