• Matthew Greet (unregistered)

    Aren't sections of text meant to be wrapped by SPAN, whereas DIV is for sections of the page?

    Or is expecting the programmer to understand HTML too much?

  • (cs) in reply to Matthew Greet

    Ahhh, yanks again!!

    Can anyone post a good CSS tutorial for us serverside crunchers who arent that good with colours?

  • Phil (unregistered)

    Well, thanks for posting this - now, when I'm recruiting, I'm going to use this in interview. "Have a look at this HTML. Tell me everything that's wrong with it." Anyone who can't list at least half a dozen things (and I counted a dozen) doesn't get hired!

  • andrew (unregistered) in reply to LC

    Anonymous:
    I don't see a WTF in the divs, I've written code EXACTLY like this.
    Its basically the output from a report generator and every field in the report needs a location and bosses expect things to be in the same place all the time.
    If you've ever tried to convert a printed report into html tables (believe me, I tried...) you would know how difficult it can be, there are paradoxes and layout problems which just cannot be solved without absolute positioning.
    I however see a WTF in the style block at the head of the original html, unique styles should be bunched together, but the generator is exporting each style within each section with its own prefixes clogging up the stylesheet and preventing minor changes.

    For the layout paradoxes, consider 4 fields in a report each with data:

    <FONT face="Courier New"> 11122222
     111 333
     111 333
    44444333
         333

    How would you create a HTML table retaining that layout?
    </FONT>

    What? You mean like this html?

    4 111 2 222 2
    111   333
    111 333
    444 4 333
      333

    in the preview the vAlign is not working ... but you get the general idea ... easy!

  • LC (unregistered) in reply to andrew
    Anonymous:

    Anonymous:
    I don't see a WTF in the divs, I've written code EXACTLY like this.
    Its basically the output from a report generator and every field in the report needs a location and bosses expect things to be in the same place all the time.
    If you've ever tried to convert a printed report into html tables (believe me, I tried...) you would know how difficult it can be, there are paradoxes and layout problems which just cannot be solved without absolute positioning.
    I however see a WTF in the style block at the head of the original html, unique styles should be bunched together, but the generator is exporting each style within each section with its own prefixes clogging up the stylesheet and preventing minor changes.

    For the layout paradoxes, consider 4 fields in a report each with data:

    <font face="Courier New"> 11122222
     111 333
     111 333
    44444333
         333

    How would you create a HTML table retaining that layout?
    </font>

    What? You mean like this html?

    4 111 2 222 2
    111   333
    111 333
    444 4 333
      333

    in the preview the vAlign is not working ... but you get the general idea ... easy!





    Andrew, like I said, consider the 4 fields (1,2,3,4) as single unique unbreakable fields (images) and not just breaking the fields apart and displaying bits of them inside different table cells.

    It is not possible to place 4 single fields on a page and arrange them in the way I specified without altering the meaning.

  • Unluckypixie (unregistered) in reply to TomCo

    You can't put a div in a table ;o)

  • Nand (unregistered) in reply to LC

    That's easy! Rowspan and colspan are your friends. A table data field with rowspan set will overlap the same field in the row below. You don't need to declare a table data field there.

    111
    111
    111
    22222
    333
    333
    333
    333
    44444
  • Nand (unregistered) in reply to Nand

    Here's a version with hole in the middle.

    <table border=1>
        <tr><td>0<td>A<td>B<td>C</tr>

    <tr>
        <td>1</td>
        <td valign="bottomn" align="right" rowspan="2">111<br />111<br />111</td>
        <td colspan="2">22222</td>
       
    </tr>

    <tr>
        <td>2</td>
        <td></td>
        <td colspan="2" rowspan="2">333<br />333<br />333<br />333</td>
    </tr>

    <tr>
        <td>3</td>
        <td valign="top" colspan="2">44444</td>
    </tr>

    </table


    </table
    0ABC
    1 111
    111
    111
    22222
    2 333
    333
    333
    333
    3 44444
  • enders (unregistered)

    A collegue of mine pointed out that div are better view when using a mobile phone.

    And since this is a phone company, I can imagine that one of the requirements was not to use tables.

    Just my two cents

  • Tei (unregistered) in reply to Remco Gerlich
    Anonymous:
    Nevermind.  Even that trick won't save this mess.  In the spirit of a past topic, how about:
    1> print page to paper.
    2> lay paper on wood table and photograph with digital camera.
    3> print picture to paper and scan with OCR.
    4> import OCRd text document into Excel.


    Mine is better:

    1> Capture screen as a image file
    2> OCR 2 Text with that file
    3> Text 2 voice  (festival, mbrola, etc.)
    4> voice 2 word document  (with a assistant)
    5> Save as... HTML, with word.
    6> rename .htm extension to .xls
    7> Open with Excel

    --Tei

  • Asif Youcare (unregistered) in reply to GoatCheez

    Goatcheez wrote "I think this might get the WTF of the year award!"

    Hey Alex,

    Do we get to vote?

    My personal favourite is the "Storray Engine", you just can't get more WTF than that.

    IANAL IAAHB

  • LC (unregistered) in reply to Nand

    Nand,
    thats the closest I have seen, I am very impressed.
    It still requires immense thinking about just for this one special case and doesn't fix everything, but I shall take it and have a play.

    The problem is that whilst we can craft a solution for a single problem a general solution is still lacking.
    ie, when it comes across another report which has similar but not quite identical (ie, theres another field just below the 4's or something is over there and overlapping or any such things)

    The older HTML table generation routine breaks apart a report section by section looking for whole horizontal or vertical spaces between the fields and the paradox came from not knowing which split to break the formatting on.
    It worked nicely until I discovered problems like this.


    I'm so interested in getting this right because (a) I knew it wasn't a perfect solution and (b) I am in the code library in question creating a pdf output as we speak, so if I can tablify the output (and simplify the output) then it will be better all round.

  • cjd1 (unregistered)

    How about this site's new design as a few days' WTF.  At work, with a citrix client, the desktop is 640x480 I think (could be 800x600 I suppose).  The navigation/sponsor bar on the right overlaps every post by several characters, no wrapping or shrinking the post's width here.

  • T0maz (unregistered)

    Omg! Inline styles, how horrible! He should have made classes for it and apply it to the divs instead!  

  • Nand (unregistered) in reply to LC
    Anonymous:
    Nand,
    thats the closest I have seen, I am very impressed.
    It still requires immense thinking about just for this one special case and doesn't fix everything, but I shall take it and have a play.

    The problem is that whilst we can craft a solution for a single problem a general solution is still lacking.
    ie, when it comes across another report which has similar but not quite identical (ie, theres another field just below the 4's or something is over there and overlapping or any such things)

    The older HTML table generation routine breaks apart a report section by section looking for whole horizontal or vertical spaces between the fields and the paradox came from not knowing which split to break the formatting on.
    It worked nicely until I discovered problems like this.


    I'm so interested in getting this right because (a) I knew it wasn't a perfect solution and (b) I am in the code library in question creating a pdf output as we speak, so if I can tablify the output (and simplify the output) then it will be better all round.



    Well, the key to solving this algorithmically is to create a grid that is _finer_ than the data that needs to be displayed. Once you have that, you just need to group the fields together until you have the arrangement that you need to accomodate the data.

    I don't know how varied your data is. The problem is very easy to solve "visually". Here's another example, with the solution drawn on top of the content areas. Given the outline rectangles, just add lines as needed for the top / bottom bounds, and the left/right boundaries. Once you have that, find all the ones that have cell borders intersecting them, and increase their row/column span for each intersecting line.


    [image]
  • LC (unregistered) in reply to Nand

    Nand,

    Thank you.
    You are indeed a HTML god, and I think the word to be used now is w000000t!

    I'm gonna have a play later on, even if I cannot get it as granular as the report generator (mm placement on a page), I believe I can get it "close enough" (I am even willing to throw away overlapping problems if I can get the tables to work).

    Buy yourself a beer and give yourself a pat on the back.

  • RevEng (unregistered) in reply to Tei

    Some people are still using very old (broken) software, so we should break our website to suit them?

    Sorry Tei, but everything after (not including) Windows 98 comes with IE6 (not saying that it isn't broken).  Even under Windows 98, Windows Update makes you upgrade to IE6 as it's first point.  If there are people still using IE5, that's their fault: newer version have been available for years for free.

    If they proposed dropping support for IE6 because IE7 had just come out of beta, I could understand, since it will take time for people to get the new browser.  But IE5?  Come on, that's a good six years old!

  • Hotta (unregistered) in reply to Looce
    Anonymous:

    Anonymous:
    Now imagine if they wanted to change the font...

    Or provide accessibility. Imagine if a user wants to enlarge the font since they are visually-impaired. They just... can't. Wtf!

    CAPTCHA = Broken

    They can.. use Opera.

  • Joe l'ind (unregistered) in reply to RevEng

    Hey,
    I found some funny thing to do with this one :
    Increase several times the font size of the page (with "Control-+" on firefox for exemple)

    The results is a good expression of WTF...


  • Joe (unregistered)

    Actually, I know what did this, and it's not the work of humans (normal ones, anyway)

    IBM has a system called 'Content Manager' that allows big organizations to electronically index and store their paper statements. They sell an add-on to it that they say will output the statements to PDF or HTML.

    I worked for a credit card company, and we purchased this system to show statements online. However, once we saw the output it produced, we bagged it. Basically, this is what you get when translating something like postscript to HTML. Our statements looked very similar to this: an absolutely-positioned div for each word, except for the boilerplate copy from the back of the statement. That had a div for each letter.

  • Tei (unregistered) in reply to RevEng
    Anonymous:
    Some people are still using very old (broken) software, so we should break our website to suit them?


    Yes. You are paied to make a app, so design that app withouth bugs and to avoid bugs on browser implementations, and on hardware. If you app crash, your client will not notice is the hardware or the browser, but will not be happy with your work.

    Sorry Tei, but everything after (not including) Windows 98 comes with IE6 (not saying that it isn't broken).


    IE6 can be describes as "Still broken" because you can't still use simple and clean code because you need to avoid lots of bugs on PNG rendering and CSS.

    IE7 will fix a few problems here and there, but is not a engine rewrite. "Still broken too" codename.

    Even under Windows 98, Windows Update makes you upgrade to IE6 as it's first point.  If there are people still using IE5, that's their fault: newer version have been available for years for free.


    But people still use Pentium 1 with 800x600 monitors with Cirrus Logic  video cards on production areas.
    With Word97, Excel and Lotus Notes is all you need. 


    --Tei
  • dazed (unregistered) in reply to RevEng
    Anonymous:
    Some people are still using very old (broken) software, so we should break our website to suit them?

    Sorry Tei, but everything after (not including) Windows 98 comes with IE6 (not saying that it isn't broken).  Even under Windows 98, Windows Update makes you upgrade to IE6 as it's first point.  If there are people still using IE5, that's their fault: newer version have been available for years for free.

    It's still reasonable to expect that websites are readable in IE5. It's not reasonable to demand that they look good in IE5.

  • Tei (unregistered) in reply to dazed

    The real WTF is...

    I think gmail remove the CSS from your mails, because CSS on IE support scripting, so is a CSS + IE = XSS.  This result on... you sould design whatever you mail as html withouth CSS, formated as HTML, with good old FONT, B, I ,etc 90's friends.

    Anyway you need a WTF to fix another WTF, and because CSS is broken on IE, you cant use min-width, but you can do that:

    .fotocatalogo {
    max-width: 100px;
    width:expression(this.width>100?100:true);
    }

    Theres still more WTF on Internet Explorer..  search at google about png support...  you use direct-x filters to draw png with alfa.

    --Tei

  • Pinkfloyd (unregistered)

    WTF, Who The F... stays on the phone for 8+ hours at a time!

  • NancyBoy (unregistered) in reply to [Si]dragon

    Anonymous:
    Tables are for tabular data, not layout.  Nobody who knows what they are talking about said you should not use tables, they just said you should never use them for layout, along with other relics like transparent spacer images and the like.

    You can always tell a hall monitor by his insistence on pointless rules to be followed...or else he'll frown at ya!  I had a web site that used tables to vertically center some material and some nerd emailed me his "replacement HTML" that was written "correctly" and to "standards"...and also screwed up all the vertical positioning on the page.  What is it with geeks who spend so much energy working toward the goal of getting reasonable people to dislike and ignore them?

  • Lindsay (unregistered)

    now, increase your text size on that page. nicely scales, you'll notice.

  • (cs) in reply to Pinkfloyd

    /me removes Pinkfloyd's broadband and passes over a dialup modem.

  • Mobius (unregistered)

    It'd be easy to think someone did this - but in fact they did not. No Human has had a hand in this code - it is the result of BCL's "Magellan" converter program. The original document has been "HTMLised" by BCL - and these are the results.

    We have pages in an application of ours with better than 1200 DIVs, as a result of using their system.

    We have just figured out a way for it never to exceed 100 though - and that is acceptable for an automated process - at least in my view.

  • DC Dalton (unregistered)

    OH MY GOD! I've seen stupid but this one takes the cake .... uh hum, has the author of this code ever heard of TABULAR DATA ..... IE: tables? And they have the guts to call me a fanatic?

  • nadim (unregistered) in reply to erkt
    erkt:
    A while ago I ran into a prob where a massive table def displayed on a single page would lock up a browser until it fully loaded. Users were complaining that it was too slow.  The quick and dirty solution was to do something similar. We broke out the output into individual tables for each group of rows (every couple of lines usually) . This had the effect (in IE 5 at least) of displaying the data faster on the screen. The users were happy because they could "see" the data immediately while the rest loaded in background. Not saying it was the best solution just the most expeditious given the constraints placed on us by the customer.E.
  • Ben (unregistered)

    I've seen something very similar to this on a site that I've spent many hours "fixing up", which was originally coded by a freelancer who was hopelessly out of his depth. Instead of table cells he used fixed width span elements. I'd only seen the "table" from the front end, until the client requested that all the text in one of the "columns" be centred. "Easy", I thought... until I saw the code, and (after the initial "WTF" reaction) guessed that you can't centre text inside a span.

    Regarding the comments blaming CSS "jihadists" for the eradication of tables: in the case of our freelancer, I doubt he understood enough about semantics to know why he would or wouldn't use a table. He'd probably just read something about "table-less CSS layout" in the spec and blindly followed it, unable to make the fundamental distinction between the layout of the site and the table of data that needed to live inside it.

  • Eviltechie (unregistered)

    Wow!

    That code looks like something generated by Drumbeat 2000, which I was forced to support at my previous job. Drumbeat spewed code consisting entirely of DIVs positioned with CSS.

  • Mike (unregistered) in reply to dtfinch

    There's a product competing with Crystal called Actuate that also commits similar atrocities against HTML.

  • airdrik (unregistered)

    It's perfect! Now they just need to add some javascript to take the divs and, manipulating their css, make them fly around the screen!
    Weeeh... look at the flying cell phone bill! Weeeh...

    And we can even add some keyboard/mouse shortcuts to change the animation that's displayed - floating sphere/cylinder, growing/shrinking (pulsating effect), draggable net with gravity, etc.

  • The Future (unregistered)

    I'm here from 2019. I can select all instantly :)

Leave a comment on “Periodically Tabling”

Log In or post as a guest

Replying to comment #:

« Return to Article