Hi,
I'm running a skin on my forum and am having a problem with the header. If you look at http://www.ps3-leagues.co.uk/forum/ you will be able to scroll to the right which should not be happening. For some reason the header background image is continuing on a bit.
I thought the header div width would be causing the problem but now im not sure. The top of the site is made of 3 separate images. The background image which stretches the whole way across, the logo is an image floated to the left and again another image which is floated to the right which gives the effect of a rectangular box. If the image which is floated to the right is stopping where it should be i dont understand why the background image continues to stretch.
Here is the header code:
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]">
<div class="header">
<div class="navigation">
<a href="../forum/$session[sessionurl_q]">PS3 FORUM</a>
<if condition="$show['member']"><span id="usercptools"><a href="$show[nojs_link]#usercptools" rel="nofollow">QUICKLINKS</a>
<script type="text/javascript"> vbmenu_register("usercptools", true); </script></span> </if>
<a href="usercp.php$session[sessionurl_q]" rel="nofollow">USER CP</a>
<a href="memberlist.php$session[sessionurl_q]" rel="nofollow">MEMBERS</a>
<if condition="$show['registerbutton']"><a href="register.php$session[sessionurl_q]" rel="nofollow">REGISTER</a> </if>
<a href="search.php$session[sessionurl_q]" rel="nofollow">SEARCH</a>
<a href="search.php?do=getnew$session[sessionurl_q]" rel="nofollow">NEW POSTS</a>
<a href="arcade.php?$session[sessionurl_q]">ARCADE</a>
</div>
<img class="floatright" src="images/styles/soness/style/ps3_logo_2.jpg" alt="">
</div>
</div>
<br />
<!-- content table -->
<div align="center">
<div style="width:$stylevar[outerdivwidth]; text-align:$stylevar[left]">
<div class="page" style="margin: 0px $stylevar[spacersize]px 0px $stylevar[spacersize]px; padding:5px">
<div><span style="float:right"><img class="page_corner_tr" src="images/styles/soness/style/page_corner_tr.gif" alt="" border="0" /></span><img class="page_corner_tl" src="images/styles/soness/style/page_corner_tl.gif" alt="" border="0" /></div>
$_phpinclude_output
<!-- Left Column Code -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="200" valign="top" align="left">$leftcolumn</td>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td valign="top">
<!-- End Left Column Code -->
and the css layout code is:
.header
{
background-image: url(images/styles/soness/style/ps3_logo.jpg);
background-repeat: no-repeat; background-position: top left;
height: 150px;
}
.floatright
{
float:right;
height: 150px;
}
.logo
{
padding: 16px 40px 20px 40px;
}
.navigation
{
width: 100%;
position: absolute;
top: 17px; left: 90px;
}
Can anyone see where im going wrong?
Thanks
I'm running a skin on my forum and am having a problem with the header. If you look at http://www.ps3-leagues.co.uk/forum/ you will be able to scroll to the right which should not be happening. For some reason the header background image is continuing on a bit.
I thought the header div width would be causing the problem but now im not sure. The top of the site is made of 3 separate images. The background image which stretches the whole way across, the logo is an image floated to the left and again another image which is floated to the right which gives the effect of a rectangular box. If the image which is floated to the right is stopping where it should be i dont understand why the background image continues to stretch.
Here is the header code:
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]">
<div class="header">
<div class="navigation">
<a href="../forum/$session[sessionurl_q]">PS3 FORUM</a>
<if condition="$show['member']"><span id="usercptools"><a href="$show[nojs_link]#usercptools" rel="nofollow">QUICKLINKS</a>
<script type="text/javascript"> vbmenu_register("usercptools", true); </script></span> </if>
<a href="usercp.php$session[sessionurl_q]" rel="nofollow">USER CP</a>
<a href="memberlist.php$session[sessionurl_q]" rel="nofollow">MEMBERS</a>
<if condition="$show['registerbutton']"><a href="register.php$session[sessionurl_q]" rel="nofollow">REGISTER</a> </if>
<a href="search.php$session[sessionurl_q]" rel="nofollow">SEARCH</a>
<a href="search.php?do=getnew$session[sessionurl_q]" rel="nofollow">NEW POSTS</a>
<a href="arcade.php?$session[sessionurl_q]">ARCADE</a>
</div>
<img class="floatright" src="images/styles/soness/style/ps3_logo_2.jpg" alt="">
</div>
</div>
<br />
<!-- content table -->
<div align="center">
<div style="width:$stylevar[outerdivwidth]; text-align:$stylevar[left]">
<div class="page" style="margin: 0px $stylevar[spacersize]px 0px $stylevar[spacersize]px; padding:5px">
<div><span style="float:right"><img class="page_corner_tr" src="images/styles/soness/style/page_corner_tr.gif" alt="" border="0" /></span><img class="page_corner_tl" src="images/styles/soness/style/page_corner_tl.gif" alt="" border="0" /></div>
$_phpinclude_output
<!-- Left Column Code -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="200" valign="top" align="left">$leftcolumn</td>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td valign="top">
<!-- End Left Column Code -->
and the css layout code is:
.header
{
background-image: url(images/styles/soness/style/ps3_logo.jpg);
background-repeat: no-repeat; background-position: top left;
height: 150px;
}
.floatright
{
float:right;
height: 150px;
}
.logo
{
padding: 16px 40px 20px 40px;
}
.navigation
{
width: 100%;
position: absolute;
top: 17px; left: 90px;
}
Can anyone see where im going wrong?
Thanks
Comment