467,858 Members | 1,657 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,858 developers. It's quick & easy.

CSS Table problem

I'm trying to do a table for laying out a links page in CSS. See
http://qldstorms.com/links.php. My stylesheet is at
http://qldstorms.com/styles/screen.css. My problem is that if the link name
in the first column get's word wrapped, but the description text in the
second column doesn't, the next row get's wrapped to sit next second line
of the link name. Also if a two line link name is last in the category box,
it'll cross the outside of the box. I thought by having a div for each
item(link name and description included) it would make a box around that
that nothing could get in. Can anyone help me with this one? Thanks,

David
Nov 2 '05 #1
  • viewed: 1600
Share:
7 Replies
David Findlay <da***@davsoft.com.au> wrote:
Subject: CSS Table problem
The phrase "CSS table" should only be used to refer to an object
generated by any of the "table*" values for the "display" property.
I'm trying to do a table for laying out a links page in CSS. See
http://qldstorms.com/links.php.


What you have there is a layout, nothing to do with either HTML or CSS
tables.

You've made the mistake of ditching most structural and semantic markup
in favour of div markup. The little structural and semantic markup that
is there is incorrect (<h1)links</h1> for example).

When asking others to help you with a problem it is considered a minimum
courtesy to ensure that your code is valid, your code doesn't validate.
http://validator.w3.org/check?uri=ht....com/links.php

--
Spartanicus
Nov 2 '05 #2
Spartanicus <in*****@invalid.invalid> wrote:
http://qldstorms.com/links.php.


The little structural and semantic markup that
is there is incorrect (<h1)links</h1> for example).


Strike that, I forgot that this isn't your index page.

--
Spartanicus
Nov 2 '05 #3
> You've made the mistake of ditching most structural and semantic markup
in favour of div markup. The little structural and semantic markup that
is there is incorrect (<h1)links</h1> for example).

When asking others to help you with a problem it is considered a minimum
courtesy to ensure that your code is valid, your code doesn't validate.
http://validator.w3.org/check?uri=ht....com/links.php


Fixed that now, had center instead of middle. However still got the problem.
Is there a better way to do these types of pages with better structure?
Thanks,

David
Nov 2 '05 #4
David Findlay <da***@davsoft.com.au> wrote:
When asking others to help you with a problem it is considered a minimum
courtesy to ensure that your code is valid, your code doesn't validate.
http://validator.w3.org/check?uri=ht....com/links.php


Fixed that now, had center instead of middle.


Your markup does not validate.

--
Spartanicus
Nov 2 '05 #5
David Findlay wrote in message news:43**********************@per-qv1-newsreader-01.iinet.net.au...
I'm trying to do a table for laying out a links page in CSS. See
http://qldstorms.com/links.php. My stylesheet is at
http://qldstorms.com/styles/screen.css. My problem is that if the link name
in the first column get's word wrapped, but the description text in the
second column doesn't, the next row get's wrapped to sit next second line
of the link name. Also if a two line link name is last in the category box,
it'll cross the outside of the box. I thought by having a div for each
item(link name and description included) it would make a box around that
that nothing could get in. Can anyone help me with this one? Thanks,


g'day mate

as spartanicus already mentioned, "fix your page first"
a few pointers to this:
you have
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/TR/html4/loose.dtd"">

the correct entry for the DTD should be (note the wuotes before and after the url)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(BTW I would use strict)

a bit to read:
http://www.alistapart.com/stories/doctype/

now, your page is HTML but you have also XHTML "syntax" in it which might throw
a few extra problems (I added numbers in front for easy pointers):
1:<head>
2:<title>qldstorms.com</title>
3:<link rel="stylesheet" type="text/css" media="screen" href="styles/screen.css">
4:</style>
5:<link href="http://qldstorms.com/syndication.php" rel="alternate" type="application/rss+xml" title="qldstorms.com News" />
6:<META name="description" content="Website with weather information related to South East Queensland and North East New South
Wales. Stormchasing reports and forecasts.">

3: you use <link> to access your stylesheet, that's good IMO but
4: what is this </style> end tag for?
5: this rss+xml link has XML (XHTML) ending " /> but your DTD isn't XML/XHTML
6: the meta description is again HTML formed.

also check your CSS
http://jigsaw.w3.org/css-validator/

it's valid but has a few warnings.
you might also want to abbreviate some entries:
http://www.w3.org/TR/REC-CSS2/box.ht...ing-properties

padding-bottom : 3px;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
as
padding: 3px

and
http://www.w3.org/TR/REC-CSS2/box.ht...der-properties

border-bottom-color : #6e75c2;
border-bottom-style : solid;
border-bottom-width : 1px;
border-left-color : #6e75c2;
border-left-style : solid;
border-left-width : 1px;
border-right-color : #6e75c2;
border-right-style : solid;
border-right-width : 1px;
border-top-color : #6e75c2;
border-top-style : solid;
border-top-width : 1px;

can be written as
border-top: 1px solid #6e75c2
border-right: 1px solid #6e75c2
border-bottom: 1px solid #6e75c2
border-left: 1px solid #6e75c2

or even shorter
border: 1px solid #6e75c2

I know, that doesn't help you with your problem yet,
but it is easier for others to point you in the right
direction if there is a "clean slate"

Nov 2 '05 #6
David Findlay wrote:
http://qldstorms.com/links.php. My stylesheet is at
http://qldstorms.com/styles/screen.css. My problem is that if the link name
in the first column get's word wrapped, but the description text in the
second column doesn't, the next row get's wrapped to sit next second line
of the link name. [...]

It would have been nice if you had provided a sample of the problem.
None of the column 1 content wraps like you describe.
Since this is tabular data, why not use a table?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Nov 2 '05 #7
David Findlay wrote:
I'm trying to do a table for laying out a links page in CSS. See
http://qldstorms.com/links.php. My stylesheet is at
http://qldstorms.com/styles/screen.css. My problem is that if the link
name in the first column get's word wrapped, but the description text in
the second column doesn't, the next row get's wrapped to sit next second
line of the link name. Also if a two line link name is last in the
category box, it'll cross the outside of the box. I thought by having a
div for each item(link name and description included) it would make a box
around that that nothing could get in. Can anyone help me with this one?
Thanks,


I eventually managed to find what i needed to fix it.

overflow: hidden

on the linkItem div seemed to fix it. I've removed some of the dtd stuff
because it was wrong, I'm going to try and fix that and all the other
issues now. Thanks,

David
Nov 2 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Andrew | last post: by
2 posts views Thread by Savas Ates | last post: by
6 posts views Thread by Murtix Van Basten | last post: by
4 posts views Thread by Not Me | last post: by
1 post views Thread by Kleist | last post: by
reply views Thread by Luis Esteban Valencia | last post: by
3 posts views Thread by mylog | last post: by
dmjpro
3 posts views Thread by dmjpro | last post: by
3 posts views Thread by josephamarks | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.