Results 1 to 5 of 5

Thread: odd CSS problem

  1. #1
    Member Stormraven's Avatar
    Join Date
    Dec 2008
    Posts
    62

    Default odd CSS problem 1 Feb 2009 @ 00.22

    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
      Reply With Quote

  2. #2
    Trusted Guru saltedm8's Avatar
    Join Date
    Jun 2011
    Posts
    1,969
    Blog Entries
    3

    Default 1 Feb 2009 @ 00.25

    post your code mate.... lets have another look
      Reply With Quote

  3. #3
    Elite Member Michael's Avatar
    Join Date
    Jan 2009
    Posts
    1,081

    Default 1 Feb 2009 @ 00.26

    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.
      Reply With Quote

  4. #4
    Member Stormraven's Avatar
    Join Date
    Dec 2008
    Posts
    62

    Default 1 Feb 2009 @ 00.28

    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 -->
      Reply With Quote

  5. #5
    Junior Member swafo's Avatar
    Join Date
    Feb 2009
    Posts
    2

    Default Suggestion 1 Feb 2009 @ 11.46

    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!
      Reply With Quote

Similar Threads

  1. Help with div problem
    By Michael in forum Design & Layout
    Replies: 6
    Last Post: 7 Apr 2010, @ 06.10
  2. Overspill of DIV problem in IE & 7
    By craigj1303 in forum Computer Hardware & Software
    Replies: 2
    Last Post: 18 Mar 2010, @ 21.22
  3. CSS problem please help
    By Michael in forum HTML & CSS
    Replies: 5
    Last Post: 17 Dec 2009, @ 23.15
  4. CSS problem with Scroll Bar
    By Wrams in forum HTML & CSS
    Replies: 3
    Last Post: 4 Sep 2009, @ 23.42
  5. CSS problem in Vista
    By A800 in forum HTML & CSS
    Replies: 11
    Last Post: 12 Mar 2009, @ 12.58

Tags for this Thread

Posting Permissions

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