Page 1 of 1

Help me kill tag soup!

Posted: Sat Dec 11, 2004 7:31 pm
by Roja
I contribute to an opensource game (The Kabal Invasion), and I'm working on redesigning the index/login page for it.

I'd deeply appreciate any help that people can offer towards eliminating some of the table-tag-soup that exists in my design.

I've tried to eliminate td width tags (since they are depreciated), and to reduce table usage as much as possible, but I seem to have hit a wall now. I can't even seem to get a vertical spacer inbetween the "Current game information" section and the "help" section without breaking html compliance.

(To help see the depreciated elements, you can simply
run validation for the page on html-strict
.)

I'd love to use only or mostly css, but I'd settle for keeping the current look while eliminating the depreciated tags and simplifying things a bit.

(Please keep in mind that the CSS file has numerous non-relevant entries, as it powers essentially half the pages in the game)

*ANY* feedback on how to improve the code while keeping the current layout is very welcome.

Please, help me kill some tag soup!

http://kabal-invasion.com/new-look/

Continued work..

Posted: Sat Dec 11, 2004 11:01 pm
by Roja
In a fit of cooperation, several contributors got it to html-4.01 strict, and got the vertical seperator we wanted.

http://kabal-invasion.com/new-look/index2.html

However, I'd still like suggested improvements in css, or even better, ways to eliminate tables and reduce html size.

Posted: Tue Dec 14, 2004 5:41 pm
by rehfeld
w/ the way the page is designed imo i think it might be best to leave some of the tables. to get rid of them requires either floating divs or using absolute/relative positioning.

theres still alot of differences in the way browsers render floats and positioniong schemes, to try and mimic certain table layouts becomes a mess of css hacks and "clean up" css rules

if you dont care about IE, forget most of what i just said though.


heres the footer w/out a table. its very simple so there should not be any issues w/ different float models between diff browsers.

Code: Select all

.foot div   { width: 33%; float: left; }
.footleft   { text-align: left; }
.footcenter { text-align: center; }
.footright  { text-align: right; }

Code: Select all

<div class="foot">
    <div class="footleft"><a href="http://sourceforge.net/projects/blacknova" tabindex="96"> Blacknova Traders </a> / <a href="http://sourceforge.net/projects/kabalinvasion" tabindex="97">The Kabal Invasion</a></div>
    <div class="footcenter"><a href="http://127.0.0.1/showsource.php?file=index2.php" tabindex="98" onkeypress="this.onclick()" onclick="popUp(this.href,'elastic',400,400);return false;" target="newWin">View Source</a></div>
    <div class="footright">2000-2004 <a href="http://127.0.0.1/docs/copyright.htm" tabindex="99">BNT / TKI Developers</a></div>
</div>


i think i could clean up your form so it doesnt need a table as well. ill give it a shot later.

Posted: Thu Dec 16, 2004 2:11 am
by Roja
Awesome.. that change really helps, as the footer is universal across almost all pages. :)

Yes, unfortunately, we do care very much about IE.. over 70% of the players on most of the game sites run IE. Definitely a target we have to support. :)

I'm fine with leaving some of the tables (and in fact, if its smaller and renders more reliably that way, I think thats the right choice). I'm just trying to make it as good as possible. I still want to use header tags for the obvious headers, but then I need to override the h-font-explosion that occurs on various browsers (sigh).

Thanks for the first effort!

Posted: Mon Jan 03, 2005 3:50 pm
by Shendemiar
Is that game playable?