151 Reply by Louis

(3 replies, posted in PunBB 1.2 bug reports)

Kennel wrote:

Man, how the hell did you notice that? :) It was actually me who started the topic. I moved a bunch of posts from a different topic into that one and I had to do it manually (PunBB doesn't have a split topic function). I guess I forgot to change the author column :)

I've missed that feature, myself. I figured out how to do it manually on my own, though ... It would be nice to make a "moderate forum"-feature for the viewposts page, I wonder how difficult a mod it would be? ;)

Mod Updates: I've just finished the Upload-Signature feature for the CSpotkill.com board. Now I'm starting to integrate Gallery, photo gallery software written in PHP, with the forums' login system ... I think it would be going too far to integrate the search functions as well, but who knows, maybe if/when I've the time for it, I'll do that too. Then there's PunCSS. Eventually I've got to clean up these mods and release them...

Go to forum: PunBB 1.2 bug reports

152 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Auron wrote:

Would say if someone wanted to move the posters info from the left hand side to the right hand side work with out editing anything BUT the CSS FILE???

Auron

Yep. It would with just CSS with my conversion, as I said above. You could make two versions of the CSS file, one to position the poster info on the left side, the other to position it on the right, all just with the CSS.

Specifically, you'd float .punauthorhead, .punauthorinfo, .puncontactinfo and .pundateposted to the right and then reverse the margin on .punpostmsg, and float .punpostactions to the left. Finally, if we add the margin from the left of the table (so the gif is 1 px #606060, 199 px transparent, then 1px #606060) to the background image, then it's not a problem either. This is all possible because there is nothing in the HTML whatsoever to position the page, it's all self-contained in the CSS file, even the declaration of the background image. This is also why such radical design changes are possible, with exactly the same HTML.

Go to forum: PunBB 1.2 discussion

153 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Kennel wrote:
CSpotkill wrote:

So, it's either Use box model hack to give IE5 and 5.5 different values for width, or use a background image which might or might not make it harder for people to customize the forums ... if they really wanted to customize the forums, they'd use their own background image, possibly, but ? hrmm. I haven't given up, I've just found thousands of ways that don't work ...

It's your call. I think I would prefer not having anything more than the style sheet to customize, but if it can't be done without the background image, it can't smile

I thought of another possible problem. Quite often, I hide/show a column in a table depending on whether a certain feature is enabled or not and whether the user is an admin/mod or not. Won't this be a problem?

Well ... frankly, I'd find using the box model hack to be easier to modify, as for many people who use CSS, designing around IE5's bugs is a way of life. But I can understand why you'd want a "hack-free" layout ...

As for the show/hide columns issue, it shouldn't be a problem, as the problem has nothing to do with columns like that, it would just replicate the black line running down the side of the posts, so I won't have to worry as much about the IE 5 and 5.5 positioning bugs.

<??? I mean this line and (so far) just this line. Everything else should have a fixed height of some kind or shouldn't need the padding, so I shouldn't need a background trick for any other page.

If you remove a column, the CSS for the column wouldn't have any effect and if we design the CSS correctly, it will expand just like the table-based layout would.

I haven't quite given up yet though, if I can avoid using the background-trick I would, since it would make it harder to customize this default theme. I'll work on the rest of the layout for now and come back to it after ...

Go to forum: PunBB 1.2 discussion

154 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

RNilsson wrote:

Anyone knows how a CSS-base layout looks in browsers available on the unix platform?
NS, Mozilla, FB, Opera, Konqueror
and text-based browsers like
Lynx, Links, Arena, w3
?

Cuz Pun is a good forum suited for text-based browsers due to it's simplicity and lightweightness.

http://www.CSpotkill.com/PunCSS/lynx.gif
PunBB's redesign, as tested in Lynx 2.8.3 for Windows.

I just tested PunCSS in Lynx 2.8.3 and Links 0.98 builds for Windows. One problem I noticed was that using true lists for navigation greatly extended the amount of screenspace used for navigation elements ? and that most of the exiting PunBB is not very accessible nor designed with keyboard navigation in mind.

A few easy solutions to this would be to add a "skip to first post" link for viewtopic, then change the posts to have "next post" and "previous post" links, so you could quickly skip down to a post you wanted to quote, perhaps. Also a good idea would be to incorporate the [new posts] link from the viewforum page to the viewtopic page, just beside the skip to first post link and call it "skip to new posts", perhaps.

Another good usability device (which would also save a bit of tabbing), would be to create a search box in the header that simply searches for keywords from every post in the forum and displays them Google-like, with search terms displayed in context, and results sorted by some measure of relevance, if it's possible.

The idea: User loads thread. Clicks "skip navigation" and arrives at the search box. Clicks "skip to first post" (jumps down to first post) and starts reading. Clicks a link in the post and loads a new thread. Tabs once and clicks "New Posts" (jumps down to first unread post in thread. User needs context and pushes Tab and Enter to select "Previous Post" and does this a few times, to read a few posts up the page ... then selects "New Posts" and jumps back down to continue reading ...

These links may be hidden with CSS, or shown somehow. Perhaps the Skip Navigation, Skip to unread posts and maybe a link to return to the top of the page would be handy for anyone, with graphical- or text-based browsers alike. It's just a preliminary idea, however.

Building Accessible Websites by Joe Clark has further details on navigation techniques for building accessible websites, specifically Chapter 8. (His entire book is online, I'd recommend it to anyone, although some parts are slightly out of date now.)

Go to forum: PunBB 1.2 discussion

155 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Kennel wrote:

You've now been working on the topic view. Will it not be an enormous job to also do all the other pages? I mean, with this kind of design, the actual HTML only describes what content is to be displayed and hardly anything about how it will be displayed. There are a large variety of pages in PunBB (not to mention the admin interface).

Well, in nearly every other page, you've a rough idea what you're working with, but the posts in viewtopic are completely up to the user, so you need to put in extra safeguards in the CSS and keep it flexible and dynamic. With post, viewforum, profile, search, userlist, and even the admin panel, you don't have to worry as much about keeping it dynamic ? the size of the Message-entry field, for example, won't change. Even modifying the viewtopic CSS to add multiple-post delete is easy to add, once the initial viewtopic layout is finished.

So this is the hard part, the hardest to get perfect and the rest of the CSS will be much easier ;) It's especially difficult because I've never tried to emulate a table-based layout precisely ... damn those borders, padding and strange IE bugs! All the small tweaks add up... I'll probably have to go though the CSS and clean out any unnecessary style rules.

I'm leaning towards using the box model hack and fixing the CSS for IE5 and 5.5, because everything's perfect for IE, except there's padding in the posts and I can't duplicate the padding with margins because of the border on the left. When I just put the border on the punauthorinfo dl, it doesn't reach down far enough, since it will stop when the contents in the div stops, so I must use both the post div and the authorinfo dl for the border, just in case the post is shorter than the authorinfo div, and have them overlap, but yet again ?

Excuse me. I was just rambling on ... It's getting late. I'll look at it tomorrow, maybe I'll get a new, fresh perspective on it.

The only other solution I can think of is to use a pixel-thin background with the border on it, repeating down the post. Hmm, that might just work ... and solve the IE5+5.5 display issue. I'll try it tomorrow. It also gives me an idea of how we could do the borders for the rest of the site quickly and easily ... just do it the same way.

BTW: The background images I'm talking about using are just small, 200 px wide by 1 px tall images with transparent backgrounds, similar to those old "spacer-gifs" everyone used to use ... however, and this is a rather big however, you would need to edit the image to change the color of the border when creating a new style sheet.

So, it's either Use box model hack to give IE5 and 5.5 different values for width, or use a background image which might or might not make it harder for people to customize the forums ... if they really wanted to customize the forums, they'd use their own background image, possibly, but ? hrmm. I haven't given up, I've just found thousands of ways that don't work ...

Good Night,


CSpotkill / Louis St-Amour.

Go to forum: PunBB 1.2 discussion

156 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

ps21 wrote:

One slight concern is that althought a CSS design makes it much easier to make changes for the board it also creates more scope for CSS newbies to screw things up particularly if the stylesheet contains hacks. However, that is a practical matter which could probably be overcome with a decent set of instructions and some decent comments on the stylesheet.

As I'd posted above, if we split up the CSS into a colors file and a framework (layout) file, it would make it easy for them to still change the colors while leaving the rest of the look intact. We could even add extra CSS files for the framework, such as moving from a left-to-right layout to a right-to-left layout easily, and you could still use the same colors css files with both ... adding options in the Admin panel perhaps, or tying it together with the language preferences.

ps21 wrote:

... I have come up with a navigation bar for PunBB which is based on Zeldmans menu as used on his site and ALA. The trick is to alter the function that generates the navbar so that it generates <li> tags rather than just links. The second trick is to set a variable in the function so that it can generate the links in reverse order to cope with floating right if required. I have even been playing with the sliding doors technique but as yet have not been able to eliminate the flicker in IE6 on XP.

The flicker is unfortunately an IE6 bug related to the caching preferences. You may be able to fix it with an HTA, but it's otherwise unfixable right now.

From Sliding Doors of CSS, Part II [A List Apart]:

IE Flicker: If you?re seeing a flicker of the images when hovering over the tabs in IE/Win, check the cache settings for temporary files (Tools > Internet Options > General tab > Settings button). You may have changed the setting from the default to make sure you?re seeing the newest version on every page refresh. IE/Win has trouble holding a background image steady on anchors if you?ve specified ?Every visit to the page? for temporary files. The default setting is ?Automatically?, which allows the browser to instantly retrieve the image from cache, preventing any flicker. Most users never change this setting; most likely, they don?t even know it exists.

As for reversing the order, just float the UL to the right and keep the LIs left floated, like what I did for the post actions (quote, edit, etc.). However, Opera follows the spec almost too literally with floats, so you must specify a width in Opera for it to display a float like other browsers. The only solution I've found so far is to use display: inline to keep the list on one line, like I did in the current PunCSS page. (Since adding a width would prevent us from adding extra "actions" for the posts or it would add extra white space on the right.)

There's a new "clickable fix", since the article was written. It's a method that uses an HTA for Internet Explorer browsers to enable the anchor-hover pseudo element on any tag. Works fine, except in IE6 SP2 ? probably because of some bug in Windows XP SP2 beta, or possibly a new security restriction for HTA/HTC, but I doubt that.

Kennel wrote:

Pixel-perfection isn't the main priority. ... What I'm looking for is a design that is flexible and that makes life as easy as possible for people who want to create custom styles and people who want to integrate PunBB into their current website design.

Got it. I'll try for accuracy anyway though. I might be able to fix it just by adding an extra div around the post wink Besides, that would make it more feasable to separate the posts from the parts around it in another CSS design.

Go to forum: PunBB 1.2 discussion

157 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

chacmool wrote:

Don't like the scrollbars though...

I added them because with pre, it doesn't wrap by default. However, you could possibly tweak it with the white-space property.

chacmool wrote:

I don't like the "double" black line there ... add [CSS] ... for punpost. I don't like the "double" black line there.

Notice how easy it would be to modify the design? Even just removing the border. You don't have to worry at all about knowing the inner PHP code of PunBB at all. The only thing better would be the mod that ps21 is making, so we don't have to worry about duplicating our efforts in modifying the HTML too.

Auron, for the hack-related article, I've already read it. Here's a quote

These two hacks are safe. Netscape 4 and Explorer 5 Mac are not being developed any more. What we have now are, for better or (usually) worse, the definitive, final versions of these browsers. There will never be a next version that could make a mess of your pages.

Hacks against dead browsers are safe, but hacks against the living aren?t. None of them. Ever.

IE 5 and 5.5 are dead. IE 6 has already fixed the CSS bug in "strict mode" (See MSDN article below). When he's talking about CSS hacks, he means ones like this: CSS hiding hacks chart (Dive Into Mark)

For the browser support chart from QuirksMode, I've seen that also. I suggest you re-read the page and look for the paragraph that mentions "Quirks mode" vs "Strict mode" ... With browsers in "strict mode" there's much better CSS support than in "quirks mode". But he only tested for "quirks mode".

ps21 wrote:

Actually there is a far simpler way to make major changes to the look of PunBB and to make it skinnable without major code changes. ... The idea to be able to shuffle all the boards major elements around, set styles for a lot more individual elements and distribute quite advanced skins which consist simply of modified versions of main.tpl and a stylesheet. In other words, many of the advantages of a full templated skinning system without the performance overhead. You even end up with less code since a lot of the duplicated html from the various .php files is put in main.tpl only once. ... all those tables except for pun_main could easily be replaced with CSS. [Code Removed]

Sounds cool. If you did something like that, it might make it easier to have both worlds, a table-based layout and a CSS-based one, for those with a preference. However if you want to make PunBB more attractive to design folks, swapping to a CSS-based layout would be a dream come true. Then with knowledge of only CSS, or just a modern WYSIWYG editor, you can edit the layout entirely, no PHP or even HTML knowledge required ...

ps21 wrote:

BTW. There is actually a BBS system called ProxyBB which is tableless and which is XHTML 1.1 strict compliant. I got the details from Forum Insider. A link to the board is below but I warn you, it breaks in IE5. Strangely enough, it breaks IE5 in pretty much the same way as Spots re-coded PunBB does.
http://forums.proxywiregen.com/

I knew there'd be a CSS-based BBS somewhere ... and the reason why it breaks is because of a mis-interpretation of the CSS specification. See "CSS Enhancements in Internet Explorer 6" [MSDN Article] for details. This is why I'd need the box model hack to fix it for IE5 and IE5.5, but don't need it for IE6.

ps21 wrote:

... simply using CSS to mimic an existing table based layout seems to be silly. ... Much better to design a CSS based BBS from the ground up with a whole new approach to BBS design. You are also much less likely to encounter cross browser problems that way since they could be eliminated in the design itself rather than having to be coped with by hacks as an afterthought. A more practical approach for PunBb could be a hybrid solution. Remove tables for those elements that don't need them such as the header, spacers and probably the footers. Reduce the nesting of tables for the forum itself particularly where there only funciton is to create a border but keep the main output from the database in tabled.

Yes, it may seem silly at first glance, but once I'm finished, as Kennel mentioned, you'll be able to dramatically change the look of the forum just by changing a CSS file, without further touching the code at all. As for why I'm emulating it, it's so that you guys will take a CSS-transition seriously.

Personally, I find the table-based grid look to be very restrictive and I feel that as a web designer, there's an innovation in forum design coming, but won't happen until programmers learn more about web design and specifically implement a CSS-based layout with separation of code, both PHP and HTML, and CSS layout files, so that true web designers can play and tweak designs. Imagine CSS Zen Garden for PunBB? You can even do javascript-like image hovers and drop down menus, even tabs, with just CSS. Read alistapart for details.

Also, of course if you design a CSS style from scratch it will have less cross-browser problems, because you can avoid the box model error. However if you want pixel-perfect layout in IE5 with CSS, you really have to use the box model hack, there's no way around it. (Ask anyone) It won't change, but it's no excuse not to use CSS ...

Anyway, I'll keep working on it. When I get something final, I'll post it here, then try modding PunBB 1.1 for it ...

Go to forum: PunBB 1.2 discussion

158 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

ps21 wrote:

I'm impressed though still not convinced.
IE5 - It falls apart
IE6 - The posts are expanding beyond the header row and left border next to email link is out of alignment.
Firebird 0.7 - Perfect so probably fine in Mozilla 1+ also.
Will test it in Opera 7 later.

Update.

IE5 - Don't ask. I'll fix it up after. It's looking better a bit better than it was before, though. I may just use the box model hack after all ... but I'm not sure if I'll have to. Right now the main problems in IE 5 are the gaps above and below the posts. I'm not sure why they're occuring, yet ...

IE6 - The posts were expanding because of the code segment. They won't again, so long as your browser window is wider than 600 pixels or so. (Look again and see what I did ? just by tweaking CSS. I haven't touched the HTML since I posted it above)

As for the border beside the email link, it's puzzling. I've fixed it perfectly in Firebird and Opera 7, but it's just 1 pixel off now, in IE6. I'll track it down.

Firebird / Opera 7 - Perfect, after a few tweaks for Opera. The email-webpage-quote links aren't vertically aligned yet, but beside that, my build of Firebird puts a 1px white gap between the 2nd and 3rd posts. However none of the other browsers, not even IE5, do that.

We're getting there wink Eventually I'll break down what I've done into more managable "grid parts". That will make it easier to change multiple pages and not just viewtopic.php. I'll also separate the colors from the CSS to split it into a "framework.css" and an "oxygen-colors.css". That way, it's easier to change color schemes and add others, plus it will keep the main CSS file cached, thereby saving bandwidth and speeding up the site wink

Go to forum: PunBB 1.2 discussion

159 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Cactuz wrote:

Make it work better with IE though

It's nowhere near finished at this state. I'm just pointing out what I've done so far ... it'll take a day or two more, I expect. Maybe longer for the rest of the site, though I guess there's no rush wink

I did mention I hadn't worked much on the CSS in this version, mostly just the HTML ...

Go to forum: PunBB 1.2 discussion

160 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Also, without doing any optimizations yet, I've reduced it by %20 from 4,634 characters to 3,794 characters (not counting spaces) just by removing tables. (From the <body> tag to the end of the first post on the page)

Cactuz wrote:

Will be interesting to see the final result.

It won't look any different, at least with Oxygen.css. Of course, it will be faster-loading and much easier to change, just pop in a new CSS file.

chacmool wrote:

I'm not fully convinced yet though wink

This didn't convince you either? ? Just wait. wink When I'm done the transition of the current page to CSS, I'll do my own version and it'll look much different from "Oxygen" but with the exact same XHTML. smile

Plus, once you're using CSS, it makes adding ECMAScript and using DOM for animation, toolbars, tooltips and other interactive effects quite painless.

Go to forum: PunBB 1.2 discussion

161 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Okay, I've updated it ... I was getting fancy with the HTML for the posts:

[Code Changed. See <cspotkill.com/puncss/>.

I left in a few <br /> tags because I figure PunBB could parse and wrap paragraphs with <p> tags instead of using two <br />s. However, to work the way people expect, you'll need to keep a few <br />s, like in my example.

I couldn't use <code> tags and get it to validate, so I temporarily replaced them with <div class="puncode"> but I'll remove those when I lookup the correct syntax to "extend" xhtml to let <code> include <h4> and <pre> tags.

Also, I used unordered and definition lists to do the member info and post actions. I added "Author:" and "Title:", then hid them with CSS. This way if they don't have CSS, they will still understand what "CSpotkill" is ? because the "Author" column wouldn't exist without CSS wink

It's largely still unformatted and untweaked, since I spent more time working on the HTML source this time. If it weren't for the pipe (|) characters at the end of the list items, it would look nice in a text-based browser too (I'm working on it).

Also, something you might overlook, every post is inside an unordered list, and the list item is the old anchor tag by using the id! Say you link to &p=2#p8452 ... it will automatically go to that post (the item with the id "p8452"), so no more empty anchors are needed wink

Go to forum: PunBB 1.2 discussion

162 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

ps21 wrote:

CSpotkill. Several posts ago you indicated that you were not going to use Divs.

Actually, I never said I wouldn't ... re-read it ;)

Just the same, I wanted to use them sparingly. But I was in a sticky situation. I could either use a few hacks in the CSS, to make the XHTML much cleaner and ensure that the page worked in stupid browsers, like IE 5.5, or use a few divs, dirty up the XHTML slightly, but have cleaner CSS and easier maintainability. I chose cleaner CSS. Sometimes you have to give up some theoretical benefits, for practicality's sake.

Note that even though I used DIVs, I used them in a semantic way ? they divide portions of the page, portions of the header and are named accurately to reflect what they divide. I could probably tweak it further and remove the DIVs but I was working more on getting the list of links at the top inside a true list and then positioning it pixel-perfect. At least I accomplished that ;)


CSpotkill

[I'll work more on it in about 9 hours. Time for some sleep!]

PS. I know, there wasn't much to be gained so far, since I've only reduced it by about %4. You'll see a more noticible difference when I replace the posts themselves with CSS. Especially when you consider the bandwidth savings of not having to send the same attributes and tags over and over again (like width) since they will be stored in a cache-able CSS file.

Go to forum: PunBB 1.2 discussion

163 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

chacmool wrote:

Interesting discussion... I'm sceptical though, but I think it's just because I've always used tables and never taken the time to look more at "css-tables". I also have the old "If it aint broken, don't fix it"-feeling wink

Did you see what I did? (look up, 6 posts) It's even more impressive when you view the source. wink (Compare it with the old source ? What if I did that for the entire forum!)

Try reading a bit of What are Web Standards and Why Should I Use Them? or the WaSP's CSS Resources page. Visit CSS Zen Garden to view the power of CSS in action.

CSS is much better than tables and so much easier once you've practiced with it for a few websites. Don't be afraid to try it wink


CSpotkill

Go to forum: PunBB 1.2 discussion

164 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Auron ... You haven't read anything I've posted, have you? Even kennel himself has said that PunBB does NOT use CSS for layout, it uses tables.

Adding a doctype makes many browsers work in "strict mode" ? in fact, with the current page, Internet Explorer and others are rendering this page with "quirks mode" turned off, since it has a URI in the doctype. As for blocking tags, I've no idea what you're talking about.

Does it matter? Yes. Tell me the source of that 80% statistic. You're just writing your opinion, not hard facts.

CSS is NOT meant to replace HTML. CSS is a layout tool and the majority of browsers now support it! The page I just designed works in the dominate Microsoft Internet Explorer browser for versions 5.01, 5.5 SP2, and IE 6, as well as Opera 7 and Mozilla Firebird 0.7+. They've noticed, you haven't.

Besides, even the original HTML spec never meant for tables to be a layout tool ? ever. In fact, the birth of CSS was around 7 years ago, when they realised the web was going to be big and that font tags, border attributes, etc. wouldn't be enough control for designers coming from a print background, where you have, for example type kerning and precise control over the layout. (I won't start in all the details, since I know you won't care ... )


CSpotkill

PS. Kennel, I've another mod/feature idea: The admin ability to "combine" multiple posts from one user (like what Auron did above) either automatically, or similar to how you can move/delete multiple threads now. Being able to move individual posts from one thread to another is great for weeding out off-topic posts.

Go to forum: PunBB 1.2 discussion

165 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Kennel wrote:
CSpotkill wrote:

Yes, I'm up for that challenge. It would be a piece of cake ;)

This should be interesting :)

I'm working on it right now ... stripping the tables from it was the easy part (Thanks dreamweaver!) Now I'm just trying to add semantic tags and tweak the layout ... I'll post something before I go to bed ...

Edit: Here's the beginning ... More to come ;) Here's the CSS file.
The only thing I don't like about what I've done is using the | character, as you've done. I was hoping to use a border instead, but couldn't do that without using padding (which would require the box model hack for IE 5/5.5)

The box model hack, by the way, simply expliots a rendering bug in IE 5 and 5.5, it's been fixed in 6 and it's only for Windows versions of IE. So it's perfectly safe to use, but I'll design without it for now and add it later if there's no other way to code it.


CSpotkill

PS. Just a clarification on your above post on IE 5.5 being rare, what I'd meant was that using the box model hack, I could help control the layout for Internet Explorer versions 5 and 5.5 ? and excluding version 6. But it won't matter much, so far I've managed to design the site without any hack.

Go to forum: PunBB 1.2 discussion

166 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Kennel wrote:

... there are still numerous cross browser display issues. Ask the folks over at vBulletin. They actually changed back to a table based layout for parts of their forum in the last release candidate because of the amount of display issues users were encountering. Also, if changing to a div/css based design forces PunBB to do browser specific output (and CSS hacks), I am very sceptical. ...

Take a look at W3C's own front page. It looks different in the very latest versions of IE, Mozilla and Opera. I think that says something about how far we still have to go before we can drop tables for design/positioning.

Also, I'm a programmer. I hate having to deal with presentation issues. If someone could download this page (and maybe a few other pages in the forum) and convert it into a non-table based layout that looks identical (or almost identical) to the current look (and works in IE/Moz/Opera without a hitch), I will be hugely impressed. Is anyone up for the challenge?

First, the cross-browser issues are difficult, I agree. I just re-read your post and noticed the "if" in "If changing ... forces PunBB to do browser specific output (and CSS hacks), I am very sceptical." I agree. However, it wouldn't, if done properly.

Besides, just because the programmers at vBulletin couldn't get CSS right, doesn't mean you shouldn't use it. Look at Wired.com, ESPN.com, even Sprint uses CSS now. Seriously, CSS is exploding. Everyone's using it. Don't give up because some past attempts failed.

As I'd mentioned above in other posts, I'm aiming for clarity over design. If I must make it look exactly as it is now, with the exact same padding and borders, it may need this IE-specific hack, but only to IE version 5.5. Since version 6, in strict mode, IE is wonderful. And if we don't have to match it down to the pixel in every browser,  we wouldn't need any hack.

Yes, I'm up for that challenge. It would be a piece of cake ;)

Kennel wrote:
CSpotkill wrote:

   1. Posts don't use Paragraph tags, they currently (improperly) use line breaks. (br tags)

True. However, realizing that in code isn't just replacing a <br /> with a <p> and a </p>.

I understood that. I was in fact commenting on what would have to be done for true compliance. It would include a much larger re-write than just a 0.1 increment would provide. Maybe a 0.2 or 0.3 ;)


Kennel wrote:
CSpotkill wrote:

   3. Personally, I'd want to complete the XHTML transition by using CSS instead of tables.

Then we would use Strict and not Transitional. We are currently in the phase of transitioning into XML based output. I believe that's why we use the transitional DTD.

Actually, you don't want to use XHTML 1.0 Strict (and that wasn't what I was talking about). For one, you won't be able to use target="_blank" and frankly, I like having the links open in new windows, it saves me from pushing shift ;)

Kennel wrote:
CSpotkill wrote:

   4. All the small semantic things, like having true lists, instead of using space characters
   and typing in numbers, like I have to do now ...

Once again, this is something that I have chosen not to implement because of the PunBB philosophy. I've noticed that forum users extremely seldom use the [list] tag that is provided in other forums. Based on that, I decided to not include it. Not having it also speeds up the forum because fewer regular expressions have to be evaluated/executed.

How about adding lists as an extra that you can enable in the admin panel, then? Or I'll just mod it in, manually, I guess ...

Kennel wrote:
CSpotkill wrote:

Plus right now, small competitors offer standards compliance. While I cannot verify the claims, it would make sense to switch PunBB from tables-based to CSS-based layout, don't you agree?

Standard compliant? Have you even looked at the source?

http://www.minibb.net/forums/

Nope, as I'd mentioned ... I'd read it on another webpage, one of those PHP-script directories. I guess they meant HTML 4.01 as well.

Go to forum: PunBB 1.2 discussion

167 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Auron wrote:

I personally love CSS but how do you do repeated bit like say listing topics with all the CSS in a .css file while your PHP is in a .php file? You need the HTML to format it there and then.

How would you do it with tables? It's worse. You'd have to actually edit the PHP file with tables. With CSS, you could simply edit a CSS file and bam, new look. Did you really visit CSS Zen Garden (the link above) and see how they took ONE page and completely transformed it? CSS would eliminate the need to edit index.php directly, except for extreme mods.

As for the repeating, why not use lists?

Auron wrote:

CSS is nice but there is not really enough styles/whatever to make layouts that work in all browsers and are easy to maintain. CSS can get too complicated with id's and classes. With tables, all you do is whach a couple in and your done no messing around trying to get the right class with the right id.

You "love CSS" ? but find it hard to write and therefore prefer tables? Read a few Eric Meyer books, or Jeffrey Zeldman's Designing With Web Standards, then say with a straight face that it's hard to design a layout that works in all browsers with CSS. CSS was made for compatibilty!

Auron wrote:

When i said 2 files you have to switch between viewing the css file and then look at the file/s that link to it to see the the effect of the changes just made. Whereas with tables in most wysiwyg editors you can just draw them in, in a few seconds rather than a few minutes.

Haven't we already said that you CAN'T edit the HTML directly, since it's in PHP files? Therefore the CSS makes it easier to edit. With good editors, like Macromedia Dreamweaver MX 2004 or Adobe GoLive CS, or even Microsoft FrontPage 2003, CSS is EASY and WYSIWYG!


Spot.

Go to forum: PunBB 1.2 discussion

168 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Auron wrote:

... how would you replace these tables?

With div's? Or are you one of those ppl who use absolute positioning? If so you need help! I have no problems with CSS it just means that there is more to go wrong. It also means editing two files to make one page look right. You should save this page as is and try and make it using CSS with div/span tags (NO Tables!).

I wouldn't use absolute positioning, I'd probably use some floats with as little markup as I can get away with. I'll keep it clear and fast loading while keeping the design the same.

As it is, most of the default layout already looks like a CSS-based layout. Just use relative positioning and keep the 100% widths ... the difference is that instead of tables, you'd use lists, headers and paragraph tags.

As for editing two files, that's what you're doing NOW! With a CSS-based layout, doing layout tweaks requires JUST ONE file, a new CSS file. Here's an example of changing layouts while keeping the exact same HTML file.

There's more to go wrong with a tables-based layout than a CSS-based one. If we use the ESPN statistics, there's over 50KB more to go wrong, on each page ;)

Go to forum: PunBB 1.2 discussion

169 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Auron wrote:

Using CSS is an option but most browsers are still useless at it. Tables are basic layout formatting tools. CSS is not supported enough by browsers or they have different ways of doing the same thing which means you have to have a lot of code for each browser and browser type. As tables are standard in all browsers and use the same tags and attributes/values (most of the time) they are an ideal choice.

Ahh, you don't know CSS yet, do you? It's quite simple. CSS is actually right now supported by the majority of internet users, everyone from IE 5 upwards has excellent CSS support (at least as much CSS-P as we need.) And the idea of CSS is that they ARE standard. If I write a page in IE, it will work in Mozilla Firebird, no problem. (With a few IE workarounds, that is. But there are ways of avoiding those too.)

You may have heard of the Web Standards Project's Browser Upgrade Campaign, here's a quote from their current page:

So it's over, huh?

The complexion the web of has changed ? for the better. The percentage of standards supporting browsers in use has increased tremendously. The percentage of non-standards supporting browsers is low and doing nothing but decreasing. Those older browsers still in use are largely found in institutions where the choice of which browser to use is out of the control of the person using the computer. There are very few reasons to continue with the same course of action.

Did the BUC meet its goals?

It should be clear by the tone of this page so far that the campaign was a success. The techniques promoted for the campaign were deployed on thousands of web sites reaching hundreds of thousands of surfers.

Additionally, while not all site developers have made the transition to standards based web sites, those who want to can do so with much less fear then they may have had when this campaign was launched.

Go to forum: PunBB 1.2 discussion

170 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

ps21 wrote:

... divs are not the sematically correct markup for [tabular data from a database], tables are.

Yes, I know. Divs aren't semantically correct for most data ? they're just for presentation, as page dividers. Notice how I never mentioned divs in my post? You don't need div tags to use CSS with any modern browser. wink

ps21 wrote:

Tables are perfectly valid XHTML and comply with all the standards provided they are used in a semantically correct way i.e. for outputting tabular data rather than as a layout framework.

Correct.

ps21 wrote:

There is also no conflict between using tables and CSS. PunBB uses CSS to set the properties for tables.

Again Correct.

ps21 wrote:

In fact, if you replaced all the tables with divs this would not be correct as much of the output is tabular data from a database.

Close ? if it was all tabular data from a database, then you'd be right. However what I am typing now is not tabular at all. It's paragraphs of text. Inside a table. Inside yet another table. Inside yet another table. Inside yet another table. (I'm not joking, I just checked ? every post has it's own table, along with a few extra tables wrapping them) With spacing tables around them. This is an improper use of tables, since as you mentioned above, they should only be used "... in a semantically correct way i.e. for outputting tabular data rather than as a layout framework."

Now do you understand the reference to tables? (Don't take it personally, as it's just a clarification ... )



Spot.


PS. Oh and did I mention switching from tables to CSS can save bandwidth and make the fastest PHP Bulletin Board even faster?

For example, ESPN switched from older tables-based layout to new, CSS-based positioning and immediately 50KB were saved on each page. With around 40,000,000 page views per day day, the projected bandwidth savings were 2 terabytes/day, or 61 terabytes/month or an amazing 730 terabytes/year! Not to mention how much easier it would be to develop for and integrate with PunBB.

Plus right now, small competitors offer standards compliance. While I cannot verify the claims, it would make sense to switch PunBB from tables-based to CSS-based layout, don't you agree?

Go to forum: PunBB 1.2 discussion

171 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

eelco wrote:
CSpotkill wrote:

I was thinking of modding PunBB 1.1 myself to conform with XHTML 1.0

I already did that ;) I have a patch if you want it.

Oooh. Yeah I want it! I just opened the homepage up in Dreamweaver and it converted the source code to XHTML to prepare for a CSS-based layout, but of course there are a few problems with the PHP code. Did you mod the following?


   1. Posts don't use Paragraph tags, they currently (improperly) use line breaks. (br tags)

   2. Would you use [i.] and [b.] tags to create semantically correct <em> and <strong> HTML
   tags? And add [em] and [strong] for politically-correct BBcode? ;)

   3. Personally, I'd want to complete the XHTML transition by using CSS instead of tables.

   4. All the small semantic things, like having true lists, instead of using space characters
   and typing in numbers, like I have to do now ... Check Tantek Çelik's blog for more.


If your patch fixes all this I'd be amazed ... but even if it doesn't, send it to me anyway, I'm still interested. ;) (Edit: Never mind. Thanks Kennel.)

Go to forum: PunBB 1.2 discussion

172 Reply by Louis

(93 replies, posted in PunBB 1.2 discussion)

Kennel wrote:

Nice! And yeah, we would love a mod smile

Okay, I'll fix it up as a mod wink

And validation is harder than you'd think ... Especially for XHTML. I was thinking of modding PunBB 1.1 myself to conform with XHTML 1.0 and have most of XHTML 1.1 covered too, outside of the correct XHTML mime-type ? due to limitations with IE, you can't set the mime type to application/xhtml+xml and only with some versions of XHTML 1.0 can you send XHTML as text/html, see XHTML Media Types (W3C Note 1 August 2002) for details.

However it's occurred to me since that you would have to parse all user input and ensure the correct encoding is used (In this example, you'd either have to change the encoding to unicode or change my post, to validate.)

Kennel wrote:

Edit: Forgot to answer the question. No, I will probably stick to using tables for now. At least for 1.2.

Yet another problem: To use XHTML you should use tables solely for tabular data, like spreadsheets and never for layout/presentational purposes, since that's what CSS is there for. Seriously, is there any reason not to switch from tables to CSS? Maybe I'll try just giving the plain-vanilla PunBB 1.1 a complete CSS makeover, I was planning to anyway ...

Go to forum: PunBB 1.2 discussion

173 Topic by Louis

(93 replies, posted in PunBB 1.2 discussion)

Hello to anyone who's considering PunBB for their forums! It's very fast and easy to mod ;) As I'm interested in web standards and would love to see my favourite open source forum software completely redesigned with standards, I started converting it to CSS. Ps21 took my initiative and decided to remove some of the unnecessary tables and HTML, while leaving a basic, barebones table for layout. Altogether, we're working on new ideas to make PunBB better. Download PunBB if you haven't already, or try some forum mods ;)


CSpotkill.

Below is the continuation of a discussion on web standards and my PunBB CSS redesign (still in progress) that started on a thread about PunBB 1.1's new features.

Kennel wrote:

PunBB 1.2 will output valid XHTML 1.0 Transitional.

Will you keep using tables for layout purposes?

Also, I've just finished adding [flash] and [ascii] tags to my forum. For the flash tag, width and height are required, but they can be in any order. ASCII will wrap a div with a style attribute around the ascii art to change the font to Courier New, or another monospaced font. Below is a sample taken from a test signature:

[flash width=300 height=120]http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf[/flash]
[flash height=120 width=300]http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf[/flash]
[ascii] _____ __             _
|_   _/  \__ __ _____| |_  _
  | || () \ V  V / -_) | || |
  |_| \__/ \_/\_/\___|_|\_, |
                        |__/[/ascii]

I also added an option in profile for show_flash and an entry in the users table for show_flash ? both similar to show_img. After a bit more testing, it might make a nice mod =D

I used the Flash Satay method mentioned above, however in Internet Explorer it incorrectly waits to download the full flash file before starting playback, so I may want to modify it further and add an admin option to choose between the standards compliant mode for smaller flash files or the bloated object/embed combo that flash will export by default.

So far, PunBB has been a joy for modding, everything is logical and the naming is consistent.
I think I've fallen in love with a PHP script ;)


Spot.

Go to forum: PunBB 1.2 discussion

174 Reply by Louis

(25 replies, posted in PunBB 1.2 discussion)

Kennel wrote:

The setting doesn't affect admins and mods. Log out and you will see that it doesn't display it. However, as you pointed out, the post count doesn't show up in viewtopic even as admin, so that's a bug though. I'll fix it.
...
I'm planning some kind of module system for the admin interface in PunBB 1.2. Once that's in place, making a statistics module should be easy.

Great wink

Kennel wrote:

What you could do is to add two new BBCode tags: [flash] and [ascii] (or something). It shouldn't be that hard.

I was just about to reply saying I'll just use my own custom [flash] and [ascii] tags, having thought about it further yesterday. I'll start working on it now. Maybe I'll try using the Flash Satay method of embedding Flash. Is PunBB Standards-compliant? (What are web standards and why should I use them?) I've already noticed it's using tables, but it's also using some CSS ...

Go to forum: PunBB 1.2 discussion

175 Reply by Louis

(25 replies, posted in PunBB 1.2 discussion)

Kennel wrote:
CSpotkill wrote:

And it would be great if I could filter based on email preference, ie. disabled, but allow form, enabled, etc. That way I could see how many people use the new feature ...

I can see how that would be interesting in some cases. However, if I add that, I fear I must also add the option to sort by all the other option fields in the profile. I'm a bit sceptical on this.

How about adding an Admin: Statistics page, with pie charts for email preference, style usage, user post counts and maybe graphs for post frequency, user post count vs date registered, instant messenger preference, hourly forum usage and a list of terms people searched for?

Kennel wrote:

... [T]here is nothing stopping people from doing "evil things" when HTML is enabled. They could for example just enter </table> in their signature and then the whole page layout would be messed up. They could also use the script tag to run JavaScripts and other undesirable things.

I know. It's a lot easier to simply allow some tags ... or to restrict it. I'm thinking of using the avatar scripts and making a variation for signature images, maybe allowing flash to be uploaded as well. All people wanted the HTML for was to post a Flash signature, or to use ASCII art. Creating options for both in Profile and keeping HTML disabled would be more secure. Any plans on doing this, or should I write a mod?

Go to forum: PunBB 1.2 discussion