newbie: css width and height

On 2007/12/14 09:04 (GMT) Ruth apparently typed:

(whoever heard of a box with the padding outside of it?)

Hmmm. Virtually every time I buy stuff online that comes in boxes or other
packaging, it goes into another bigger box - surrounded by - padding!!! :-)

Padding is a layer between something and something else. As to any particular
box, whether it is inside or outside is normally happenstance, but in the CSS
standards, it looks like a choice was made for padding to make something take
more space rather than stealing some space from a given amount of space.
Makes sense to me.
--
" Our Constitution was made only for a moral
and religious people. It is wholly inadequate to
the government of any other." John Adams

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/

Felix Miata wrote:

On 2007/12/14 09:04 (GMT) Ruth apparently typed:

(whoever heard of a box with the padding outside of it?)

Hmmm. Virtually every time I buy stuff online that comes in boxes or other
packaging, it goes into another bigger box - surrounded by - padding!!! :-)

Padding is a layer between something and something else. As to any particular
box, whether it is inside or outside is normally happenstance, but in the CSS
standards, it looks like a choice was made for padding to make something take
more space rather than stealing some space from a given amount of space.
Makes sense to me.

Yup, you can't get something from nothing. You either steal it from the
content width (IE in Quirks) to get the padding you need, or steel it
from the surrounding area and add it onto the existing content width
(Standards Mode). [Not to mention the Border Width as well.]

--
Gus

In article
<bzz8j.46469$MJ6.31134 (AT) bgtnsc05-news (DOT) ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

Ok, great... ;-) Put the words "pixel precision" in the dumpster.

One needs to be careful doing this. You would then have no means
of reminding yourself not to crave pixel perfection, some of the
crucial words needed would be missing.

--
dorayme

In article
<1MG8j.260886$kj1.106241 (AT) bgtnsc04-news (DOT) ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

dorayme wrote:

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

Ok, great... ;-) Put the words "pixel precision" in the dumpster.

One needs to be careful doing this. You would then have no means of
reminding yourself not to crave pixel perfection, some of the crucial
words needed would be missing.

Precision, perfection ... potato, potahto ...

Actually I was not splitting hairs about which words... or
criticising your choices (which seemed fine to me). Nor against
the advice not to be too concerned about pixels across browsers.
No, my point was more to do with being careful not to throw the
baby out with the bath water.

--
dorayme

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Ruth wrote:

Original table based website (yes, i know!)
http://www.brianbarr.co.uk
New css-ly structured version
as above but add /testsite

I don't have Verdana. Please read this:
http://k75s.home.att.net/fontsize.html

Test it yourself by removing Verdana from your font settings. It is
unreadable.

Oh, you don't have to assign font-family so often. Set it just once in
the body.

You have too much pixel-precision. Think about flexible design. On my
wide-screen monitor, it's just a skinny column in the center.
http://allmyfaqs.net/faq.pl?AnySizeDesign

The icons on the right links look cartoonish to me.

Oh, please don't top-post.

--
-bts
-Motorcycles defy gravity; cars just suck

Thanks everyone for your comments.

My next attempt - trying to make it more flexible, is it
www.brianbarr.co.uk
add
/testsite/relative/

with some help from the new dreamweaver preset layouts.

I have been messing and playing so I need to spend some time tidying up the
css definitions - because i've been bringing in bits from the old sites and
changing them...blabla, i just want to know if i'm on the right track.

The one thing i can't seem to figure out is which tag to edit so that the
header in the main content has a bit of space on top of it - everything i've
tried doesn't work.

I've tested it the very cool Adobe Device Manager (like a small device
emulator) and it seems ok.

What's the best way to work with images when designing a scalable layout?
Like for example in the side bit ( I know there is an extra unneeded
container there, need to sort that) I've put the image as a background in
the css so that it can be ignored on a tiny screen - is that better than
actually placing the image if the image is not actually adding any content?

I've also updated the icons.

When commenting please bear in mind that customer likes original layout, so
I need to try stay as true to that as poss.

R

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Ruth wrote:

"Beauregard T. Shagnasty" wrote:
I don't have Verdana. Please read this:
http://k75s.home.att.net/fontsize.html

Thanks everyone for your comments.

My next attempt - trying to make it more flexible, is it
www.brianbarr.co.uk
add
/testsite/relative/

I see:

p {
font-size: 85%; <-- Use 100% for content [1]
font-style: normal; <-- Default; not needed

mmm, not sure, it looks HUGE! don't i get any say from a design (rather than
usability!) point of view

...

a {
text-decoration: none; <-- Force me to wave mouse around
looking for links? [2]

Well I have no problems underlining the links, but I have used underlining
to highlight the access keys on each link which looks the best out of
everything I've tried, so what do you reckon?

...

a:hover {
text-decoration: underline; <-- Ahh. There they are.


1. If the content seems too large in your browsers, change your own
preferred size to something you like, but don't mess with mine. Same
applies to your client, if s/he thinks 100% is large.


2. There are two things surfers know how to do:
click on links if they can find them
use their Back button [3]
If you change the default behaviour of these, you stand to lose
visitors.

3. Breaks, if you open new windows.
um, sorry to be thick...but what do you mean?

--
-bts
-Motorcycles defy gravity; cars just suck

Ruth

ps - new icons - better? also still waiting for any info about why my
content header is so close to the menu above.

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Ruth wrote:

"Beauregard T. Shagnasty" wrote:
p {
font-size: 85%; <-- Use 100% for content [1]
font-style: normal; <-- Default; not needed

mmm, not sure, it looks HUGE!

You didn't read Note 1 below.

Yes I did, I was just complaining about it.

don't i get any say from a design (rather than usability!) point of
view

If your visitors can't use it, what difference does the design matter?
You are dispensing information, not fluff.

Ok, you've made your point. Anyway, come on, what percentage of users can't
see it AT ALL?

a {
text-decoration: none; <-- Force me to wave mouse around
looking for links? [2]

Well I have no problems underlining the links, but I have used
underlining to highlight the access keys on each link which looks the
best out of everything I've tried, so what do you reckon?

Underline the links. Maybe use a different color on the accesskeys, or
a double underline.

Ok, underline links in content, but even our friend Nielson doesn't think
that you have to underline navigational links. And I really do think those
are obvious.

a:hover {
text-decoration: underline; <-- Ahh. There they are.

You can also use a different color on hover.

1. If the content seems too large in your browsers, change your own
preferred size to something you like, but don't mess with mine. Same
applies to your client, if s/he thinks 100% is large.

2. There are two things surfers know how to do: click on links if
they can find them use their Back button [3] If you change the
default behaviour of these, you stand to lose visitors.

3. Breaks, if you open new windows.
um, sorry to be thick...but what do you mean?

Consider that a lot of people use maximized windows. A new window
completely covers the existing one. There is no "Back" to go to.

http://www.useit.com/alertbox/990530.html see point 2.

Ah, I think I know what you mean. None of the links are in place yet (there
is just a placeholder #) so if I understand what you mean correctly the
problem is only temporary.

I removed all your font sizing except the 90% on the right links, and on
the headers. It becomes legible. That multiple-red menu box near the top
was flyspecks prior to that. I also increased your max width from 48em
to 60em.

Ah, but 60em (as amended) has horizontal scrolling if someone is viewing the
site at 800 x 600. So we can't have it all ways.

ps - new icons - better? also still waiting for any info about why my
content header is so close to the menu above.

Yes, they are better icons. What text do you mean by the 'content
header'?

Sorry, I meant the bit in the H1 tag (content header, as opposed to page
header) which currently says "Brian Barr Solicitors are the leading firm for
chronic pain and fatigue victims in England and Wales."

This seems to be ok with a non-breaking space, but I'm sure there is a more
elegant css way of doing it.

Change your footer text size to 85%.

--
-bts
-Motorcycles defy gravity; cars just suck

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Ruth wrote:

"Beauregard T. Shagnasty" wrote:
If your visitors can't use it, what difference does the design
matter? You are dispensing information, not fluff.

Ok, you've made your point. Anyway, come on, what percentage of users
can't see it AT ALL?

There is no reliable way to discern that answer. How many blind people
surf the web?

Right. So therefore it's a matter of finding a balance between having a site
that looks right (and not too large!) for the majority of users and having
something accessible, and I think the ability to resize the page would
probably cover another sizable group, many of whom (who?), to be fair, are
used to having to make some adjustments to surf the web. I'm not trying to
be unkind or insensitive, only I don't want my website to look oversized,
I'd rather provide the ability to adjust it.

I think we might have to agree to disagree on this one, but I'll do some
more research.

Underline the links. Maybe use a different color on the accesskeys,
or a double underline.

Ok, underline links in content, but even our friend Nielson doesn't
think that you have to underline navigational links. And I really do
think those are obvious.

If it looks like a menu, no, you don't have to use underlines. I was
speaking about the links in the text.

Ah ok. Yes, I've changed that.

3. Breaks, if you open new windows.
um, sorry to be thick...but what do you mean?

Consider that a lot of people use maximized windows. A new window
completely covers the existing one. There is no "Back" to go to.

http://www.useit.com/alertbox/990530.html see point 2.

Ah, I think I know what you mean. None of the links are in place yet
(there is just a placeholder #) so if I understand what you mean
correctly the problem is only temporary.

Opening new windows is a terrible idea. But my mention of it was only to
show the "two things" that everyone knows. Clicking links, and using
Back button.

Ah ok, it'll be fine on the final version.

I removed all your font sizing except the 90% on the right links,
and on the headers. It becomes legible. That multiple-red menu box
near the top was flyspecks prior to that. I also increased your max
width from 48em to 60em.

Ah, but 60em (as amended) has horizontal scrolling if someone is
viewing the site at 800 x 600. So we can't have it all ways.

So then set a left and a right margin and let it float to whatever the
browser window size is, rather than attempt to make it a static size.
I've a 22" widescreen (1680px) and my browsers are usually just a bit
over half that wide.

Ok, I'll have a go at that later.

ps - new icons - better? also still waiting for any info about why
my content header is so close to the menu above.

Yes, they are better icons. What text do you mean by the 'content
header'?

Sorry, I meant the bit in the H1 tag (content header, as opposed to
page header) which currently says "Brian Barr Solicitors are the
leading firm for chronic pain and fatigue victims in England and
Wales."

This seems to be ok with a non-breaking space, but I'm sure there is
a more elegant css way of doing it.

I still don't know what you mean. That text looks fine to me just as it
is (last time I looked).

I think I've fixed it with a space, that's why.

Change your footer text size to 85%.

..as it is too small to read.

Yes, done that too.

--
-bts
-Motorcycles defy gravity; cars just suck

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Ruth wrote:

snip

Since most of the people whose surfing habits I know are in my age group
(think 'retired' people), I note that they appreciate not visiting sites
with micro-text. These people might also be your prime visitors. Do
young people with good eyesight often suffer from chronic pain? (Don't
know... never had the pleasure. <g>)

So all your sites are HUGE then

I think we might have to agree to disagree on this one, but I'll do
some more research.

Sounds like a plan.

Just looked at your page again, and it is much better .. easier to read.
The 60em width helps, too.

Thanks for all your help. I do like this CSS stuff, I think I've learned a
lot in the last couple of weeks, I shall keep at it.

R

snip rest

--
-bts
-Motorcycles defy gravity; cars just suck

On 2007/12/18 00:28 (GMT) Ruth apparently typed:

"Beauregard T. Shagnasty" wrote in message:

If your visitors can't use it, what difference does the design matter?
You are dispensing information, not fluff.

Ok, you've made your point. Anyway, come on, what percentage of users can't
see it AT ALL?

What's the point of telling your customers they are wrong? That's what you're
doing by deviating the text size from the size they prefer, as set in their
browsers. http://www.htmlhelp.com/feature/art2.htm

I removed all your font sizing except the 90% on the right links, and on
the headers. It becomes legible. That multiple-red menu box near the top
was flyspecks prior to that. I also increased your max width from 48em
to 60em.

Ah, but 60em (as amended) has horizontal scrolling if someone is viewing the
site at 800 x 600. So we can't have it all ways.

That depends how big their default text size is. Not all ems are created
equal, and in px, fewer are required to get legible text on the anachronistic
800x600. http://www.thecounter.com/stats/2007/December/res.php
--
" Our Constitution was made only for a moral
and religious people. It is wholly inadequate to
the government of any other." John Adams

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/