DIV help.. [Archive] - HabboxForum

Blinger1

09-12-2008, 03:36 AM

G'day y'all!

I have some questions about my DIV page and it being a *****.

It works on I.E but not on Firefox.

I am using DIVs to make three expandable boxes but it isn't working properlly.

Here is a screenshot with where it is going wrong. (http://www.freyta.net/pictures/doesntwork.jpg)

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=utf-8" />
<title>Freyta <dot> net</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="banner"></div>
<div id="Left-Box">
<div id="Nav-Box">
<div id="Nav-Top"></div>
<div id="Nav-Left"></div>
<div id="Nav-Middle">
<p>Testing okay?</p>
</div>
<div id="Nav-Right"></div>
<div id="Nav-Bottom"></div>
</div>

<div id="Last-News">
<div id="Last-News-Top"></div>
<div id="Last-News-Left"></div>
<div id="Last-News-Middle">This is really cool!!
Writing in this is good too. this stretches - see? this stretches - see? this stretches - see?</div>
<div id="Last-News-Right"></div>
<div id="Last-News-Bottom"></div>
</div>
</div>
<div id="Content-Box">
<div id="Content-Left"></div>
<div id="Content-Top"></div>
<div id="Content-Right"></div>
<div id="Content-Middle"></div>
<div id="Content-Bottom"></div>
<div id="Content-BottomRight"></div>
</div>
</div>
</body>
</html>

CSS code:

body {
background-color: #ecebef;
}

#container {
min-height: 454px;
width: 694px;

position: absolute;
top: 50%;
left: 50%;

margin-top: -227px;
margin-left: -347px;
}

#banner {
background-image:url(../images/layout_01.png);
width: 694px;
height: 56px;
}
/* Left boxes */
#Left-Box {
width: 183px;
min-height: 385px;
float:left;
}

/* Quick news */
#Last-News-Top {
background-image:url(../images/layout_13.png);
height: 27px;
width: 183px;
overflow: hidden;
}

#Last-News-Left {
background-image:url(../images/layout_14.png);
float: left;
height: 143px;
width: 28px;
overflow: hidden;
}

#Last-News-Middle {
background-image:url(../images/layout_15.png);
float: left;
width: 127px;
min-height: 143px;
overflow: hidden;
}

#Last-News-Right {
background-image:url(../images/layout_16.png);
float: left;
width: 27px;
height: 143px;
overflow: hidden;
}

#Last-News-Bottom {
background-image:url(../images/layout_19.png);
float: left;
height: 16px;
width: 183px;
overflow: hidden;
}

/* Navigations */
#Nav-Box {
width: 183px;
min-height: 215px;
float:left;
}

#Nav-Top {
background-image:url(../images/layout_02.png);
height: 21px;
overflow: hidden;
}

#Nav-Left {
background-image:url(../images/layout_06.png);
width: 21px;
min-height: 178px;
background-repeat:repeat-y;
float: left;

}

#Nav-Middle {
background-image:url(../images/layout_07.png);
background-repeat:repeat;
width: 135px;
float: left;
overflow: hidden;
min-height: 178px;
}

#Nav-Right {
background-image:url(../images/layout_08.png);
background-repeat:repeat-y;
width: 27px;
float: left;
min-height: 178px;
}

#Nav-Bottom {
float:left;
background-image:url(../images/layout_12.png);
height: 16px;
width: 183px;
}

/* Content */
#Content-Box {
min-height: 369px;
min-width: 511px;;
}

#Content-Left {
float:left;
background-image:url(../images/layout_03.png);
min-height: 369px;
width: 15px;;
}

#Content-Top {
background-image:url(../images/layout_04.png);
float:left;
min-height: 21px;
min-width: 468px;;
}

#Content-Middle {
background-image:url(../images/layout_10.png);
float:left;
min-height: 348px;
min-width: 468px;
}

#Content-Bottom {
background-image: url(../images/layout_20.png);
float: left;
overflow: hidden;
max-height: 16px;
min-width: 499px;
}

#Content-Right {
background-image: url(../images/layout_05.png);
float:right;
min-height: 369px;
min-width: 28px;
}

#Content-BottomRight {
background-image: url(../images/layout_22.png);
float:left;
max-height: 16px;
min-width: 12px;
}

Does anybody know how to fix it so the two boxes on the left have an equal gap and how I can show the bottom of the content box (Firefox).

Oh yeah, the "live" example is here
(http://www.freyta.net/newspanel/)