Thread: odd CSS problem

Here is a screen shor of the problem:

http://wimg.co.uk/cSXOsy.jpg

I'm trying to validate my site, which is no problem, until I get to the width attribute for the modules on the left.

If i set the width this way - width="231px" - it brings up validation errors with that. so then I change it to the style="width: 231px;" but then when i use that method, the validation error goes away but as i pointed out in the screenshot the box goes all werid and out of line when i use style="width: 231px;"

This has been baffling me for days now. I for one just cant seem to understand whats going on. Anyone got an idea? I know its the correct ways. but why the weird problems

post your code mate.... lets have another look

Revert both your header and footer template after saving any edits you have made to them ie. the templates youve edited will be highlighted red so save the content of the to notepad first. Re-apply the sidebar switch from right side to the left and it should work fine as long as the css is default for the sidebar section.

Reapply lost changes to header and footer from the saved docs carefully and it should be fine.

here you go:

Code:

<!-- logo -->
<a name="top"></a>
<div class="header">
 <div class="search">
     <form id="searchbox_008514742519005312674:stktp-0amaq" action="search.php" method="get">
      <input type="hidden" name="cx" value="008514742519005312674:stktp-0amaq" />
      <input type="hidden" name="cof" value="FORID:9" />
    <div class="searchtext">Search Zanokin</div>
    <div class="searchfield"><input name="q" type="text" class="search-quick" value="" /><input name="do" value="process" type="hidden" /></div>            
    <div class="searchfield"><input name="showposts" value="0" type="hidden" />
    <input name="s" value="" type="hidden" /><input src="images/colortheory/misc/gosearch.gif" type="image" /></div>
    </form>
 </div>
 <div id="logo1">
<a href="/index.php"><img src="/images/colortheory/misc/ffs.png" border="0" alt="Zanokin - Web Design and Development Forums" /></a>
</div>
</div>
<div class="navigationbar" align="left">
<!-- navigation in tabular format because vBulletin are lazy and haven't updated this code properly to meet standards and their plugins depend on this format -->
<!-- nav buttons bar -->
    <table cellpadding="0" cellspacing="0" border="0" class="navbr">
    <tr align="center">
        <td class="navigation"><a href="/index.php" accesskey="2">Home</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
        <if condition="$show['registerbutton']">
            <td class="navigation"><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
        </if>

<td class="navigation"><a href="/blog.php" accesskey="2">Blogs</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>

<td class="navigation"><a href="/video.php" accesskey="2">Videos</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>

<td class="navigation"><a href="/arcade.php" accesskey="2">Arcade</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>


        $template_hook[navbar_buttons_left]
        
<if condition="$show['communitylink'] AND $show['popups']">
            <td class="navigation"><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <script type="text/javascript"> vbmenu_register("community"); </script></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
        <else />
            <if condition="$vboptions['enablememberlist']">
                <td class="navigation"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
            </if>
            <if condition="$show['quick_links_groups']">
                <td class="navigation"><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
            </if>
    </if>


        <if condition="$show['popups']">
            <if condition="$show['searchbuttons']">
                <if condition="$show['member']">
                <td class="navigation"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
                <else />
                <td class="navigation"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
                </if>
<td class="navigation"><a rel="help" href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
<if condition="$show['member']">
        <td class="navigation"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
        </if>


                <td class="navigation"><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
            </if>
            <if condition="$show['member']">
                 <td class="navigation"><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
            </if>
        <else />
            <if condition="$show['searchbuttons']">
                <td class="navigation"><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
                <if condition="$show['member']">
                <td class="navigation"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
                <else />
                <td class="navigation"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
                </if>
            </if>
            <td class="navigation"><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td><td width="2" style="padding:0px;"><img src="images/colortheory/misc/navseperator.gif" alt="Nav Seperator" /></td>
            <if condition="$show['member']">
                <td class="navigation"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></td>
            </if>
        </if>
        $template_hook[navbar_buttons_right]
        <td width="25" style="padding:0px;"><img src="images/colortheory/misc/navigationrimg.gif" alt="Navigation Right" /></td>
        </tr>
    </table>
</div>
<!-- / nav buttons bar -->
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]</if>
<!-- /logo -->
<!-- content table -->
$spacer_open
$_phpinclude_output

$ad_location[ad_header_end]
<br />
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="231px" style="padding-right:13px;">
<!-- Sidebar Start -->
<div class="sidebar_tcat">
 <div class="sidebar_right">
    <a style="float:$stylevar[right];padding-right: 9px;" href="#top" onclick="return toggle_collapse('sidebar_login')"><img id="collapseimg_sidebar_login"    src="$stylevar[imgdir_button]/collapse_tcat_sb$vbcollapse[collapseimg_sidebar_login].gif" alt="" border="0" /></a>
  <div class="sidebar_left" style="width: 231px;">
<if condition="$show['guest']">Member Login<else />User Control Panel</if>
  </div>
 </div>
</div>
<table cellpadding="0" cellspacing="0" style="width:231px;">
<tbody id="collapseobj_sidebar_login" style="$vbcollapse[collapseobj_sidebar_login]">
<tr>
<td class="sidebar_alt" align="left" colspan="4"<if condition="$show['guest']"> style="width:206px;padding: 11px 4px;"<else /></if>
<if condition="$show['member']">
        <div class="smallfont">
            <strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong>
            <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

            <if condition="$show['notifications']">
                <div><span id="notifications"><a href="usercp.php?$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
                 <if condition="$show['popups']">
                <script type="text/javascript"> vBmenu.register("notifications"); </script>
            <else />
                <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
                <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>
            </if>
            <else /><if condition="$show['pmstats']">
                <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase><br />$vmoods</div>
            </if></if>
        
            <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
        </div>
        
    <else />
        
            
        <!-- login form -->

I don't know if you have already figured this out, but figured I'd post some thoughts in case someone else runs into this problem.

First off, I believe most browsers have problems when you mix the method of setting widths in tables: You are setting the width of the table to "100%" and then one of its TD's to "231px".

These problems and others like it are some of the reasons why CSS was advanced to move away from using tables.

My suggestion:
-convert your code to using an external file to handle all of your CSS and use classes (<div class="control_panel">,,,,</div>) to manage your items CSS.
-Move away (at least partially, if not fully) from using TABLEs and use DIVs instead.

It may seem more tedious to use DIVs instead of TABLEs, but you'd be surprised.
Plus you get far more control, and fewer browser compatibility issues.

Good luck!