Help me kill tag soup!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Help me kill tag soup!

Post 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/
Last edited by Roja on Sat Dec 11, 2004 8:31 pm, edited 1 time in total.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Continued work..

Post 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.
rehfeld
Forum Regular
Posts: 741
Joined: Mon Oct 18, 2004 8:14 pm

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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!
Shendemiar
Forum Contributor
Posts: 404
Joined: Thu Jan 08, 2004 8:28 am

Post by Shendemiar »

Is that game playable?
Post Reply