Masked Crusader
03-23-2008, 10:25 PM
*NOTE: I do know this is not related to vbulletin, but I believe that this is a CSS/HTML issue and not having anything to do with the EQDKP coding.*
Alright, see if I can explain the issue here.
I am using a custom header for my EQDKP pages. I have altered the page_header.html.
If you go to http://www.diversionguild.com/eqdkp/listmembers.php , you will see that the image in the top left has some padding or other crap around it. I cannot seem to get it to align in that top left-hand corner.
Here is the code for my page_header.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={ENCODING}" />
{META}
<title>Erus Proeliator - DKP Standings</title>
<script LANGUAGE="JavaScript" SRC="/hover.js">
</SCRIPT>
<style type="text/css">
form { display: inline; }
img { vertical-align: middle; border: 0px; }
BODY {
position: relative;
font-family: {T_FONTFACE1};
font-size: {T_FONTSIZE2}px;
color: #{T_FONTCOLOR1};
background-color: #{T_BODY_BACKGROUND};
background-attachment: scroll;
background-image: url(/fp_images/header_bg.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}
TABLE {
border-top: {T_TABLE_BORDER_WIDTH}px;
border-right: {T_TABLE_BORDER_WIDTH}px;
border-bottom: {T_TABLE_BORDER_WIDTH}px;
border-left: {T_TABLE_BORDER_WIDTH}px;
border-color: #{T_TABLE_BORDER_COLOR};
border-style: {T_TABLE_BORDER_STYLE};
}
TABLE.borderless {
border-style: none;
}
TABLE.noborders {
border-top: none;
position: relative;
border-right: none;
border-bottom: none;
border-left: none;
border-style: none;
}
th {
font-weight: bold;
color: #{T_HEADER_LINK};
background-color: #{T_TH_COLOR1};
white-space: nowrap;
}
tr, td {
font-family: {T_FONTFACE1};
font-size: {T_FONTSIZE2}px;
color: #{T_FONTCOLOR1};
}
a:link, a:visited, a:active {
text-decoration: {T_BODY_LINK_STYLE};
color: #{T_BODY_LINK};
}
a:hover {
text-decoration: {T_BODY_HLINK_STYLE};
color: #{T_BODY_HLINK};
}
th a:link, th a:visited, th a:active { text-decoration: {T_HEADER_LINK_STYLE}; color: #{T_HEADER_LINK}; font-weight: bold; }
th a:hover { text-decoration: {T_HEADER_HLINK_STYLE}; color: #{T_HEADER_HLINK}; font-weight: bold; }
th.smalltitle { font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; white-space: nowrap; font-size: {T_FONTSIZE1}px; }
th.smalltitle a:link, th.smalltitle a:visited, th.smalltitle a:active { text-decoration: {T_HEADER_LINK_STYLE}; color: #{T_HEADER_LINK}; font-weight: bold; font-size: {T_FONTSIZE1}px; }
th.smalltitle a:hover { color: #{T_HEADER_HLINK}; font-weight: bold; font-size: {T_FONTSIZE1}px; text-decoration: {T_HEADER_HLINK_STYLE}; }
th.footer { color: #{T_HEADER_LINK}; text-align: right; background-color: #{T_TH_COLOR1}; white-space: nowrap; font-weight: normal; }
th.footer a:link, th.footer a:visited, th.footer a:active { color: #{T_HEADER_LINK}; text-decoration: {T_HEADER_LINK_STYLE}; font-weight: normal; }
th.footer a:hover { color: #{T_HEADER_HLINK}; text-decoration: {T_HEADER_HLINK_STYLE}; font-weight: normal; }
.row1 { background-color: #{T_TR_COLOR1}; }
.row2 { background-color: #{T_TR_COLOR2}; }
.quote1 { background-color: #{T_TR_COLOR2}; font-size: {T_FONTSIZE2}px; line-height: 125%; }
.quote2 { background-color: #{T_TR_COLOR1}; font-size: {T_FONTSIZE2}px; line-height: 125%; }
.positive { color: #{T_FONTCOLOR_POS}; }
.negative { color: #{T_FONTCOLOR_NEG}; }
.neutral { color: #{T_FONTCOLOR1}; }
.maintitle { font-size: 18px; font-weight: bold; color: #{T_FONTCOLOR2}; }
.subtitle { font-size: 12px; color: #{T_FONTCOLOR2}; }
.menu { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.menu a:link, .menu a:active, .menu a:visited { text-decoration: none; font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.menu a:hover { text-decoration: underline; font-size: {T_FONTSIZE1}px; color: #{T_HEADER_HLINK}; }
.small { font-size: {T_FONTSIZE1}px; }
.copy { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.copy a:link, .copy a:active, .copy a:visited { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.copy a:hover { font-size: {T_FONTSIZE1}px; color: #{T_HEADER_HLINK}; }
.input {
font-family: {T_FONTFACE2};
font-size: {T_FONTSIZE1}px;
color: #{T_FONTCOLOR3};
background-color: #{T_INPUT_BACKGROUND};
border-top: {T_INPUT_BORDER_WIDTH}px;
border-right: {T_INPUT_BORDER_WIDTH}px;
border-bottom: {T_INPUT_BORDER_WIDTH}px;
border-left: {T_INPUT_BORDER_WIDTH}px;
border-color: #{T_INPUT_BORDER_COLOR};
border-style: {T_INPUT_BORDER_STYLE}; }
input.helpline1 { background-color: #{T_TR_COLOR1}; border-style: none; }
input.helpline2 { background-color: #{T_TR_COLOR2}; border-style: none; }
input.mainoption { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; border-top: {T_INPUT_BORDER_WIDTH}px;
border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_HEADER_LINK}; border-style: {T_INPUT_BORDER_STYLE}; }
input.liteoption { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; font-weight: normal; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; border-top: {T_INPUT_BORDER_WIDTH}px;
border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_HEADER_LINK}; border-style: {T_INPUT_BORDER_STYLE}; }
{EXTRA_CSS}
</style>
</head>
<body class="lightbg" onLoad="MM_preloadImages('fp_images/hover_frontpage.gif','fp_images/hover_forums.gif','fp_images/hover_dkp.gif','fp_images/hover_recruitment.gif','fp_images/hover_user.gif','fp_images/hover_register.gif')">
<table border="0" width="100%" style="height: 100%;" cellspacing="0" cellpadding="0" class="borderless">
<tr>
<td style="height: 270px;" align="left" valign="top">
<div style="position: absolute; width: 466px; z-index: 3; height: 227px">
<div id="navcontainer">
<a href="/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','/fp_images/hover_frontpage.gif',1)"><img src="/fp_images/nohover_frontpage.gif" name="Image2" width="76" height="27" border="0" /></a><a href="/forumlist.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','/fp_images/hover_forums.gif',1)"><img src="/fp_images/nohover_forums.gif" name="Image3" width="67" height="27" border="0" /></a><a href="/eqdkp/listmembers.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','/fp_images/hover_dkp.gif',1)"><img src="/fp_images/nohover_dkp.gif" name="Image4" width="99" height="27" border="0" /></a><a href="/forumdisplay.php?f=6" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','/fp_images/hover_recruitment.gif',1)"><img src="/fp_images/nohover_recruitment.gif" name="Image5" width="89" height="27" border="0" /></a><a href="/usercp.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','/fp_images/hover_user.gif',1)"><img src="/fp_images/nohover_user.gif" name="Image6" width="73" height="27" border="0" /></a><a href="/register.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','/fp_images/hover_register.gif',1)"><img src="/fp_images/nohover_register.gif" name="Image7" width="61" height="27" border="0" /></a><img src="/fp_images/guild_name.gif" width="465" height="227" /></div>
</div>
</td>
</tr>
</table>
<!-- IF S_NORMAL_HEADER -->
<table width="100%" border="0" cellspacing="1" cellpadding="2" class="borderless">
<tr>
<td width="100%">
<center>
<span class="menu">
{MAIN_MENU1} | {MAIN_MENU2}
</span></center>
</td>
</tr>
</table>
<br />
<!-- IF S_IN_ADMIN -->
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="borderless">
<tr>
<td width="175" valign="top" nowrap="nowrap">
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<th class="smalltitle" align="center">{L_ADMINISTRATION}</th>
</tr>
<tr>
<td class="row1"> <img src="{EQDKP_ROOT_PATH}images/arrow.gif" alt="arrow" /> <a href="index.php{SID}">{L_ADMIN_INDEX}</a></td>
</tr>
<tr>
<td class="row2"> <img src="{EQDKP_ROOT_PATH}images/arrow.gif" alt="arrow" /> <a href="{EQDKP_ROOT_PATH}{SID}">{L_EQDKP_INDEX}</a></td>
</tr>
<!-- BEGIN header_row -->
<tr>
<th align="left" class="smalltitle">{header_row.HEADER}</th>
</tr>
<!-- BEGIN menu_row -->
<tr>
<td class="{header_row.menu_row.ROW_CLASS}"> <img src="{EQDKP_ROOT_PATH}images/arrow.gif" alt="arrow" /> {header_row.menu_row.LINK}</td>
</tr>
<!-- END menu_row -->
<!-- END header_row -->
</table>
</td>
<td width="100%" valign="top">
<!-- ENDIF -->
<!-- ENDIF -->
Any idea where the problem is?
Thanks for your help.
Alright, see if I can explain the issue here.
I am using a custom header for my EQDKP pages. I have altered the page_header.html.
If you go to http://www.diversionguild.com/eqdkp/listmembers.php , you will see that the image in the top left has some padding or other crap around it. I cannot seem to get it to align in that top left-hand corner.
Here is the code for my page_header.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={ENCODING}" />
{META}
<title>Erus Proeliator - DKP Standings</title>
<script LANGUAGE="JavaScript" SRC="/hover.js">
</SCRIPT>
<style type="text/css">
form { display: inline; }
img { vertical-align: middle; border: 0px; }
BODY {
position: relative;
font-family: {T_FONTFACE1};
font-size: {T_FONTSIZE2}px;
color: #{T_FONTCOLOR1};
background-color: #{T_BODY_BACKGROUND};
background-attachment: scroll;
background-image: url(/fp_images/header_bg.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}
TABLE {
border-top: {T_TABLE_BORDER_WIDTH}px;
border-right: {T_TABLE_BORDER_WIDTH}px;
border-bottom: {T_TABLE_BORDER_WIDTH}px;
border-left: {T_TABLE_BORDER_WIDTH}px;
border-color: #{T_TABLE_BORDER_COLOR};
border-style: {T_TABLE_BORDER_STYLE};
}
TABLE.borderless {
border-style: none;
}
TABLE.noborders {
border-top: none;
position: relative;
border-right: none;
border-bottom: none;
border-left: none;
border-style: none;
}
th {
font-weight: bold;
color: #{T_HEADER_LINK};
background-color: #{T_TH_COLOR1};
white-space: nowrap;
}
tr, td {
font-family: {T_FONTFACE1};
font-size: {T_FONTSIZE2}px;
color: #{T_FONTCOLOR1};
}
a:link, a:visited, a:active {
text-decoration: {T_BODY_LINK_STYLE};
color: #{T_BODY_LINK};
}
a:hover {
text-decoration: {T_BODY_HLINK_STYLE};
color: #{T_BODY_HLINK};
}
th a:link, th a:visited, th a:active { text-decoration: {T_HEADER_LINK_STYLE}; color: #{T_HEADER_LINK}; font-weight: bold; }
th a:hover { text-decoration: {T_HEADER_HLINK_STYLE}; color: #{T_HEADER_HLINK}; font-weight: bold; }
th.smalltitle { font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; white-space: nowrap; font-size: {T_FONTSIZE1}px; }
th.smalltitle a:link, th.smalltitle a:visited, th.smalltitle a:active { text-decoration: {T_HEADER_LINK_STYLE}; color: #{T_HEADER_LINK}; font-weight: bold; font-size: {T_FONTSIZE1}px; }
th.smalltitle a:hover { color: #{T_HEADER_HLINK}; font-weight: bold; font-size: {T_FONTSIZE1}px; text-decoration: {T_HEADER_HLINK_STYLE}; }
th.footer { color: #{T_HEADER_LINK}; text-align: right; background-color: #{T_TH_COLOR1}; white-space: nowrap; font-weight: normal; }
th.footer a:link, th.footer a:visited, th.footer a:active { color: #{T_HEADER_LINK}; text-decoration: {T_HEADER_LINK_STYLE}; font-weight: normal; }
th.footer a:hover { color: #{T_HEADER_HLINK}; text-decoration: {T_HEADER_HLINK_STYLE}; font-weight: normal; }
.row1 { background-color: #{T_TR_COLOR1}; }
.row2 { background-color: #{T_TR_COLOR2}; }
.quote1 { background-color: #{T_TR_COLOR2}; font-size: {T_FONTSIZE2}px; line-height: 125%; }
.quote2 { background-color: #{T_TR_COLOR1}; font-size: {T_FONTSIZE2}px; line-height: 125%; }
.positive { color: #{T_FONTCOLOR_POS}; }
.negative { color: #{T_FONTCOLOR_NEG}; }
.neutral { color: #{T_FONTCOLOR1}; }
.maintitle { font-size: 18px; font-weight: bold; color: #{T_FONTCOLOR2}; }
.subtitle { font-size: 12px; color: #{T_FONTCOLOR2}; }
.menu { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.menu a:link, .menu a:active, .menu a:visited { text-decoration: none; font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.menu a:hover { text-decoration: underline; font-size: {T_FONTSIZE1}px; color: #{T_HEADER_HLINK}; }
.small { font-size: {T_FONTSIZE1}px; }
.copy { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.copy a:link, .copy a:active, .copy a:visited { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.copy a:hover { font-size: {T_FONTSIZE1}px; color: #{T_HEADER_HLINK}; }
.input {
font-family: {T_FONTFACE2};
font-size: {T_FONTSIZE1}px;
color: #{T_FONTCOLOR3};
background-color: #{T_INPUT_BACKGROUND};
border-top: {T_INPUT_BORDER_WIDTH}px;
border-right: {T_INPUT_BORDER_WIDTH}px;
border-bottom: {T_INPUT_BORDER_WIDTH}px;
border-left: {T_INPUT_BORDER_WIDTH}px;
border-color: #{T_INPUT_BORDER_COLOR};
border-style: {T_INPUT_BORDER_STYLE}; }
input.helpline1 { background-color: #{T_TR_COLOR1}; border-style: none; }
input.helpline2 { background-color: #{T_TR_COLOR2}; border-style: none; }
input.mainoption { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; border-top: {T_INPUT_BORDER_WIDTH}px;
border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_HEADER_LINK}; border-style: {T_INPUT_BORDER_STYLE}; }
input.liteoption { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; font-weight: normal; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; border-top: {T_INPUT_BORDER_WIDTH}px;
border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_HEADER_LINK}; border-style: {T_INPUT_BORDER_STYLE}; }
{EXTRA_CSS}
</style>
</head>
<body class="lightbg" onLoad="MM_preloadImages('fp_images/hover_frontpage.gif','fp_images/hover_forums.gif','fp_images/hover_dkp.gif','fp_images/hover_recruitment.gif','fp_images/hover_user.gif','fp_images/hover_register.gif')">
<table border="0" width="100%" style="height: 100%;" cellspacing="0" cellpadding="0" class="borderless">
<tr>
<td style="height: 270px;" align="left" valign="top">
<div style="position: absolute; width: 466px; z-index: 3; height: 227px">
<div id="navcontainer">
<a href="/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','/fp_images/hover_frontpage.gif',1)"><img src="/fp_images/nohover_frontpage.gif" name="Image2" width="76" height="27" border="0" /></a><a href="/forumlist.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','/fp_images/hover_forums.gif',1)"><img src="/fp_images/nohover_forums.gif" name="Image3" width="67" height="27" border="0" /></a><a href="/eqdkp/listmembers.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','/fp_images/hover_dkp.gif',1)"><img src="/fp_images/nohover_dkp.gif" name="Image4" width="99" height="27" border="0" /></a><a href="/forumdisplay.php?f=6" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','/fp_images/hover_recruitment.gif',1)"><img src="/fp_images/nohover_recruitment.gif" name="Image5" width="89" height="27" border="0" /></a><a href="/usercp.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','/fp_images/hover_user.gif',1)"><img src="/fp_images/nohover_user.gif" name="Image6" width="73" height="27" border="0" /></a><a href="/register.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','/fp_images/hover_register.gif',1)"><img src="/fp_images/nohover_register.gif" name="Image7" width="61" height="27" border="0" /></a><img src="/fp_images/guild_name.gif" width="465" height="227" /></div>
</div>
</td>
</tr>
</table>
<!-- IF S_NORMAL_HEADER -->
<table width="100%" border="0" cellspacing="1" cellpadding="2" class="borderless">
<tr>
<td width="100%">
<center>
<span class="menu">
{MAIN_MENU1} | {MAIN_MENU2}
</span></center>
</td>
</tr>
</table>
<br />
<!-- IF S_IN_ADMIN -->
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="borderless">
<tr>
<td width="175" valign="top" nowrap="nowrap">
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<th class="smalltitle" align="center">{L_ADMINISTRATION}</th>
</tr>
<tr>
<td class="row1"> <img src="{EQDKP_ROOT_PATH}images/arrow.gif" alt="arrow" /> <a href="index.php{SID}">{L_ADMIN_INDEX}</a></td>
</tr>
<tr>
<td class="row2"> <img src="{EQDKP_ROOT_PATH}images/arrow.gif" alt="arrow" /> <a href="{EQDKP_ROOT_PATH}{SID}">{L_EQDKP_INDEX}</a></td>
</tr>
<!-- BEGIN header_row -->
<tr>
<th align="left" class="smalltitle">{header_row.HEADER}</th>
</tr>
<!-- BEGIN menu_row -->
<tr>
<td class="{header_row.menu_row.ROW_CLASS}"> <img src="{EQDKP_ROOT_PATH}images/arrow.gif" alt="arrow" /> {header_row.menu_row.LINK}</td>
</tr>
<!-- END menu_row -->
<!-- END header_row -->
</table>
</td>
<td width="100%" valign="top">
<!-- ENDIF -->
<!-- ENDIF -->
Any idea where the problem is?
Thanks for your help.