Hi my header for http://www.physicsforums.com/index.php is broken when viewing with XP/IE. attached is what it looks like. with all other OS and browsers it looks fine. what do you think the problem is? thanks!
Well... that page is painfully broken across multiple browsers for a whole host of reasons -- one fo the biggest being the endless pointless redundant and useless tables for nothing... but that's really just the tip of the iceberg for issues... 100% TD + two other TD > 100%... presentational images inlined in the markup, floated DIV of widths that won't FIT inside that TD... I mean seriously, you've got three float:right DIV that are 50% -- do the math. 150% isn't gonna fit. From top to bottom it's a laundry list of how not to build a website -- though being vBull this is hardly a shock... Part of why I laugh at the horifically outdated and half-assed idiocy of 91k of endless nested tables to deliver 7.23k of plaintext and no real content images; easily five to eight times as much HTML as should be necessary. None of the browsers here are rendering this even close to useful or what I'd call unbroken, so I can't even weigh in on what the code should be... but first I'd suggest moving the breadcrumbs OUT of the logo area as there's not really room for them there... Just to give you an example of what I mean -- the code in question, where you have this eye gougingly bad decade and a half out of date code: <table width='100%' border='0' cellpadding='0' cellspacing='0'> <tr> <td><table width='100%' border='0' cellpadding='0' cellspacing='0' background="http://physicsforums.bernhardtmediall.netdna-cdn.com/Prime/theme/hd/Prime_HD_03.gif"> <tr> <td><table width='100%' border='0' cellpadding='0' cellspacing='0'> <tr> <td><img src="http://physicsforums.bernhardtmediall.netdna-cdn.com/Prime/theme/hd/Prime_HD_01.gif" width='26' height='95' alt="image" /></td> <td width="100%"><div style="float:right; width:50%;"><a href="http://www.physicsforums.com"><img src="http://physicsforums.bernhardtmediall.netdna-cdn.com/Prime/theme/physics_forums_logo.png" alt="Physics Forums Logo" border='0' /></a></div> <div style="float:right; width:50%;"> <!-- breadcrumb, login, pm info --> <!-- google_ad_section_start(weight=ignore) --> <br /><br /> <table cellpadding="6" cellspacing="1" border="0" width="100%" align="center"> <tr> <td width="100%"> <div class="navbar" style="font-size:10pt"><a href="index.php" accesskey="1"><img class="inlineimg" src="http://physicsforums.bernhardtmediall.netdna-cdn.com/Nexus/misc/navbits_start.gif" width="15" height="15" alt="" border="0" /></a> <h1>Physics Forums</h1> </div> </td> </tr> </table> <!-- / breadcrumb, login, pm info --> </div> <div style="float:right; width:50%;"> <td background="http://physicsforums.bernhardtmediall.netdna-cdn.com/Prime/theme/hd/Prime_HD_03.gif" nowrap="nowrap" style="padding:0px 30px 0px 0px;"> <!-- login form --> <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)"> <script type="text/javascript" src="http://physicsforums.bernhardtmediall.netdna-cdn.com/clientscript/vbulletin_md5.js?v=387"></script> <table cellpadding="0" cellspacing="3" border="0"> <tr> <td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">User Name</label></td> <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="User Name" onfocus="if (this.value == 'User Name') this.value = '';" /></td> <td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />Remember Me?</label></td> </tr> <tr> <td class="smallfont"><label for="navbar_password">Password</label></td> <td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td> <td><input type="submit" class="button" value="Log in" tabindex="104" title="Enter your username and password in the boxes provided to login, or click the 'register' button to create a profile for yourself." accesskey="s" /></td> </tr> </table> <input type="hidden" name="s" value="" /> <input type="hidden" name="securitytoken" value="guest" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <!-- / login form --> </td> Code (markup): Which comes in at 3.3k for Christmas only knows what... I would likely have something more like this: <h1> Physics <span> Forums <span><!-- image replacement --></span> </span> </h1> <ul class="breadCrumbs"> <li class="start">Physics Forums</li> </ul> <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)" > <script type="text/javascript" src="http://physicsforums.bernhardtmediall.netdna-cdn.com/clientscript/vbulletin_md5.js?v=387" ></script> <fieldset> <label for="navbar_username">User Name</label> <input type="text" name="vb_login_username" id="navbar_username" accesskey="u" /> <input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" accesskey="c" /> <label for="cb_cookieuser_navbar">Remember Me?</label> <br /> <label for="navbar_password">Password</label> <input type="password" name="vb_login_password" id="navbar_password" /> </fieldset> <div class="submitsAndHiddens"> <input type="submit" class="button" value="Log in" accesskey="s" /> <input type="hidden" name="s" value="" /> <input type="hidden" name="securitytoken" value="guest" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </div> </form> Code (markup): Which is only 1.34k -- roughly two-fifths the size... everything else trying to be done there belongs in the external CSS. IF I'm reading this properly and taking some educated guesses I'd fix the height of the h1 and gilder-levin the logo into place, negative margining it to remove it from flow... then it's a simple float left of the breadcrumbs, float right of the form, and make sure the menu is set to clearing. While in there I'd put some effort towards fixing the inaccessible fixed metric (aka px) fonts too.
Eh... sad part is that's pretty much typical for vBulletin... and when they got rid of the tables, they got rid of ALL tables even around obviously tabular data to do endless pointless nested lists with completely nonsensical numbered heading orders to. Part of why I can't understand how/why anyone thinks vBull is worth money.
Thanks for the advice and laugh deathshadow! What forum software do you recommend? IPB? Xenforo is too risky with the lawsuit.
I'm not very familiar with vBulletin, but aren't there themes developed by third parties? It's common for all scripts to come with crappy stock templates (shitty looks and/or shitty code), but this is not an excuse for 3rd party designers to produce junk. Just because you have a broken template it doesn't mean you should change the software solution. You don't buy a new car when the old one needs a paint job, do you?
For forum software I like SMF just because I find it easier to skin because instead of some goofy crippling templating system, it's just PHP functions... what with PHP basically being a glorified templating system, I never really grasped why anyone would want/need to run another templating system on top of it... as if those fancy endless systems like smarty is somehow simpler or easier than functions. But really what others are saying here is probably the right approach -- find another skin to start from... there has to be one out there that isn't so horrific -- HOWEVER, quite often skinners barely comprehend the underlying code of the default and/or work from it, so skins better than what a forums comes with is often hard to find. ... and from what I've seen of Xenforo, the lawsuits are the LEAST of it's worries since it seems to not only be pathetic crippleware, I'd rank every skin I've seen for it on par with what I've seen for vBull.
There WAS a need for a templating system back in the 2000s when PHP4 was mainstream and 5 was in beta. Smarty was also great for its caching features because you didn't have (a lot of) other solid solutions -- been there, done that. Nowadays you've got solid MVC frameworks and CSS (and Zend_Cache for caching) so there's really no need for another parser on top of PHP. This is why Smarty was discontinued (or so I remember). But it seems that not everybody lives in 2013 and they'd rather patch code that was written in the 90s than rewrite from scratch and come up with something scalable. From this point of view, it doesn't surprise me that people are still using tables for design.
See, I disagree wholeheartedly as I fail to see why complex solutions like Smarty are needed when you could just create functions like theme_header or theme_footer, put them into a file like themes/default/common.template.php, require_once it once you know what theme is being used, then call those functions passing any needed data to those functions the same way you'd pass data to something like smarty.
I'd only agree with you partially, in the sense that Smarty is too complex (read bloated) for some mundane tasks. You don't need it for Hello World types of websites, but once you're scaling up and building something big, and outsourcing the design, it comes in handy for both the programmer and the designer. The programmer doesn't have to audit hundreds of thousands of butt-ugly lines of code for eventual PHP glitches, while the designer doesn't have to type his butt off to output a variable ({$foo} vs. <?php echo $foo;?> because no, short tags aren't available on all platforms). I know there's a huge religious war on whether or not Smarty is/was of any use, and you could guess which side I'm on.
1998 called, it wants it's code back. Personally i prefer MyBB and SMF for forums, I just find them simpler to use and the templates aren't hard to edit/make.
While I want to see <?php ?> removed from PHP entirely so that it will not output anything if you don't use echo or print... then people would STOP the endless stupid opening and closing of PHP on every blasted line, meaning in my code it would end up either just $foo inside double quotes or ',$foo,' Really though if a designer can't figure out how to use a function or variables properly given how simple PHP is, they probably have no business writing HTML either... but then it seems these days we're inundated with PHP devs that don't know enough HTML to be writing PHP, and designers who don't know enough HTML or CSS to be designing Jack. Of course, I find just trying to figure out where the **** some bit of code is being generated in these 'template' systems painful -- particularly if you are trying to go through to fix or completely replace bad markup. It's why on helping a friend with their myBB forums I ended up just going "Good luck, you're on your own" after two weeks of struggling with the painfully bad templating system trying to do what in SMF I'd have in seconds using CTRL-F... or going through ten or twelve separate template 'bits' to do what would be a single CTRL-H.