header div problem

[Ronan]

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> &nbsp;&nbsp;
<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> &nbsp;&nbsp; </if>
<a href="usercp.php$session[sessionurl_q]" rel="nofollow">USER CP</a> &nbsp; &nbsp;
<a href="memberlist.php$session[sessionurl_q]" rel="nofollow">MEMBERS</a> &nbsp;&nbsp;
<if condition="$show['registerbutton']"><a href="register.php$session[sessionurl_q]" rel="nofollow">REGISTER</a> &nbsp;&nbsp;</if>
<a href="search.php$session[sessionurl_q]" rel="nofollow">SEARCH</a> &nbsp; &nbsp;
<a href="search.php?do=getnew$session[sessionurl_q]" rel="nofollow">NEW POSTS</a>&nbsp;&nbsp;
<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

[Jake Bunce]

It is clearly a layout problem of some kind, but I am unable to find the exact cause. If no one else here is able to help you then I recommend you either contact the author of the style or post on www.vbulletin.org.

[Lynne]

If you put this in the html tag, it is easier to see that your div tags do not add up. You've got two div start tags right under the "<td align="$stylevar[left]">" tag and then three div end tags right before the "<br />" tag. I'd suggest putting the template into an html editor and matching tags.

<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> &nbsp;&nbsp;
<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> &nbsp;&nbsp; </if>
        <a href="usercp.php$session[sessionurl_q]" rel="nofollow">USER CP</a> &nbsp; &nbsp;
        <a href="memberlist.php$session[sessionurl_q]" rel="nofollow">MEMBERS</a> &nbsp;&nbsp; 
<if condition="$show['registerbutton']"><a href="register.php$session[sessionurl_q]" rel="nofollow">REGISTER</a> &nbsp;&nbsp;</if>
        <a href="search.php$session[sessionurl_q]" rel="nofollow">SEARCH</a> &nbsp; &nbsp;
        <a href="search.php?do=getnew$session[sessionurl_q]" rel="nofollow">NEW POSTS</a>&nbsp;&nbsp;
        <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 -->

[Selrion]

I don't think it's a header problem. Header code looks good. Try to search a navbar template...