DIV help..

~~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.

HTML code

CSS code:

HTML 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

Iszak · 09-12-2008, 04:09 PM

I don't know how you managed to mess it up - but you if you give me the layout in PNG/PSD, I'll be happy to re-code it for you as the layout is pretty straight forward.

~~Blinger1~~ · 09-12-2008, 09:45 PM

www.freyta.net/pictures/layout.psd

Iszak · 09-12-2008, 10:48 PM

PMed layout, enjoy

~~Blinger1~~ · 10-12-2008, 05:02 AM

Thank you a lot

Thread: DIV help..

Thread Tools

DIV help..

Posting Permissions