CSS Help. [Archive] - HabboxForum

View Full Version : 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

/* 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

<!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% 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(navigat or.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+FFextr aHeight;
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

/* 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

<!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(navigat or.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+FFextr aHeight;
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% 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 :D

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

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

Want to hide these adverts? Register an account for free!