Page Not displaying Properly?

[Els]

Dont to me, what happens, what browser?

Netscape 7.1
When the window gets narrower, and there is not enough room
for the right hand side 'grid', that image disappears,
showing white space, then when the right side of the window
touches the boxes, the left hand side 'grid' starts to get
narrower (the two sides should get narrower at the same
time, so the boxes stay centered, right?)
And then, when the boxes touch the left hand side, the boxes
with the loginstuff seem to get a smaller percentage of the
total width, which looks like it's sliding to the right,
while you push the window side to the left...
Well, it's dificult to explain, see if you can have a look
in Netscape yourself ;-)

 

[={ Advocated }=]

Netscape 7.1
When the window gets narrower, and there is not enough room
for the right hand side 'grid', that image disappears,
showing white space, then when the right side of the window
touches the boxes, the left hand side 'grid' starts to get
narrower (the two sides should get narrower at the same
time, so the boxes stay centered, right?)
And then, when the boxes touch the left hand side, the boxes
with the loginstuff seem to get a smaller percentage of the
total width, which looks like it's sliding to the right,
while you push the window side to the left...
Well, it's dificult to explain, see if you can have a look
in Netscape yourself ;-)

hmm i will, any ideas why this is happening and how it could be fixed?

 

[Nico Schuyt]

Again, is posting into alt.html with the subject "Page Not displaying
Properly?" is a confirmation that your"base job" is done?

Well, IMO the creation of basic layout and color scheme can be defined as
"base job". In fact it's often the most difficult part in the creation of a
site (for me
Regards, Nico

 

[Isofarro]

={ Advocated }= wrote:

[On the low quality of the markup]

Gets the job done,

And posting into alt.html with the subject "Page Not displaying
Properly?" is a confirmation that your job is done?

Did i say that it was done muppet? It says it gets the base done..

Again, is posting into alt.html with the subject "Page Not displaying
Properly?" is a confirmation that your"base job" is done?

 

[rf]

Well, IMO the creation of basic layout and color scheme can be defined as
"base job". In fact it's often the most difficult part in the creation of a
site (for me

Hmmm. A possible interpretation. The OP has finished the "base job" [1]
except for one small bug he/she cannot figure out. I sort of agree, we are
being used as a final alpha test, if you like, which is fine by me.

However I find it bizarre that the suggestions in this thread on other
problems with the site [2] have been totally rejected. At one point it was
claimed that "it gets the job done" and "positive feedback from the
customer". I wonder what that customer will think this time next year when
somebody else is contracted to change the site and charges a bomb to first
of all bring it up to a modern maintainable standard?

[1] I can only assume that "base job" can be likened to a sketch on the back
of an envelope. We get to see the look and sort of feel of the site but the
fundamentals don't actually work, like the links and the forms (or rather
the lack of forms).

[2] Deprecated elements. Minimal use of CSS. Transitional instead of strict.
Use of tables [3]. Accepting the use of tables, unnecessarily complex and
hard to read tables that, if one turns on borders, somehow seem to overlap
each other in a way I could probably understand if I spent an hour or so
pulling it apart.

[3] OK, I have admitted/suggested elsewhere that tables may be the only way
to go with this one - those corners simply can not be done using <div>'s and
CSS. The spec says it can be done but IE5.x will simply not play the game
here.

Cheers
Richard.

 

[={ Advocated }=]

Well, IMO the creation of basic layout and color scheme can be defined as
"base job". In fact it's often the most difficult part in the creation

of

a
site (for me

Hmmm. A possible interpretation. The OP has finished the "base job" [1]
except for one small bug he/she cannot figure out. I sort of agree, we are
being used as a final alpha test, if you like, which is fine by me.

However I find it bizarre that the suggestions in this thread on other
problems with the site [2] have been totally rejected. At one point it was
claimed that "it gets the job done" and "positive feedback from the
customer". I wonder what that customer will think this time next year when
somebody else is contracted to change the site and charges a bomb to first
of all bring it up to a modern maintainable standard?

[1] I can only assume that "base job" can be likened to a sketch on the back
of an envelope. We get to see the look and sort of feel of the site but the
fundamentals don't actually work, like the links and the forms (or rather
the lack of forms).

[2] Deprecated elements. Minimal use of CSS. Transitional instead of strict.
Use of tables [3]. Accepting the use of tables, unnecessarily complex and
hard to read tables that, if one turns on borders, somehow seem to overlap
each other in a way I could probably understand if I spent an hour or so
pulling it apart.

[3] OK, I have admitted/suggested elsewhere that tables may be the only way
to go with this one - those corners simply can not be done using <div>'s and
CSS. The spec says it can be done but IE5.x will simply not play the game
here.

Cheers
Richard.

Well id say even the base of this site isnt finished yet, its working up
slowly.. I havent been doing html or css for long atall, im having to learn
php too so i can get this site done.. The client is a close business which i
know friends of, thats why ive got the site to do.. i dont do this for a
business, so if there are errors its because im learning.

I felt tables were the only possible way to get the look and feel of the
design; i originally drew this idea out on paper.. Yes my tables arent
exactly neat, but i couldnt get the exact look i wanted without; even the
small gaps etc are meant to be there..

Slowly the CSS is growing, but only as i learn how to do new stuff, i was
advised to use Transitional instead of strict by a fair few people,
including the owner of:
http://www.thefixor.com who is a friend.

As you say, the links and forms arent meant to work yet, thats because i
have to design the base before i do the other pages, and the forms are going
to be done in php which i am currently in the process of learning..

I know i do have some problems with it, but atleast it is valid for
transitional, i can eventually work up to getting it to strict once i
understand what it is, and probably iron out all the errors..

 

[Els]

hmm i will, any ideas why this is happening and how it could be fixed?

Haven't looked, but i'm pretty sure it has to do with the
mixup of px widths and percentage widths you are using.
You really should straighten that table up a bit...

It doesn't have to be bad to use a mix of px and %, but you
have to be careful how you mix them. Right now, your table
looks different in every browser. Opera for instance uses a
much wider part of the window for your login box, than IE,
while Netscape had that box width percentage varying with
the window size... If everything would be sorted in that
table, this difference would exist.

 

[={ Advocated }=]

Haven't looked, but i'm pretty sure it has to do with the
mixup of px widths and percentage widths you are using.
You really should straighten that table up a bit...

It doesn't have to be bad to use a mix of px and %, but you
have to be careful how you mix them. Right now, your table
looks different in every browser. Opera for instance uses a
much wider part of the window for your login box, than IE,
while Netscape had that box width percentage varying with
the window size... If everything would be sorted in that
table, this difference would exist.

Yea i thought that would have something todo with it. Thanks for spotting it
out, what is better to use, all percentages or all pixels, if percentages
how can you find the correct percentage to match the existing pixel size?

 

[rf]

Isofarro wrote:
Again, is posting into alt.html with the subject "Page Not displaying
Properly?" is a confirmation that your"base job" is done?

Well, IMO the creation of basic layout and color scheme can be defined as
"base job". In fact it's often the most difficult part in the creation

of

a
site (for me

Hmmm. A possible interpretation. The OP has finished the "base job" [1]
except for one small bug he/she cannot figure out. I sort of agree, we are
being used as a final alpha test, if you like, which is fine by me.

However I find it bizarre that the suggestions in this thread on other
problems with the site [2] have been totally rejected. At one point it was
claimed that "it gets the job done" and "positive feedback from the
customer". I wonder what that customer will think this time next year when
somebody else is contracted to change the site and charges a bomb to first
of all bring it up to a modern maintainable standard?

[1] I can only assume that "base job" can be likened to a sketch on the back
of an envelope. We get to see the look and sort of feel of the site but the
fundamentals don't actually work, like the links and the forms (or rather
the lack of forms).

[2] Deprecated elements. Minimal use of CSS. Transitional instead of strict.
Use of tables [3]. Accepting the use of tables, unnecessarily complex and
hard to read tables that, if one turns on borders, somehow seem to overlap
each other in a way I could probably understand if I spent an hour or so
pulling it apart.

[3] OK, I have admitted/suggested elsewhere that tables may be the only way
to go with this one - those corners simply can not be done using <div>'s and
CSS. The spec says it can be done but IE5.x will simply not play the game
here.

Cheers
Richard.

Well id say even the base of this site isnt finished yet, its working up
slowly.. I havent been doing html or css for long atall, im having to learn
php too so i can get this site done.. The client is a close business which i
know friends of, thats why ive got the site to do.. i dont do this for a
business, so if there are errors its because im learning.

We are all learning all the time. I learnt something just yesterday (as a
result of some misinformation I posted here)

I felt tables were the only possible way to get the look and feel of the
design;

In this case, and since you are learning, I agree.

i originally drew this idea out on paper.. Yes my tables arent
exactly neat, but i couldnt get the exact look i wanted without; even the
small gaps etc are meant to be there..

Hmmm. Maybe I'll have a closer look

Slowly the CSS is growing, but only as i learn how to do new stuff,

Yeah, it's a different thing. Think, though, as you go. For example you are
using tables. Every time you use a table you say border="0". Would it not be
far easier to add a single rule to your CSS file saying table {border: 0;}?
Then you don't have to worry about it any more.

i was
advised to use Transitional instead of strict by a fair few people,

I beg to differ, that advice is incorrect. New designs should (as suggested
by the W3C) use strict.

including the owner of:
http://www.thefixor.com who is a friend.

With all due respect to your friend that is not a good site to use as an
example. Particularly I note that there is no doctype at all, meaning he/she
has never attempted to validate the site.

As you say, the links and forms arent meant to work yet, thats because i
have to design the base before i do the other pages, and the forms are going
to be done in php which i am currently in the process of learning..

That too is OK. Build up the basic template first then add the other pages.
I see what you mean by base now. You mean the template page, the one all the
other ones are copied from. You *are* using us for alpha test and that too
is fine

I know i do have some problems with it, but atleast it is valid for
transitional, i can eventually work up to getting it to strict once i
understand what it is, and probably iron out all the errors..

Strict is easy. It simply means all of the presentational stuff (the <td>
background colours etc) are in the CSS, not the HTML.

Using strict does not mean you can not, during your learning phase, use
these deprecated things. It only means that when you validate you will get
errors. You can accept those errors for now but you will be keeping in mind
that you will eventually correct them. Strict does not "force" you to comply
with the new stuff, it just politely nudges you. Transitional, on the other
hand, just lets you get away with it without thinking.

MHO of course

Cheers
Richard.

 

[rf]

Yea i thought that would have something todo with it. Thanks for spotting it
out, what is better to use, all percentages or all pixels, if percentages
how can you find the correct percentage to match the existing pixel size?

Forget about pixel size. Forget about screen "resolution" (which has nothing
to do with canvas size). Forget about canvas size.

Never use pixels for the width of a table. The table should expand/contract
with the canvas (liquid design). Use %, say 90 of them, if you must. Better
yet don't specify width at all. If you want left/right margins then climb up
to CSS and use margin: 3em; or whatever.

You *may* use pixels for a particular column, for example a navbar column
but it is far better to climb up to CSS again and use ems. Ems are tied to
the font size and so the navbar will adjust its size to whatever font size
the viewer has chosen and you don't get all those nasty wordwrap problems.
Don't specify anything for the other columns. The browser will apportion the
canvas space accordingly.

Far better (yes, I know you are learning) is to not use tables for layout.
CSS is far better. except you loose those nice corners

Cheers
Richard.

 

[Els]

Yea i thought that would have something todo with it. Thanks for spotting it
out, what is better to use, all percentages or all pixels, if percentages
how can you find the correct percentage to match the existing pixel size?

Most people here will say it's better to use all
percentages, or em. I think it depends on what you want to
achieve, and how flexible you want your site to be.
But as to how to find the correct percentage to match
existing pixel size... What existing pixel size? The font?
The font is as flexible as any other art of the site.
I'll leave that question to other people in this group, who
know much much more than I do about flexible design, I'm
only starting to learn it, like you.
One advice: download Netscape and Opera, and test your
design not only in the various browses, but also in various
screen and window sizes.

 

[rf]

[3] OK, I have admitted/suggested elsewhere that tables may be the only
[way to go with this one - those corners simply can not be done using
<div>'s and CSS.

http://www.positioniseverything.net/threecolbglong.html

Narrow the canvas to less than about 700 pixels. Besides these corners are
at the top of the div, not the bottom.

http://www.infimum.dk/HTML/slantinfo.html

Er, I see no corners here.

http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

Falls apart totally when I change my font size

Cheers
Richard.

 

[rf]

[3] OK, I have admitted/suggested elsewhere that tables may be the only
[way to go with this one - those corners simply can not be done using
<div>'s and CSS.

http://www.positioniseverything.net/threecolbglong.html
http://www.infimum.dk/HTML/slantinfo.html
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

Even better:

http://www.sovavsiti.cz/css/corners.html
http://www.superflippy.net/temp/round/round_workaround.html

Div soup though

Cheers
Richard.

 

[Isofarro]

[3] OK, I have admitted/suggested elsewhere that tables may be the only
[way to go with this one - those corners simply can not be done using
<div>'s and CSS.

http://www.positioniseverything.net/threecolbglong.html
http://www.infimum.dk/HTML/slantinfo.html
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

 

[kayodeok]

OK, I have admitted/suggested elsewhere that tables may be the
only way to go with this one - those corners simply can not be
done using <div>'s and CSS

Bullet-Proof Rounded Corners
http://www.albin.net/CSS/roundedCorners/

 

[kayodeok]

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

My apologies, I got the attribution wrong; the above was said by
Richard and not Advocated

 

[Isofarro]

[3] OK, I have admitted/suggested elsewhere that tables may be the only
[way to go with this one - those corners simply can not be done using
<div>'s and CSS.

http://www.positioniseverything.net/threecolbglong.html

Narrow the canvas to less than about 700 pixels.

No problems here. The corners stay in place. (It does slow Phoenix 0.5 on
Linux down to a craw for some reason).

Besides these corners are
at the top of the div, not the bottom.

Well you could:
* Turn your monitor upside down
* Use the corresponding technique to put the slant at the bottom (Its just
an image in the corner of a div)

Er, I see no corners here.

Look in the third row of images, the last image on the right. Since its all
done with borders - that image would be at the corner of a div.

Falls apart totally when I change my font size

The concept is sound, just not implemented with accessibility firmly in
mind. Here's another one using the same concept:

http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html

Yes, the title will be pushed further and further off screen when there's no
room left on screen for it.

 

[Toby A Inkster]

Far better (yes, I know you are learning) is to not use tables for layout.
CSS is far better. except you loose those nice corners

Well, you needn't actually.

Say you have a mycorner.png file like this (beware ASCII art ahead!)

wRRRRRRRRRRRRRRRRRRR
wwwRRRRRRRRRRRRRRRRR
wwwwwRRRRRRRRRRRRRRR
wwwwwwwRRRRRRRRRRRRR
wwwwwwwwwRRRRRRRRRRR
wwwwwwwwwwwRRRRRRRRR
wwwwwwwwwwwwwRRRRRRR
wwwwwwwwwwwwwwwRRRRR
wwwwwwwwwwwwwwwwwRRR
wwwwwwwwwwwwwwwwwwwR

where 'w' is a white pixel and 'R' is red, then try the following:

<div style="background-color:white; padding:1em;">
<div style="background:red url(mycorner.png) no-repeat scroll bottom
left; padding:1em;">

<p>Content.</p>

</div>
</div>

Then you should have a fancy corner. Note that the outer div is not
needed.

 

[={ Advocated }=]

size?

Most people here will say it's better to use all
percentages, or em. I think it depends on what you want to
achieve, and how flexible you want your site to be.
But as to how to find the correct percentage to match
existing pixel size... What existing pixel size? The font?
The font is as flexible as any other art of the site.
I'll leave that question to other people in this group, who
know much much more than I do about flexible design, I'm
only starting to learn it, like you.
One advice: download Netscape and Opera, and test your
design not only in the various browses, but also in various
screen and window sizes.

Well ive redone the layout of the tables, is this better or am i making the
same mistake?

I havent tidied any of the code yet, just working on the layout; nor have
set any heights/widths or anything

http://homepage.ntlworld.com/c.jones13/Test/NewIndex.htm

 

[kchayka]

Falls apart totally when I change my font size

How about <URL:http://www.oasisdining.com/>

Top left corner of the page. No images used, just CSS.