Hi,
I'm not very good with design I usually download a theme that does the trick
However I'm having problems with this one, and guess I have to solve them myself.
I have this short bit of HTML:
<div class="arch_news" align="left">
<div class="arch_up"><!-- <font color="#20628e">posted by: Evil!</font> 00/00/0000--></div>
<div class="arch_repeat">
<?php echo $row->page_content ?>
</div>
<div class="arch_end"></div>
</div>
Which works quite well, it displays everything correctly. The problem appears when there's any kind of html formatting in the page content.
This is how the page looks like with HTML:
Kindly notice that the border doesn't go all the way, but stops.
So when I avoid HTML, and use a short line I get this result:
This time the box display fine, but at the very bottom the header is "lifted" and doesn't stay down.
Here's my CSS which I believe is the problem:
/* CSS Document */
BODY { background:#000000;
background-image:url(../images/background.png);
background-position:top ;
background-repeat:no-repeat;
padding:0px;
margin:0px;
}
.header { position:relative;
width:989 px;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.footer { position:relative;
background: url(../images/foot_repeat.png) repeat-x;
width:100%;
height:90px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
text-shadow: #000000 0px 1px 1px;
padding-top:20px;
}
.top_menu { position:relative;
width:900px; height:26px;
padding-top: 4px;
margin-right:80px;
}
.top_menu a { font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
text-decoration:none;
outline:none;
padding:10px;
}
.top_menu a:hover { color:#c93a0d;}
.top_place { position:relative;
background:url(../images/top_image.png);
width:1014px;
height:317px;
padding-top:88px;
}
.slider_movie_place { position:relative;
width: 554px;
height: 280px;
}
.realms_status { position:relative;
width:400px;
height:280px;
}
.realms_status_title { background:url(../images/titles/realms_status.png);
position:relative;
width:232px;
height:96px;
margin-top:12px;
}
.realms_statu_2 { position:relative;
width:400px;
top:-15px;
}
.realms_sub { position:relative;
height: 45px;
width: 380px;
margin-bottom: 2px;
}
.realm { position:relative;
background: url(../images/realms_v1.png);
width: 276px;
height: 40px;
left:45px;
top: 3px;
padding-left:6px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:170%;
}
/* Realm Icons */
.blizzlike_realm_ico { position:absolute;
background-image:url(../images/icons/blizzlike_realm.png);
width: 42px; height: 42px;
padding:0px; margin:0px;
}
.fun_x60_realm_ico { position:absolute;
background-image:url(../images/icons/fun_x60_realm.png);
width: 42px; height: 42px;
padding:0px; margin:0px;
}
.in_development_realm_ico { position:absolute;
background-image:url(../images/icons/in_development_realm.png);
width: 42px; height: 42px;
padding:0px; margin:0px;
}
.soon_realm_ico { position:absolute;
background-image:url(../images/icons/soon_realm.png);
width: 42px; height: 42px;
padding:0px; margin:0px;
}
/* Realm Icons EnD */
.realm_name { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#CCCCCC;
font-weight:600;
text-shadow: #000000 0px 0px 2px;
}
.on_off_status { position:absolute;
width:15px;
height:17px;
left:254px;
top:17px;
}
.membership_bar { position:relative;
background:url(../images/center_login_big_bg.png);
width:936px;
height:62px;
right:24px;
}
/*Bonus Buttons */
.bonus_buttons { position:relative;
width:458px;
padding-top:10px;
padding-left:12px;
}
.bonus_button {width: 145px; height:100%; position:relative; float:left; margin-left:5px;}
.bonus_nutton_1 {position:absolute; top: 0px; left: 0px; cursor:pointer; width: 145px; height:46px;}
.bonus_button_2 {position:absolute; top: 10px; left: 3px; color:#4d88b7; width: 145px; font-family:Arial, Helvetica, sans-serif; font-size:11px;text-shadow: #000000 0px 1px 1px;}
/*Bonus Buttons End */
.membership_box { position:relative;
width:450px;
height:60px;
padding-left:5px;
}
.membership_box_logget { position:relative;
width:445px;
height:55px;
padding-left:10px;
padding-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#226a9b;
text-shadow: #000000 0px 1px 1px;
}
.logget_ll { font-size:10px; color:#52626e; margin-bottom:5px;text-shadow: #000000 0px 1px 2px;}
.membership_logget_links a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-decoration:none;
outline:none;
color:#8e2e11;
padding-right:10px;
}
.membership_logget_links a:hover { color:#9a4d36}
.username { background:url(../images/input_images/input_login_name_home.png);
background-repeat:no-repeat;
border:none;
width:171px; height:28px;
margin-top:6px;
padding-bottom:5px;
padding-left:5px;
}
.account_password { background:url(../images/input_images/input_login_password_home.png);
background-repeat:no-repeat;
border:none;
width:171px; height:28px;
margin-top:6px;
padding-bottom:5px;
padding-left:5px;
}
#input_text { font-family:Arial, Helvetica, sans-serif;
font-variant:small-caps;
font-size:14px;
color:#226a9b;
text-shadow: #000000 0px 0px 2px;
}
.login_button { position:absolute;
top:8px;
left:367px;
outline:none;
border:none;
}
.bonus_links { position:relative;
text-align:right;
padding-right:100px;
}
.bonus_links a { font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#133855;
text-shadow: #000000 0px 1px 1px;
text-decoration:none;
outline:none;
}
.bonus_links a:hover { color:#265b84}
.down_menu { position:relative;
text-align:center;
padding-right:40px;
margin-bottom:10px;
margin-top:10px;
}
.down_menu a { font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
text-decoration:none;
outline:none;
padding:2px;
}
.down_menu a:hover { color:#c93a0d;}
#gold_pixel { position:relative;
padding:2px;
}
/* BODY */
.body { position:relative;
width: 932px;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-bottom:30px;
right:20px;
}
.left_side { position:relative;
width:239px;
}
.right_side { position:relative;
width:675px;
}
.shoutbox { position:relative;
width:239px;
margin-bottom:5px;
}
.sb_up_place { position:relative;
background:url(../images/cont/shoubox_up_image.png);
width:239px;
height:189px;
margin:0px;
padding:0px;
}
.sb_messages_place { position:relative;
background:url(../images/cont/shoubox_repeat_image.png);
background-repeat:repeat;
width:239px;
margin:0px;
padding-top:5px;
padding-bottom:5px;
}
.sb_down_image { position:relative;
background:url(../images/cont/shoubox_down_image.png);
width:239px;
height:9px;
margin:0px;
padding:0px;
}
.sb_name { background:url(../images/input_images/shout_box_name_input.png);
background-repeat:no-repeat;
border:none;
width:83px; height:15px;
margin-top:32px;
margin-left:9px;
padding-left:50px;
padding-bottom:6px;
}
.sb_security { background:url(../images/input_images/shout_box_security_input.png);
background-repeat:no-repeat;
border:none;
width:89px; height:15px;
margin-top:3px;
margin-left:9px;
padding-left:62px;
padding-bottom:6px;
}
.sb_message { background:none;
background-color:none;
margin-top:19px;
margin-left:10px;
border:none;
width:218px; height:55px;
padding:2px;
padding-top:10px;
}
.sb_disabled { background:none;
border:none;
margin-left:10px;
margin-top:5px;
text-shadow: #000000 0px 0px 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#sb_text { font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-size:11px;
text-shadow: #000000 0px 1px 1px;
}
#sb_text1 { font-family:Arial, Helvetica, sans-serif;
color:#19486c;
font-size:13px;
font-variant:small-caps;
text-shadow: #000000 0px 1px 1px;
}
.sb_up_place a { font-family: Arial, Helvetica, sans-serif;
font-size:15px;
font-variant:small-caps;
text-decoration:none;
outline:none;
color:#CCCCCC;
text-shadow: #000000 0px 1px 1px;
}
.sb_up_place a:hover { color:#0099FF}
.message { position:relative;
padding:3px;
width:224px;
background:#080808;
margin-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#6e6e6e;
line-height: 3px;
padding-top:5px;
margin-top:7px;
}
.message_info { font-family:Arial, Helvetica, sans-serif;
line-height:100%;
font-size:10px;
color:#376974;
}
.daily_poll { position:relative;
width:239px;
margin-bottom:5px;
}
.dp_up { position:relative;
background:url(../images/cont/daily_poll_up_image.png);
width:239px;
height:31px;
font-family:Arial, Helvetica, sans-serif;
}
.dp_info_center_place { position:relative;
background:url(../images/cont/daily_poll_repeat_image.png);
width:225px;
padding-left:8px;
padding-right:6px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#184567;
text-shadow: #000000 1px 1px 1px;
}
.dp_end_image { position:relative;
background:url(../images/cont/daily_poll_down_image.png);
width:239px;
height:34px;
padding-top:15px;
}
.dp_radio {
}
.text_3 { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#736763;
text-shadow: #000000 1px 1px 1px;
font-weight:600;
}
.dp_end_image a { font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
outline:none;
text-shadow: #000000 1px 1px 1px;
color:#8d9296;
}
.dp_end_image a:hover { color:#CCCCCC;}
/* Right Bonus Table*/
.right_bonus_table {
}
.rb_up { position:relative;
background:url(../images/cont/right_bonus_table_up_image.png);
width:227px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#dedede;
text-shadow: #000000 1px 1px 1px;
font-variant:small-caps;
padding-left:12px;
padding-top:5px;
}
.rb_repeat { position:relative;
background:url(../images/cont/right_bonus_table_repeat_image.png);
width:219px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#999999;
font-weight:bold;
padding-left:10px;
padding-right:10px;
}
.rb_down_end { position:relative;
background:url(../images/cont/right_bonus_table_down_image.png);
width:239px;
height:10px;
font-family:Arial, Helvetica, sans-serif;
}
/* Right Bonus Table End*/
/* Latest News */
.latest_news { position:relative;
width:675px;
margin-bottom:10px;
margin-left:15px;
}
.ln_up { position:relative;
background:url(../images/cont/latest_news_table_up_image_v1.png);
width:668px;
height:29px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#898989;
text-shadow: #000000 1px 1px 1px;
padding-top:6px;
padding-right:7px;
}
.ln_repeat { position:relative;
background:url(../images/cont/latest_news_table_repeat_image.png);
width:655px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#636363;
text-shadow: #000000 1px 1px 1px;
padding-left:10px;
padding-right:10px;
}
.ln_end { position:relative;
background:url(../images/cont/latest_news_table_down_image.png);
width:675px;
height:11px;
}
.ln_links {
/* unvisited link */
text-decoration: underline;
font-weight: none;
font-style:italic;
color: #1c5476;
}
/* Latest News */
/* Sub Table */
.sup_table1 { position:relative;
width:675px;
margin-bottom:10px;
margin-left:15px;
}
.st_up { position:relative;
background:url(../images/cont/latest_news_table_up_image_v1.png);
width:668px;
height:29px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#898989;
text-shadow: #000000 1px 1px 1px;
padding-top:6px;
padding-right:7px;
}
.st_repeat { position:relative;
background:url(../images/cont/latest_news_table_repeat_image.png);
width:665px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#636363;
text-shadow: #000000 0px 0px 2px;
padding-left:5px;
padding-right:5px;
}
.st_end { position:relative;
background:url(../images/cont/latest_news_table_down_image.png);
width:675px;
height:11px;
}
/* Sub Table End */
/* Account Panel */
.acc_panel_manu { position:relative;
background:url(../images/in_sub_page_menu.png);
width:664px;
height:30px;
padding-top:11px;
}
.acc_panel_manu a { font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#CCCCCC;
text-decoration:none;
outline:none;
padding-right:0px;
}
.acc_panel_manu a:hover { color:#999999;}
.account_panel_options_table {padding:10px;}
.account_panel_options_table a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:100;
text-decoration:none;
outline:none;
color:#990000;
}
.account_panel_options_table a:hover { color:#333333}
.account_panel_inside_tittle { font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#CCCCCC;
margin-bottom:6px;
}
.account_panel_inside_info { font-family:Arial, Helvetica, sans-serif;
margin-bottom:2px;
}
.acp_option_title_info { position:relative;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#0d0d0d url(../images/table_background_rep.png) repeat-x top;
margin-bottom:10px;
padding-left:5px;
padding-top:10px;
border-bottom: solid 1px #1f1f1f;
border-left: solid 1px #1f1f1f;
border-right: solid 1px #1f1f1f;
}
#g_circ { position:relative;
padding-top:2px;
padding-right:2px;
padding-left:0px;
padding-bottom:2px;
}
/* Account Panel EnD */
/* BODY End */
/* Body Sub Page */
.body_sub { position:relative;
width: 932px;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-bottom:30px;
right:20px;
text-shadow: #FFFFFF 0px 1px 1px;
}
.body_sub_main_table { position:relative;
width:597px;
margin-bottom:60px;
}
.bsm_up_bar { position:relative;
background:url(../images/cont/sub_page_up_image.png);
width:547px;
height:78px;
padding-top:20px;
padding-left:50px;
}
.bsm_repeat_place { position:relative;
background:url(../images/cont/sub_page_repeat_image.png);
width:567px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:8px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#979797;
}
.bsm_end { position:relative;
background:url(../images/cont/sub_page_down_image.png);
width:597px;
height:45px;
}
.sub_page_ico{ position:relative;
background:url(../images/icons/ico_1.png);
width:50px;
height:72px;
float:left;
}
.page_title { position:relative;
width:256px;
height:49px;
float:left;
margin-top:15px;
}
.registration_info { position:relative;
background:#c7c7c7;
padding:7px;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow: #848484 1px 0px 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFFFFF;
font-weight:bold;
}
.registration_info a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#e33f0c;
font-weight:bold;
text-decoration:none;
outline:none;
}
.registration_info a:hover { color:#a83510;}
.registration_info_2 { position:relative;
background:#c7c7c7;
padding:7px;
margin-bottom:10px;
margin-top:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow: #848484 1px 0px 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#f1f1f1;
font-weight:bold;
}
.registration_info_2 a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#e33f0c;
font-weight:bold;
text-decoration:none;
outline:none;
}
.registration_info_2 a:hover { color:#a83510;}
.reg_username, .reg_sec_answ { background:url(../images/input_images/rr_input_1.png);
width:237px;
height:40px;
border:none;
padding:0px;
margin-bottom:5px;
padding-left:10px;
}
.reg_password { background:url(../images/input_images/rr_input_2.png);
width:209px;
height:40px;
border:none;
padding:0px;
margin-bottom:0px;
padding-left:10px;
}
.reg_email { background:url(../images/input_images/rr_input_3.png);
width:261px;
height:40px;
border:none;
padding:0px;
margin-bottom:5px;
padding-left:10px;
}
#regiter_input_text { font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
text-shadow: #000000 1px 0px 2px;
}
.reg_sec_answ { background:url(../images/input_images/rr_input_1.png);
width:237px;
height:40px;
border:none;
padding:0px;
margin-bottom:5px;
padding-left:10px;
}
.select { position: absolute;
width: 227px;
height: 30px;
padding: 10px 10px 0 10px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(../images/input_images/rr_input_drop.png);
overflow: hidden;
border:none;
text-shadow: #000000 0px 1px 1px;
}
.bsm_repeat_place a { outline:none;
}
/* Body Sub Page End */
/* Realms */
.realm_name_info { position:relative;
padding:10px;
}
#realm_name_rp { font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#CCCCCC;
text-shadow: #000000 0px 0px 2px;
padding-left:10px;
}
#realm_info_title { font-family:Arial, Helvetica, sans-serif;
color:#45647f;
font-size:11px;
padding-bottom:5px;
padding-left:10px;
}
.realm_information { position:relative;
padding:7px;
background:#000000;
-moz-border-radius:7px;
-webkit-border-radius:7px;
margin:5px;
}
.realm_full_information { position:relative;
padding:10px;
background:#000000;
-moz-border-radius:7px;
-webkit-border-radius:7px;
margin:5px;
}
.realm_name_fi { font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#CCCCCC;
text-shadow: #000000 0px 0px 2px;
padding-bottom:10px;
}
.realmstatus_fi { position:relative;
padding:5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background:#161616;
margin-bottom:8px;
}
.realm_info_fi { position:relative;
padding:5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background:#161616;
margin-bottom:8px;
}
/* REALMS End */
/* Archived News */
.months_bar { position:relative;
background:url(../images/center_archn_menu_big_bg.png);
width:919px;
height:52px;
margin-bottom:10px;
padding:5px;
}
.months_bar a { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:700; text-decoration:none; outline:none; padding:8px; text-shadow: #000000 0px 1px 1px; color:#CCCCCC;}
.months_bar a:hover { color:#4d6570; }
.big_sub_page_title { position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#4688a7;
text-shadow: #000000 0px 1px 1px;
}
.arch_news { position:relative;
width:675px;
margin-bottom:10px;
}
.arch_up { position:relative;
background:url(../images/cont/arch_news_up_image.png);
width:922px;
height:29px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#898989;
text-shadow: #000000 1px 1px 1px;
padding-top:6px;
padding-right:7px;
}
.arch_repeat { position:relative;
background:url(../images/cont/arch_news_repeat_image.png);
width:909px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#636363;
text-shadow: #000000 1px 1px 1px;
padding-left:10px;
padding-right:10px;
}
.arch_end { position:relative;
background:url(../images/cont/arch_news_down_image.png);
width:929px;
height:11px;
}
/* Archived News END */
/* Links */
Any help is much appreciated.