CSS Help.

Lysine · 07-03-2007, 11:41 PM

I had my layout coded by RichardKnow but as he could not get it to work in 2 browsers he coded the css for it to work in IE and Firefox it works fins in IE but it is mucked up in Firefox.

I will supply the coding below.

ffindex.css

PHP Code:


/* CSS Document */

body {
background-color: #4b6d78;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-top: 20px;
}

#banner {
width: 801px;
height: 120px;
background-image: url(images/banner.gif);
}

#bar {
width: 799px;
height: 23px;
border-left: 1px solid #020003;
border-right: 1px solid #020003;
background-image: url(images/barbg.gif);
}

#container {
width: 801px;
clear: both;
background-image: url(images/container.gif);
overflow: hidden;
}

#bottom {
width: 801px;
clear: both;
background-image: url(images/bottom.gif);
height: 24px;
}

#left {
width: 177px;
float: left;
margin-bottom: -1000px;
padding-bottom: 1000px;
overflow: hidden;
}

#right {
width: 177px;
float: right;
margin-bottom: -1000px;
padding-bottom: 1000px;
overflow: hidden;
}

#mtop {
width: 169px;
height: 18px;
clear: left;
background-image: url(images/mtop.gif);
}

#stop {
width: 169px;
height: 18px;
clear: right;
margin-top: 10px;
background-image: url(images/stop.gif);
}

#rtop {
width: 169px;
height: 13px;
margin-top: 10px;
background-image: url(images/rtop.gif);
}

#rbot {
width: 169px;
height: 13px;
clear: right;
background-image: url(images/rbot.gif);
}

#ntop {
width: 169px;
height: 18px;
margin-top: 10px;
background-image: url(images/ntop.gif);
}

#cb {
width: 169px;
height: 5px;
margin-bottom: 10px;
background-image: url(images/lcb.gif);
clear: left;
}

#c {
width: 157px;
padding-right: 5px;
padding-left: 5px;
background-color: #FFFFFF;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
clear: left;
}

#mc {
width: 438px;
padding-left: 5px;
padding-right: 5px;
margin-right: 177px;
margin-left: 177px;
overflow: hidden;
}

And this is the ffindex,html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ThisHabbo.net - Your Number 1 Habbo Fansite!</title>

	<link rel="stylesheet" href="ffstyle.css" type="text/css" />

</head>
<center>


	<div id="banner"></div>
	
		<div id="bar"><FONT SIZE="1" FACE="verdana" COLOR=white><MARQUEE WIDTH=100&#37; BEHAVIOR=SCROLL LOOP=3>This is an example of a scrolling marquee...</MARQUEE></FONT></div>
		
			<div id="container">
			
				<div id="left">
				
				<div id="ntop"></div>
					
					<div id="c"><iframe name="nav" id="nav"  src="http://www.thishabbo.net/v1/content/nav.html" 
width="160" height="" scrolling"no" frameborder="0"></iframe></div>
					
				<div id="cb"></div>
				
					<div id="mtop"></div>
					
						<div id="c"><script type="text/javascript">
var iframeids=["mainframe", "login", "nav", "stats", "news"]
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
<iframe name="login" id="login"  src="http://www.thishabbo.net/usersystem/user/login.php" 
width="160" height="" scrolling"no" frameborder="0"></iframe></div>
					
					<div id="cb"></div>
					
					</div>
					
										<div id="right">
					
					<div id="rtop"></div>
					
						<div id="c">News.</div>
						
					<div id="rbot"></div>					
					
						<div id="stop"></div>
						
							  <div id="c"><iframe name="stats" id="stats"  src="http://www.thishabbo.net/usersystem/user/online2.php" 
width="160" height="" scrolling"no" frameborder="0"></iframe></div>
					
						<div id="cb"></div>		
						
					</div>
					
							<div id="mc"><iframe name="mainframe" id="mainframe"  src="http://www.thishabbo.net/v1/content/home.html" 
width="430" height="619" scrolling"no" frameborder="0"></iframe></div>	
									
						
			</div>
			
		<div id="bottom"></div>
	
</div>
</center>
</body>
</html>

to view the error in the coding or css go to www.thishabbo.net in Firefox

If you can sort this out + Rep.

Edited by Lµke (Forum Moderator): Thread Moved From Website Designing. Please post in the correct section next time, Thanks .

Mentor · 08-03-2007, 12:25 AM

Its a bit of a miricle it worked at all, some of that codeing was appualing. Ive tryed to leave as much of it the same as it was, although some bits i had to totaly rewrite, it was useing Id's as classes, had divs and tags without anything to attach to, it was centered under a centering tag instead of aligning the divs, and the container didnt conatin the page o.0

Anyway ive restrcutured it in a baisc way, it should now work, but aint even close to the xhtml standard the doc type boasts.

The CSS

HTML Code:

/* CSS Document */

body {
	background-color: #4b6d78;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	margin-top: 20px;
}

#banner {
	width: 801px;
	height: 120px;
	background-image: url(images/banner.gif);
}

#bar {
	width: 799px;
	height: 23px;
	border-left: 1px solid #020003;
	border-right: 1px solid #020003;
	background-image: url(images/barbg.gif);
}

#container {
	width: 801px;
	clear: both;
	background-image: url(images/container.gif);
	margin-left:auto;
	margin-right:auto;

}

#bottom {
	width: 801px;
	clear: both;
	background-image: url(images/bottom.gif);
	height: 24px;
}

#left {
	width: 177px;
	float: left;
}

#right {
	width: 177px;
	float: right;
}

#mtop {
	width: 169px;
	height: 18px;
	clear: left;
	background-image: url(images/mtop.gif);
}

#stop {
	width: 169px;
	height: 18px;
	clear: right;
	margin-top: 10px;
	background-image: url(images/stop.gif);
}

#rtop {
	width: 169px;
	height: 13px;
	margin-top: 10px;
	background-image: url(images/rtop.gif);
}

#rbot {
	width: 169px;
	height: 13px;
	clear: right;
	background-image: url(images/rbot.gif);
}

#ntop {
	width: 169px;
	height: 18px;
	margin-top: 10px;
	background-image: url(images/ntop.gif);
}

#cb {
	width: 169px;
	height: 5px;
	margin-bottom: 10px;
	background-image: url(images/lcb.gif);
	clear: left;
}

.c {
	width: 157px;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #FFFFFF;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	clear: left;
}

#mc {
	width: 430px;
	margin-left:auto;
	margin-right:auto;
}

And the html page

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>ThisHabbo.net - Your Number 1 Habbo Fansite!</title>
        <link rel="stylesheet" href="ffstyle.css" type="text/css" />
	<script type="text/javascript">
		var iframeids=["mainframe", "login", "nav", "stats", "news"]
		var iframehide="yes"
		var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
		var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
		function resizeCaller() {
			var dyniframe=new Array()
			for (i=0; i<iframeids.length; i++){
				if (document.getElementById)
				resizeIframe(iframeids[i])
				if ((document.all || document.getElementById) && iframehide=="no"){
					var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
					tempobj.style.display="block"
				}
			}
		}
		function resizeIframe(frameid){
			var currentfr=document.getElementById(frameid)
			if (currentfr && !window.opera){
				currentfr.style.display="block"
				if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
					currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
				else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
				currentfr.height = currentfr.Document.body.scrollHeight;
			if (currentfr.addEventListener)
				currentfr.addEventListener("load", readjustIframe, false)
			else if (currentfr.attachEvent){
				currentfr.detachEvent("onload", readjustIframe) // Bug fix line
				currentfr.attachEvent("onload", readjustIframe)
				}
			}
		}
		function readjustIframe(loadevt) {
			var crossevt=(window.event)? event : loadevt
			var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
			if (iframeroot)
			resizeIframe(iframeroot.id);
		}
		function loadintoIframe(iframeid, url){
			if (document.getElementById)
				document.getElementById(iframeid).src=url
		}
		if (window.addEventListener)
			window.addEventListener("load", resizeCaller, false)
		else if (window.attachEvent)
			window.attachEvent("onload", resizeCaller)
		else
			window.onload=resizeCaller
	</script>
</head>


<div id="container">
	<div id="banner"></div>
	
	<div id="bar">
		<FONT SIZE="1" FACE="verdana" COLOR=white><MARQUEE WIDTH=100&#37; BEHAVIOR=SCROLL LOOP=3>This is an example of a scrolling marquee...</MARQUEE></FONT>
	</div>

	<div id="left">	
		<div id="ntop"></div>
		<div class="c">
			<iframe name="nav" id="nav"  src="http://www.thishabbo.net/v1/content/nav.html" width="160" height="" scrolling"no" frameborder="0"></iframe>
		</div>
		<div id="cb"></div>
		<div id="mtop"></div>
		<div class="c">
			<iframe name="login" id="login"  src="http://www.thishabbo.net/usersystem/user/login.php" width="160" height="" scrolling"no" frameborder="0"></iframe>
		</div>
		<div id="cb"></div>
	</div>
		
	<div id="right">
		<div id="rtop"></div>
		<div class="c">News.</div>	
		<div id="rbot"></div>					
		<div id="stop"></div>
		<div class="c">#			
			<iframe name="stats" id="stats"  src="http://www.thishabbo.net/usersystem/user/online2.php" width="160" height="" scrolling"no" frameborder="0"></iframe>
		</div>
		<div id="cb"></div>				
	</div>
	
	<div id="mc">
		<iframe name="mainframe" id="mainframe"  src="http://www.thishabbo.net/v1/content/home.html" width="430" height="619" scrolling="no" frameborder="0"></iframe>
	</div>	
	<div id="bottom"></div>
	
</div>

</body>
</html>

Positioning holds in IE+FF although i didnt have the images so some sizeing and scaling may be off, plus unexpected bugs could arrise from image sizeing, but give it a try, with luck it will work, although may possibly need some minor tweeking here and there, it was just a quick hack and slash job :p

Agnostic Bear · 08-03-2007, 12:31 AM

Ahhhhh div tags *SHOOTS* be ashamed RichardKnox, tables should be used on that >_

Lysine · 08-03-2007, 12:34 AM

Works perfect

+ Rep.

Mentor · 08-03-2007, 12:48 AM

Glad to have helped

ScottDiamond · 08-03-2007, 04:59 PM

Nice to see my free layout still being used.

And it was designed to be coded in tables btw, it's bad with divs.

YouFail · 08-03-2007, 05:45 PM

IGNORE THIS. I REALLY CANT BE BOTHERED ARGUING...

Mentor · 08-03-2007, 08:54 PM

Originally Posted by ScottDiamond

Nice to see my free layout still being used.

And it was designed to be coded in tables btw, it's bad with divs.

You cant really design a layout for table/div based codeing, both can be done, although with tables theres often alot of extra work, and less flexibility, Css/Dvs is VERY powerful if you use it right, and the layout can be easy put in to it, im pretty sure with my touch ups (aka actually using css instead of a mix of css and non-supported tags) it should work ok, plus haveing a random </div> floating around probably didnt help much.

Elitesean · 11-03-2007, 02:53 PM

Iframes Ugh

Btw the current site's code is appauling.. seriously.
Puts a bad name to css

Thread: CSS Help.

Thread Tools

CSS Help.

Posting Permissions