SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with getting rounded corners to line up with table

    Hi,

    I'm currently designing my first vBulletin style for Talk Digital Design. If you create styles or themes for board software such as vBulletin then you'll know that they tend to use tables for layout purposes. I am not used to using tables for layout purposes, I'm used to semantic coding i.e. HTML for content, CSS for presentation, etc.

    So here I am sounding like a newbie - how do I get the rounded corners to line up with the table???

    To explain the problem, I am trying to get what I call an inner content container with rounded corners to appear around the forums tables, the navbar, forum stats, etc but the vBulletin copyright, footer, sidebar and header must appear outside of this container. I have six .gifs for the rounded corners shebang. But, the table and the rounded corners aren't lining up. The table containing the forums, navbar etc seems to be slightly wider than the tables containing the rounded corners even though I've tried to make sure they are the same size etc.

    As an example, look at the Applied Skin at eXtremepixels.com site. I checked the source and kind of figured out how it's done although I'm sure their method not the only way of achieving the same effect.

    Also see my screenshots to get an idea of what the problem is and what I'm trying to achieve.

    In the ACP, in the style manager I have the following set:

    HEADER

    HTML Code:
    <!-- tdd header -->
    <a name="top"></a>
    <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
    <tr id="header_background">
        <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
        <td align="$stylevar[right]" id="header_right_cell">
            <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
        </td>
    </tr>
    </table>
    <!-- /tdd header -->
    
    <!-- inner content container table begin -->
    <table border="0" width="100&#37;" cellpadding="5" cellspacing="0" bgcolor="#0f0f0f">
    <tr>
        <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
            <tr>
                <td width="14" align="left" valign="top"><img src="styles/tdd_v1/images/misc/tdd_inner_content_container_top_left.gif" width="14" height="10" alt="" /></td>
                <td width="100%" align="left" valign="top"><img src="styles/tdd_v1/images/misc/tdd_inner_content_container_top_expand.gif" width="100%" height="10" alt="" /></td>
                <td width="14" align="left" valign="top"><img src="styles/tdd_v1/images/misc/tdd_inner_content_container_top_right.gif" width="14" height="10" alt="" /></td>
            </tr>
            </table>
    <!-- /inner content container table begin -->
    
    <!-- content table -->
    $spacer_open
    
    $_phpinclude_output
    
    $ad_location[ad_header_end][
    FOOTER

    HTML Code:
    <br />
    <div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
    <br />
    
    $spacer_close
    <!-- /content table -->
    
    <form action="$vboptions[forumhome].php" method="get">
    
    <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
    <tr>
        <if condition="$show['quickchooser']">
            <td class="tfoot">
                <select name="styleid" onchange="switch_id(this, 'style')">
                    <optgroup label="$vbphrase[quick_style_chooser]">
                        $quickchooserbits
                    </optgroup>
                </select>
            </td>
        </if>
        <if condition="$show['languagechooser']">
            <td class="tfoot">
                <select name="langid" onchange="switch_id(this, 'lang')">
                    <optgroup label="$vbphrase[quick_language_chooser]">
                        $languagechooserbits
                    </optgroup>
                </select>
            </td>
        </if>
        <td class="tfoot" align="$stylevar[right]" width="100%">
            <div class="smallfont">
                <strong>
                    <if condition="$show['contactus']"><a href="$vboptions[contactuslink]" rel="nofollow" accesskey="9">$vbphrase[contact_us]</a> -</if>
                    <if condition="$vboptions['hometitle']"><a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -</if>
                    <if condition="$show['admincplink']"><a href="$admincpdir/index.php$session[sessionurl_q]">$vbphrase[admin]</a> -</if>
                    <if condition="$show['modcplink']"><a href="$modcpdir/index.php$session[sessionurl_q]">$vbphrase[mod]</a> -</if>
                    <if condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>
                    $template_hook[footer_links]
                    <if condition="$vboptions[privacyurl]"><a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> -</if>
                    <a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>
                </strong>
            </div>
        </td>
    </tr>
    </table>
    
    <!-- inner content container table end -->
            <table width="100%"  border="0" cellpadding="5" cellspacing="0" bgcolor="#000000">
            <tr>
                <td width="14" align="left"><img src="styles/tdd_v1/images/misc/tdd_inner_content_container_bottom_left.gif" width="14" height="10" alt="" /></td>
                <td width="100%" align="left"><img src="styles/tdd_v1/images/misc/tdd_inner_content_container_bottom_expand.gif" width="100%" height="10" alt="" /></td>
                <td width="14" align="left"><img src="styles/tdd_v1/images/misc/tdd_inner_content_container_bottom_right.gif" width="14" height="10" alt="" /></td>
            </tr>
            </table>
        </td>
    </tr>
    </table>
    <!-- /inner content container table end -->
    
    <br />
    
    <div align="center">
        <div class="smallfont" align="center">
        <!-- Do not remove this copyright notice -->
        $vbphrase[powered_by_vbulletin]
        <!-- Do not remove this copyright notice -->
        </div>
    
        <div class="smallfont" align="center">
        <!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
        $cronimage
        <!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
    
        $vboptions[copyrighttext]
        </div>
    </div>
    
    </form>
    
    <if condition="$show['dst_correction']">
    <!-- auto DST correction code -->
    <form action="profile.php?do=dst" method="post" name="dstform">
        <input type="hidden" name="s" value="$session[sessionhash]" />
        <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
        <input type="hidden" name="do" value="dst" />
    </form>
    <script type="text/javascript">
    <!--
        var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
        var utcOffset = new Date().getTimezoneOffset() / 60;
        if (Math.abs(tzOffset + utcOffset) == 1)
        {    // Dst offset is 1 so its changed
            document.forms.dstform.submit();
        }
    //-->
    </script>
    <!-- / auto DST correction code -->
    
    </if>
    <script type="text/javascript">
    <!--
        // Main vBulletin Javascript Initialization
        vBulletin_init();
    //-->
    </script>
    I'm currently using the latest version of Opera and Firefox.

    Any suggestions about how to fix the problem? Normally I would fiddle with the CSS but seeing that the whole thing relies on the use of tables it's become quite confusing for me.
    Attached Images Attached Images
    Last edited by happyoink; Jul 29, 2008 at 07:11.

  2. #2
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No solution?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •