CSS tables - more confused

[Jim Scott]

Having taken advice here I constructed a css stylesheet for a table to hold
my page contents in position. Prior to that, those of you who have stayed
awake, may recall my tables were entirely in HTML.
It worked ok, but just out of interest I deleted the stylesheet and ran the
page without it. Apart from a wider column border, it did not make a blind
bit of difference. Was it the waste of time it seems to be?
For those of you wishing to help, the first 6 pages in the 'Shipyards"
gallery are with css, the rest are not.

 

[David Dorward]

It worked ok, but just out of interest I deleted the stylesheet and ran
the page without it. Apart from a wider column border, it did not make a
blind bit of difference. Was it the waste of time it seems to be?

So you styled your page to look a lot like the browser default rendering.
That does seem like something of a waste of time, although you never know
what the default stylesheet will look like in future browsers.

Of course you are still abusing tables for layout, so you don't get the
benefits of accurate markup, and your code is littered with inline style,
so you don't get the benefits of smaller pages that are easier to maintain
and faster to download.

 

[Jim Scott]

So you styled your page to look a lot like the browser default rendering.
That does seem like something of a waste of time, although you never know
what the default stylesheet will look like in future browsers.

Of course you are still abusing tables for layout, so you don't get the
benefits of accurate markup, and your code is littered with inline style,
so you don't get the benefits of smaller pages that are easier to maintain
and faster to download.

David, I know you are trying to be helpful, but I simply don't understand
your jargon."So you styled your page to look a lot like the browser default
rendering": means nothing to me. I styled the pages to look the way I
wanted them to look (in any browser - if I can).
I suppose to reduce inline style, I could use a different stylesheet for
each gallery and a different one again where the page requires 1 column
instead of 2.
I understand your point that I am abusing tables, but until someone points
me to a helpful page, (one that doesn't assume you know what they are
talking about already), which shows clearly what to do to achieve the same
appearance, then I have to go on as I am, leave it how it is or return to
inline tables.

 

[Nico Schuyt]

For those of you wishing to help, the first 6 pages in the 'Shipyards"
gallery are with css, the rest are not.
http://freespace.virgin.net/mr.jimscott/

In addition to the comments of David: The quality of the pictures is *very*
bad. You must have done something wrong in your picture editor. If you post
a link to an original, someone might give you some advice.

 

[Jim Scott]

In addition to the comments of David: The quality of the pictures is *very*
bad. You must have done something wrong in your picture editor. If you post
a link to an original, someone might give you some advice.

Yes I know that, but I would like to get the layout right before I go back
and do them.

 

[David Dorward]

David, I know you are trying to be helpful, but I simply don't understand
your jargon."So you styled your page to look a lot like the browser
default rendering": means nothing to me.

There isn't any jargon there, its plain English. The browser renders the
markup with its default style if there is no CSS, and with your style if
there is. If they look the same, then your style and the browser default
are the same.

I styled the pages to look the
way I wanted them to look (in any browser - if I can).

Which, if removing the style makes no difference, is the same as the browser
default.

I suppose to reduce inline style, I could use a different stylesheet for
each gallery and a different one again where the page requires 1 column
instead of 2.

I'd suggest three style sheets. One column, Two column, and Common. Where
the common includes all the style that doesn't change between layouts (such
as colour schemes and font styles).

I understand your point that I am abusing tables, but until someone points
me to a helpful page, (one that doesn't assume you know what they are
talking about already), which shows clearly what to do to achieve the same
appearance, then I have to go on as I am, leave it how it is or return to
inline tables.

Your layout doesn't appear to be particularly complex, I'd suggest cleaning
out the incorrect markup, then taking each bit of the appearance one
section at a time. Use the specification to look for likely property names,
and then post a specific question if you get stuck.

 

[Jim Scott]

There isn't any jargon there, its plain English. The browser renders the
markup with its default style if there is no CSS, and with your style if
there is. If they look the same, then your style and the browser default
are the same.


Which, if removing the style makes no difference, is the same as the browser
default.


I'd suggest three style sheets. One column, Two column, and Common. Where
the common includes all the style that doesn't change between layouts (such
as colour schemes and font styles).


Your layout doesn't appear to be particularly complex, I'd suggest cleaning
out the incorrect markup, then taking each bit of the appearance one
section at a time. Use the specification to look for likely property names,
and then post a specific question if you get stuck.

This time I *am* with you. Must cut down on the ale.
I'll go off and do some searching, but I tried using css column layouts (2
and 3 as it happened). My problems seemed to arise with % widths and the
three main browsers. Off I go to try again.

 

[David Dorward]

I'll go off and do some searching, but I tried using css column layouts (2
and 3 as it happened). My problems seemed to arise with % widths and the
three main browsers.

The following should help somewhat:

http://css-discuss.incutio.com/?page=TwoColumnLayouts
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

 

[Jim Scott]

The following should help somewhat:

http://css-discuss.incutio.com/?page=TwoColumnLayouts
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Ta

 

[Jim Scott]

Your layout doesn't appear to be particularly complex, I'd suggest cleaning
out the incorrect markup, then taking each bit of the appearance one
section at a time. Use the specification to look for likely property names,
and then post a specific question if you get stuck.

Thanks David
You, of course, were right; there was a lot of excess markup. As a webmaker
beginner, it is difficult to understand the unnecessary/duplicate markup
that the various WYSIWYGs leave behind. For a start we don't know what is
necessary and what is not. Without the use of a WYSIWYG I would never have
got very far. It does what it says on the tin and if it doesn't do it very
well, at least it stimulates the interest to go further.

Anyhoo I have cleared most the crap out of my site markup without too much
tearing of hair. I have stayed with the tables route, but all are
controlled by stylesheets (although I believe I can combine all my
stylesheets into one, but I haven't gone there yet).

 

[Jim Scott]

In addition to the comments of David: The quality of the pictures is *very*
bad. You must have done something wrong in your picture editor. If you post
a link to an original, someone might give you some advice.

Can you be more specific? All the photos are mine and I have most of the
originals. Some I have changed, some I have scanned and not yet changed and
some I don't think need changing. I have a limit on webspace and there are
lots here.

 

[Nico Schuyt]

Can you be more specific?

No need to do so. *All* pictures are bad

All the photos are mine and I have most of
the originals. Some I have changed, some I have scanned and not yet
changed and some I don't think need changing. I have a limit on
webspace and there are lots here.

Like I said, post an original. And inform us about the picture editor you
use. Maybe someone can help you.

 

[Jim Scott]

No need to do so. *All* pictures are bad


Like I said, post an original. And inform us about the picture editor you
use. Maybe someone can help you.

You are beginning to annoy me. What is your definition of *bad* and what
qualifies you to pass such cold judgement?

 

[dorayme]

Can you be more specific? All the photos are mine and I have most of the
originals. Some I have changed, some I have scanned and not yet changed and
some I don't think need changing. I have a limit on webspace and there are
lots here.

Many of the pics look nice. (I notice that some of them were very sharply
pixilated - the sort of grainy effect that looks artificial. I used to use a
developer called Rodinal on Tri-X to get a big grain effect sometimes, grain
but sharp. You get a small grain effect in many pics. I expect you use a
digital camera.)

Anyway, more to the point: preparing pics for the web is a big subject! I am
sure the person who made the comments about pic quality will oblige you
further. For what it is worth, I took a look at a couple of pics and agree
that you could achieve better results given the file sizes if the original
pics are of a high quality.

Take a look at Windfarm-1993. First, what did you do to prepare it, starting
from the camera itself. What format does the output from the camera come in?
What software are you using? Do you prepare each pic individually? Sorry,
but it is sort of necessary to look into these things...

If you don't want to go into everything, this is my advice: take pics at the
highest res. Try for tiff or very high jpg output from the camera. Use very
good software like Photoshop to jpg, don't be too ambitious in image size,
trade a bit of image size for extra quality (less compression). Compress
before you resize (there being more information for the jpg algorithm to
work on).

If you are batch processing all, there are further tips but it gets
complicated, you need to employ strategies to batch and then sort, batch
again and so on. You simply can't batch a big collection and compress all to
tight limits and expect good results for all. Perhaps I will stop here for
now...

dorayme

 

[dorayme]

Can you be more specific? All the photos are mine and I have most of the
originals. Some I have changed, some I have scanned and not yet changed and
some I don't think need changing. I have a limit on webspace and there are
lots here.

Sorry Jim, I missed your bit about scanning in my last post and just
noticed! So maybe we need to look at your method of scanning. My remarks can
be transposed for the scanning procedure: scan at the highest quality and go
from there in a good photo editor.

If you are not sure about what is not the best about your pics - and as I
said, many are *very nice and acceptable* - perhaps look at Windfarm and
look at around the props, the pole on the left; look at Anchors2 and over
the bridge to the right of the windmill there... sort of watery aberrations,
possibly the sign of over compression (the poor algorithm does it best!).
Yes, I know around the props look almost ok because it might be air
disturbance! But it is a fault I think that can be seen in a few pics where
there is not this "excuse"

dorayme

 

[Spartanicus]

If you don't want to go into everything, this is my advice: take pics at the
highest res.

Pointless if most of the information will be thrown away as is common
with web images.

Use very good software like Photoshop to jpg

Expensive advice, and unnecessary, Photoshop uses the same jpeg
algorithms as other software.

Compress before you resize (there being more information for the jpg algorithm to
work on).

Resizing is performed on uncompressed 24 bit bitmaps, the above advice
would therefore result in extra information loss.

 

[Oli Filth]

Compress before you resize (there being more information for the jpg algorithm
to work on).

JPEG compression almost certainly works by uncompressing back to a
bitmap, resizing (decimating and interpolating), and then recompressing
to JPEG. Hence two lots of compression, hence more loss.

 

[dorayme]

JPEG compression almost certainly works by uncompressing back to a
bitmap, resizing (decimating and interpolating), and then recompressing
to JPEG. Hence two lots of compression, hence more loss.

There is an image file of some MB, the pic is also way too big pixel-wise.
Wanted is 500px sq and file to about 50K.

When starting with a big px size high quality file of any type, two
operations are usually necessary:

1. Reducing the pixel size

2. Compressing the info using say jpg.

Of course, both operations will result in loss of quality. I was using the
term compression to refer to the operation in 2.

What exactly are you saying more than this?

Perhaps you are saying it is bad advice to go in the order I recommended.
If so, I am not following your argument

dorayme

(I tend to go in the order I recommend, though I sometimes go in the reverse
order when I think a px size reduction is all that is needed, and sometimes
because I am slack and the result is sure to be acceptable either way...).

 

[Blinky the Shark]

Many of the pics look nice. (I notice that some of them were very sharply
pixilated - the sort of grainy effect that looks artificial. I used to use a
developer called Rodinal on Tri-X to get a big grain effect sometimes, grain
but sharp. You get a small grain effect in many pics. I expect you use a
digital camera.)

Whoa. Chemicals. I used to do b/w darkroom work, too. I can smell
the stop bath, now.

 

[dorayme]

Pointless if most of the information will be thrown away as is common
with web images.

It is not pointless if you do not know what use you will make of the pic or
if you might want to print later. And it is not pointless if they are to be
given later to someone else to prepare - who would not want better orig pics
to work with? And it is not pointless as general advice knowing nothing
about how what camera does what job in compressing things, any camera will
do less damage the less it goes to work with its hatchet on the information.

Expensive advice, and unnecessary, Photoshop uses the same jpeg
algorithms as other software.

I am sure there is a lot of good software besides PS. If it is really true
that there is a lot of cheap software that does this job just as well, then
fine. Suck it and see, I would not tend to be too trusting beforehand
though... But I don't think (not quite on your point, I realise) the same
can be said for resizing (px size, height, width wise) algorithms in
different software. In PS it is very good in quality (using the bicubic,
which was slow on old computers but lightening on modern)

Resizing is performed on uncompressed 24 bit bitmaps, the above advice
would therefore result in extra information loss.

Oli was saying something on this bit, I am not fully with you. Could you
spell out this argument please.

If you resize first (meaning changing a 1150px sq pic to 500px sq) you get
a smaller pic with many pixels discarded and adjusted depending on the
algorithm used. If the file size resulting is too big, you hit it with a jpg
compression technology and you lose more info. Either way, you lose info
twice. What is it about the order I suggested that seems wrong to you?

I do it in one or the other order at different times. I have only an
intuitive idea of which order is "best" and in truth, it is hard to tell the
difference between a pic prepared one way rather than another! I was
figuring that it was best for the more complex algorithm of jpg compression
(holding the px-size) was best done on more good quality info. But I do not
know for sure. I am yet to see that I gave Jim any bad (rather than
unnecessary) advice.

dorayme