Pure CSS "tables"

  • (2 Pages)
  • +
  • 1
  • 2

20 Replies - 4428 Views - Last Post: 31 December 2002 - 08:27 PM

#1 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Pure CSS "tables"

Posted 16 December 2002 - 10:43 AM

Greetings all!

I have been working on a personal site with a CSS layout I found at www.glish.com/css. For the most part, everything works quite nicely and I am pleased over all to be rid of using HTML tables for page layout.

The spirit is willing, but the flesh is weak...

I broke down and ended up using a table in one of my pages. Opera (my preferred browser) renders things nicely but IE bombs it. So I've been trying to learn how to use CSS to effectively create a "table".

My site dynamically loads content snippets with PHP4; including building the HTML table in a PHP loop (filling it with data from a mySQL query). All help and suggestions on where to find resources is greatly appreciated.

-Garstor (www.garstor.ca)

Is This A Good Question/Topic? 0
  • +

Replies To: Pure CSS "tables"

#2 klewlis   User is offline

  • cur tu me vexas?

Reputation: 8
  • View blog
  • Posts: 1,723
  • Joined: 09-November 01

Re: Pure CSS "tables"

Posted 16 December 2002 - 01:38 PM

I don't think there's a need to eliminate tables altogether! They still serve a very good purpose when used properly. If you have information that needs to be laid out in a table format, then go ahead and use it! That's what it's for.

I do use tables a lot when looping through database records. It's simple and effective, and makes proper use of tables.

It's good to move toward css layouts when possible, but as far as tables go, don't throw out the baby with the bathwater ;)
Was This Post Helpful? 0
  • +
  • -

#3 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Posted 16 December 2002 - 01:54 PM

klewlis, on Dec 16 2002, 02:38 PM, said:

I don't think there's a need to eliminate tables altogether!
{SNIP}
It's good to move toward css layouts when possible, but as far as tables go, don't throw out the baby with the bathwater ;)

I certainly agree with you in spirit; however, it is the use of tables that has caused my site to display improperly with IE (don't get me started on NS/Mozilla/Amaya) .

IE seems to size its tables based on the browser window width, NOT on the width of a containing DIV tag. So I've been experimenting with using DIV and SPAN to simulate a table with pure CSS coding. As I mentioned, only Opera renders the page as I intended...though the site is hardly for commericial purposes, I realize that a vast majority of users won't see my site quiiiiite right unless I can come up with a solution.

I would prefer to not maintain two totally separate sites based on browser type (though given what IE breaks on my site, I might have to...).
Was This Post Helpful? 0
  • +
  • -

#4 cfasnacht   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 17-June 02

Re: Pure CSS "tables"

Posted 16 December 2002 - 02:36 PM

from what i've heard IE, does a poor job in displaying css properly, and there isn't much you can do about it except try pulling some tricks with your style sheets code.

you shouldn't have nearly as many issues with netscape 7 or mozilla they along with opera are the most compliant browsers out there. if you are steadfast on going the way you are now..i'd test and make sure your stuff looks fine on those 2-3 browsers and then just wait until MS releases IE 7 which better be fully compliant.
Was This Post Helpful? 0
  • +
  • -

#5 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Posted 16 December 2002 - 04:02 PM

cfasnacht, on Dec 16 2002, 03:36 PM, said:

from what i've heard IE, does a poor job in displaying css properly, and there isn't much you can do about it except try pulling some tricks with your style sheets code.

you shouldn't have nearly as many issues with netscape 7 or mozilla they along with opera are the most compliant browsers out there.  if you are steadfast on going the way you are now..i'd test and make sure your stuff looks fine on those 2-3 browsers and then just wait until MS releases IE 7 which better be fully compliant.

It was all the "little things" that bugged the {expletive deleted} out of me that drove me away from IE to begin with ... of course, I have to keep using it occasionally; especially on MS pages.

What I may try doing is writing additional PHP code to handle some of the idiosyncrasies of IE. At the very least, I should do this for my poetry section. I used the white-space: pre; rule in CSS but IE ignores it completely. I guess I'll have to output the actual HTML PRE tag when IE is present...

I DLed the latest Mozilla to see what the Gecko engine does...much to my surprise it is even worse than IE on my site... Colour me unimpressed. Now, Gecko worked just fine on the www.glish.com site that I got my CSS from so perhaps the problem with it lies in how I changed the code.

I am so completely sick of Netscape that I really don't want to DL it just to test my site. It's not that important to me for everything to be completely compatible across all browsers -- but those blasted "little things"... I won't hold my breath waiting for IE7. I've been burned by MS in the past. Occastionally they get things really right (SQL Server 2000, Visual Studio .NET) but I can't stand using their mainstream products (IE, Office) for very long before I'm cursing a blue streak.

I just wish everybody would switch to Opera and be done with it! OK, OK, no more preaching; let's not turn this into a coding jihad... :)
Was This Post Helpful? 0
  • +
  • -

#6 klewlis   User is offline

  • cur tu me vexas?

Reputation: 8
  • View blog
  • Posts: 1,723
  • Joined: 09-November 01

Re: Pure CSS "tables"

Posted 17 December 2002 - 09:08 AM

ok if it doesn't work in IE OR NS, then there's a problem with your code, not the browsers. IE6 and NS6/Moz both display css very well, and the most significant problem I have between the two of them is slightly different margin spacing.

As for the table sizing, is there a reason you can't just use the width attribute?

I've never had a problem with IE and tables.

Considering that 75-80% of people are still using IE, the best rule of thumb is to design for IE and then make adjustments for other browsers.

You can also use two different stylesheets if you need to, without having two different versions of the page.
Was This Post Helpful? 0
  • +
  • -

#7 roger   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 10-November 02

Re: Pure CSS "tables"

Posted 17 December 2002 - 12:43 PM

unfortunately, I can't get anything but your homepage; I'm on Moz 1. I don't think it's necessary to not use tables. not sure how that improves your site. granted, it's a fun study to try to do it solely using CSS, but isn't CSS designed as a way to manipulate things, rather than being the solemeans of design?
it's always good to check your page in different browsers(as I know you do), but to hope that Opera will become the main browser for the world anytime soon... good luck! ;)

the site I 've been working on uses CSS to drive it's font formatting, and I use tables for the layout. viewed in IE, Moz, Opera, iCab, and Netscape 4.x gives me pretty much the same thing, except for the blasted way that NS does background images, which causes me to use a script for a different css. (I'm not done doing all of that yet...) here's the site: Counterpoint
there are few things that each browser does differently, link mouseovers and such, but I've been pretty happy with it.
:D
Was This Post Helpful? 0
  • +
  • -

#8 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Posted 17 December 2002 - 02:02 PM

klewlis, on Dec 17 2002, 10:08 AM, said:

ok if it doesn't work in IE OR NS, then there's a problem with your code, not the browsers.

I reluctantly must agree with you on that point. This is one of those times when I just wish I could trash my full-time job and focus entirely on stuff like my web site or personal programming projects. Any body have clues to the next lotto numbers being drawn? ;)

klewlis, on Dec 17 2002, 10:08 AM, said:

As for the table sizing, is there a reason you can't just use the width attribute?

I was considering something along those line for a few hours last night -- using pixel values for the width. My new train of thought (leaving the station this weekend...) will be to trash the table idea entirely. The content I was going to put into a sorted table I'll display in a "page footer" section on every page instead.

klewlis, on Dec 17 2002, 10:08 AM, said:

I've never had a problem with IE and tables.

I should send you the CSS file I have...give it a shot yourself...IE won't size the table as you would expect it to (using percentages for widths). Perhaps the pixel width would work better but I'm going to use this footer idea instead.

klewlis, on Dec 17 2002, 10:08 AM, said:

Considering that 75-80% of people are still using IE, the best rule of thumb is to design for IE and then make adjustments for other browsers.

Didn't they break the 90% mark? Either way, it is and overwhelming majority. If this were a commercial project and not a personal one, I would certainly put greater effort into making it display perfectly in IE.

klewlis, on Dec 17 2002, 10:08 AM, said:

You can also use two different stylesheets if you need to, without having two different versions of the page.

Well, in the case of IE breaking the poetry portion of the site, it isn't the CSS so much as the HTML tags themselves that will need changing. That's a right-royal pain in the {expletive deleted}.
Was This Post Helpful? 0
  • +
  • -

#9 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Posted 18 December 2002 - 11:14 AM

roger, on Dec 17 2002, 01:43 PM, said:

unfortunately, I can't get anything but your homepage; I'm on Moz 1.

Can you be a little bit more specific? When I viewed my page under Mozilla, it seemed to completely ignore the stylesheet -- so all my content was in black text on a white background and left-aligned in one long series ... as if I had simply typed everything non-stop into a WYSIWYG editor and uploaded the results.

What you should see is a watery-like background graphic and three columns of content. The left-most and right-most columns are 200 pixels wide and the centre column sizes to fit between them. The left column contains my navigational links, the centre is the dynamically loaded content and the right column is "extra" (a quote picked randomly from mySQL, "news" from my tiny world and the Internet Traffic Report global rating graphic.

roger, on Dec 17 2002, 01:43 PM, said:

I don't think it's necessary to not use tables.  not sure how that improves your site.  granted, it's a fun study to try to do it solely using CSS, but isn't CSS designed as a way to manipulate things, rather than being the solemeans of design?

I suppose that is up to personal interpretation. From a practical stand-point (as has been noted in this thread) a web developer should not be abandoning tables as a means of layout control just yet.

However, reading the W3C suggestions and RFCs can lead one to be quite rabid about the separation of design and content.

roger, on Dec 17 2002, 01:43 PM, said:

but to hope that Opera will become the main browser for the world anytime soon

A man can dream about a world not dominated by Microsoft ... no matter how futile the reality may be. Heck, most of us dream about winning the lottery too and like they say...a lottery is just a tax on people who are bad at math!
Was This Post Helpful? 0
  • +
  • -

#10 klewlis   User is offline

  • cur tu me vexas?

Reputation: 8
  • View blog
  • Posts: 1,723
  • Joined: 09-November 01

Re: Pure CSS "tables"

Posted 18 December 2002 - 12:38 PM

hrm... it's really strange that moz isn't reading the stylesheet. I use that same format all the time--except for the xhtml, and I'm wondering if something in that is what's messing it up. Have you run it through a validator?

Anyway, try this format for linking the stylesheet instead:

<style type="text/css" media="all">
@import "MyThreeColumns.css";
</style> 



And see if that makes any difference...?
Was This Post Helpful? 0
  • +
  • -

#11 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Posted 19 December 2002 - 03:12 AM

klewlis, on Dec 18 2002, 01:38 PM, said:

hrm... it's really strange that moz isn't reading the stylesheet. I use that same format all the time--except for the xhtml, and I'm wondering if something in that is what's messing it up. Have you run it through a validator?

Yup, I passed the URI for my homepage into the W3C validator and it checks out as XHTML 1 Transitional -- just as my doctype declares. I was going to try for Strict but I figured I'd get all the display issues out of my way first.

klewlis, on Dec 18 2002, 01:38 PM, said:

Anyway, try this format for linking the stylesheet instead:

<style type="text/css" media="all">
@import "MyThreeColumns.css";
</style> 



And see if that makes any difference...?

Just tried that now, this morning. IE and Opera don't mind but Mozilla 1.2 remains the same, no colour, no style rules...nothing, just the pure content... I haven't played with Moz's settings -- its the straight install from their download package.

I think I mentioned that I surfed to the site where I picked up my initial CSS code and Moz handled that just hunkey-dorey fine... Kinda yanks my chain... :blink:

Festive regards,
Was This Post Helpful? 0
  • +
  • -

#12 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Post icon  Posted 22 December 2002 - 05:35 AM

The plot sickens...

I've been playing around a bit more with this issue of Mozilla apparently ignoring the CSS rules on my website. Here's the experiment I just performed.

I took a similar CSS layout (now in use on my site) from http://www.thenoodle...sson/boxes.html. Again, I used the three column layout but this one includes a "top" section like a nice banner.

Mozilla views this page just fine -- just as it views the original page from http://www.glish.com/css without problems. I copied the CSS without changing anything; I kept it intact, as provided.

I uploaded it and an index.html page to www.garstor.ca/test/index.html.

And there, Mozilla pukes up blood and ignores the CSS layout... I wanted to rule out any chance of an error in the changes I made to the CSS. Instead, the problem appears to be where the file is coming from than anything else...

What on earth is going on here?!?

Roger, you mentioned not being able to use my site with your Mozilla. Can you check out that test link and see if it displays properly for you? None of my actual content is in it, just a few sentences and some pseudo-Latin filler.

Festive Regards,
Was This Post Helpful? 0
  • +
  • -

#13 roger   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 10-November 02

Re: Pure CSS "tables"

Posted 22 December 2002 - 10:56 AM

hey Gar,
it doesn't pick up the css on my Moz either. just straight paragraphs pinned to the left edge.

I don't know anything about xml, but is it the
<style type="text/css" media="all">
<!--
@import url("./boxes.css");
-->
</style>

code?
is that the way you link to an external css file in xml? or xhtml, or whatever? have you tried just a normal href css external link?
<link rel=stylesheet type="text/css" href="boxes.css" media="all">




good luck! you'll figure it out! B)
Was This Post Helpful? 0
  • +
  • -

#14 Garstor   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 09-October 02

Re: Pure CSS "tables"

Posted 22 December 2002 - 11:33 AM

roger, on Dec 22 2002, 11:56 AM, said:

hey Gar,
it doesn't pick up the css on my Moz either.  just straight paragraphs pinned to the left edge.

[b]I don't know anything about xml, but is it the
<style type="text/css" media="all">
<!--
@import url("./boxes.css");
-->
</style>

code?</b>   is that the way you link to an external css file in xml?  or xhtml, or whatever?  have you tried just a normal href css external link?
<link rel=stylesheet type="text/css" href="boxes.css" media="all">



Here's the latest hot skinny...
www.garstor.ca/test/linkcss.html uses this code:
<link href="boxes.css" rel="stylesheet" type="text/css" media="all" /></CODE]

www.garstor.ca/test/index.html uses:
[CODE]<style type="text/css" media="all">
<!--
@import url("./boxes.css");
-->
</style>

and this does not work either.

www.garstor.ca/test/inlinecss.html uses:
<style type="text/css" media="all">


And proceeds to define the CSS rules in the HTML file before closing the STYLE tag. This method works for Mozilla!! Now for the real kicker...when I look at the source for the original pages (with Mozilla, which works on that server) they use the @import method. So Mozilla users for my site are out of luck until I can code up some PHP to detect Mozilla and "write" the CSS inline...

Well, sorry Rog, but that will have to wait a bit. I am going to start experimenting with Invision board to re-do my message forums (used to run an old-fashioned BBS in bygone years so I'm trying to bring that to the web).
Was This Post Helpful? 0
  • +
  • -

#15 roger   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 10-November 02

Re: Pure CSS "tables"

Posted 23 December 2002 - 07:54 AM

Quote

Well, sorry Rog, but that will have to wait a bit.


hehe. no problem, Garstor. :D
I am really intrigued now by this "all css" stuff. digging around on some of the pages you linked(that noodleincident site), has led me all sorts of places, and to stuff that makes me feel even more ignorant! :blink: but hey, that's cool... I'm looking forward to reading up on this stuff over vacation and trying my hand at it. thanks!!

happy holidays!! B)
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2