Borders and other things ....

[al jones]

I've added several pages (with many more to go) since I asked a question
which got quite a workaround before coming up with a workable answer.
Hopefully this isn't quite so mutually aggravating.

On my site, specifically at http://aljones.us/forward.html (and following)
I use borders to surround the 'body' and navigation areas. (Quoted body
since it's not the html body, but the body of my text.)

1) An observation was made that the borders interfered with one members
view of the, I presume navigation area, since the text and border are too
close together - just noticed that - I can fix that [I think]. What are
the opinions of the group on borders as I have used them? Alternatively,
I've thought about changed the background color of the navigation area
(leftbit). Comments?? (Yellow on Red for example?? Don't shoot!)

2) Since my list of letters / diaries is so long, I've used max-height and
overflow: auto - what would I need to do to make max-height of leftbit be
the max of the body of my text (this is not a serious consideration, just
curiousity)

3) if one clicks on the image of the letter / diary page then Opera and FF
both resize the image to fit the viewport - however, IE6 doesn't
(surprise?). As the images stand, IE barely display a small portion of the
upper left part of the image (meaning the resolution is too high?). What's
the 'best'way to fix this so that all users see the image, 'full screen'??

4) XHTML -vs- HTML The DOCTYPE I've been using is XHTML 1.0 strict (for no
particular reason). I've been reading peoples observations that I 'should'
probably be using HTML 4 strict. As I see it, there is very little
difference in the HTML I present and that of XHTML (a few <br/>'s
probably). What would I gain / lose by continuing as I have been - vs -
redoing the existing pages in HTML 4 strict.

Basically, I'm satisfied with the design as it stands - though I'm also
'perfectionist' enough to want it to display 'better'. Your observatioons
and corrections are welcome.

//al

 

[dorayme]

On my site, specifically at http://aljones.us/forward.html

Basically, I'm satisfied with the design as it stands - though I'm also
'perfectionist' enough to want it to display 'better'. Your observatioons
and corrections are welcome.

It would be better without the frames. Or remove the height
restriction on what you have. One of my screens is big and it is
irritating to see the frame on left so short. Be rid of that max
height or any on that.


On the page about William van Amber, there is no need to repeat
so often the text "WWvA Diary" in the navigation frame.

The borders and paddings and margins need attention. There is no
grace between the text and left border, the nav text is jammed up
against the border.

Don't use px units for font-sizes. Use %. Set the text to 100% at
the body level. If you want to go down a bit for the navigation,
maybe 85 or 90%.

Some quick and haphazard things: i got it to look better to my
eye by changing yours to

div#leftbit {
float: left;
margin: 0;
padding: .5em;
width: 12em;
border-right: solid 5px #ccc;
}

and

div#moststuff {

color: black;
margin: 0em 0 5em 13em;
padding: .5em;

}

and completely removing your

#all

And now, I must stop.

 

[al jones]

It would be better without the frames. Or remove the height
restriction on what you have. One of my screens is big and it is
irritating to see the frame on left so short. Be rid of that max
height or any on that.

On the page about William van Amber, there is no need to repeat
so often the text "WWvA Diary" in the navigation frame.

The borders and paddings and margins need attention. There is no
grace between the text and left border, the nav text is jammed up
against the border.

Don't use px units for font-sizes. Use %. Set the text to 100% at
the body level. If you want to go down a bit for the navigation,
maybe 85 or 90%.

Some quick and haphazard things: i got it to look better to my
eye by changing yours to

div#leftbit {
float: left;
margin: 0;
padding: .5em;
width: 12em;
border-right: solid 5px #ccc;
}

and

div#moststuff {

color: black;
margin: 0em 0 5em 13em;
padding: .5em;

}

and completely removing your

#all

And now, I must stop.

No, you don't have to. I've looked at a few of your suggestions (quickly
in FF) as it's time to put this shaggy body to bed to get ready for work
tomorrow. A couple of things pop up that I need to look at - consider -
thanks for your comments (couldn't remember *who* it was who objected to
the borders .... guess I know now )

//al

 

[al jones]

It would be better without the frames. Or remove the height
restriction on what you have. One of my screens is big and it is
irritating to see the frame on left so short. Be rid of that max
height or any on that.

On the page about William van Amber, there is no need to repeat
so often the text "WWvA Diary" in the navigation frame.

The borders and paddings and margins need attention. There is no
grace between the text and left border, the nav text is jammed up
against the border.

Don't use px units for font-sizes. Use %. Set the text to 100% at
the body level. If you want to go down a bit for the navigation,
maybe 85 or 90%.

Some quick and haphazard things: i got it to look better to my
eye by changing yours to

div#leftbit {
float: left;
margin: 0;
padding: .5em;
width: 12em;
border-right: solid 5px #ccc;
}

and

div#moststuff {

color: black;
margin: 0em 0 5em 13em;
padding: .5em;

}

and completely removing your

#all

And now, I must stop.

Since I've tried to implement some of your suggestions and am going bonkers
with the same (original) problem, I'm 'bumping' this in the hopes that
someone will comment on either / both messages ...

 

[dorayme]

Since I've tried to implement some of your suggestions and am going bonkers
with the same (original) problem, I'm 'bumping' this in the hopes that
someone will comment on either / both messages ...

Looking better al... but your margin is trouble on

div#leftbit {

margin: -12px;

border-right: solid 5px #ccc;


}

I advise you to be rid of this negative margin, look at the ugly
right border poking out at top. At the very least do not have it
on the top margin. You could have

margin: 0 0 0 -12px;

I suppose, which is nicer. But why not margin:0; and change your

ul {
...
padding-left: 1em;

to

ul {
...
padding-left: .5em;

 

[dorayme]

Since I've tried to implement some of your suggestions and am going bonkers
with the same (original) problem, I'm 'bumping' this in the hopes that
someone will comment on either / both messages ...

Meant to add, perhaps reduce the thickness of that border in
div#leftbit

 

[mbstevens]

4) XHTML -vs- HTML The DOCTYPE I've been using is XHTML 1.0 strict (for no
particular reason). I've been reading peoples observations that I 'should'
probably be using HTML 4 strict. As I see it, there is very little
difference in the HTML I present and that of XHTML (a few <br/>'s
probably). What would I gain / lose by continuing as I have been - vs -
redoing the existing pages in HTML 4 strict.

Read this:
http://www.w3.org/International/tutorials/tutorial-char-enc/

 

[Andy Dingley]

Read this:http://www.w3.org/International/tutorials/tutorial-char-enc/

That's not what the OP is asking at all.

 

[Andy Dingley]

4) XHTML -vs- HTML

This is done to death twice weekly. Search for it.

I 'should' probably be using HTML 4 strict.

HTML 4.01, but definitely not HTML 4 (different doctype, and simply
obsolete)

Strict is probably the more important thing to get right though.

 

[al jones]

Looking better al... but your margin is trouble on

div#leftbit {

margin: -12px;

border-right: solid 5px #ccc;

}

I advise you to be rid of this negative margin, look at the ugly
right border poking out at top. At the very least do not have it
on the top margin. You could have

margin: 0 0 0 -12px;

I suppose, which is nicer. But why not margin:0; and change your

ul {
...
padding-left: 1em;

to

ul {
...
padding-left: .5em;

Since I've uploaded two pages which have a few more changes to them I've
noticed that trying to move the list to the left to fill in the space
normally occupied by the 'list marker' (circle, dot, square, etc) move my
list on the home page - well, off the page partially. Need to revisit
that.

I've added the 'European quote' marks to use as previous page / next page
(so we don't have to keep hopping into that long index) I have float:left
and float: right - associated with them in css, but they aren't behaving as
I would expect, the symbol on the right is a 'line' too low.

All of this has again brought up the problem of the image and text
drifiting to the right if the text is shorter than the associated image -
and I'm at a loss as to why.

Any suggestions from anyone on any of the above .....

 

[al jones]

On Mon, 29 Jan 2007 20:47:49 -0600, al jones wrote:

Just so you don't have to guess, the two pages are 08/??/63 WWvA and
08/11/63 WWvA Diary. Turned 60 last week - seems I've developed a severe
case of CRS in the process of turning the year ....

 

[dorayme]

I've added the 'European quote' marks to use as previous page / next page
(so we don't have to keep hopping into that long index) I have float:left
and float: right - associated with them in css, but they aren't behaving as
I would expect, the symbol on the right is a 'line' too low.

All of this has again brought up the problem of the image and text
drifiting to the right if the text is shorter than the associated image -
and I'm at a loss as to why.

Any suggestions from anyone on any of the above .....

I am looking at <http://aljones.us/630811vad.html>

Not keen on the 'European quote' marks implementation. It is not
clear what they do until one tries them.

If I may make a suggestion. Redo the lot without so many floats.
You are going to get hopelessly lost.

Float the left bit as you have and forget all the code for the
rest In other words, something like a left float nav, a right
content div (with a left margin for the float) with a heading at
top of its inside, simple <h1>... and underneath the heading
SIMPLE TABLE, with two cols, one for the images of the letters on
left and the remaining cell on right in the row for the spiel. It
will be dandy then. You are getting lost I am afraid. Let the
magic of tables do the layout for you in this case and leave it
at that. Later you can play about till you find something stable.
it is not going to happen the way all this is going now. Not
meaning to offend you and there is nothing fundamentally bad
about what I am proposing.

I guess the question is, can you trust me?

 

[Ben C]

Since I've uploaded two pages which have a few more changes to them I've
noticed that trying to move the list to the left to fill in the space
normally occupied by the 'list marker' (circle, dot, square, etc) move my
list on the home page - well, off the page partially. Need to revisit
that.

That just looks like the margin-left:-12px on div#leftbit, which isn't a
list item anyway-- do you mean "Family Group Sheets", "WWvA Letters",
"Civil War Links" etc. on the left of the home page?

I've added the 'European quote' marks to use as previous page / next page
(so we don't have to keep hopping into that long index) I have float:left
and float: right - associated with them in css, but they aren't behaving as
I would expect, the symbol on the right is a 'line' too low.

Put both floats first, i.e. like this:

<a class="ppage" href="http://aljones.us/630809va1.html">«</a>
<a class="npage" href="http://aljones.us/630816va1.html">»</a>
<h2>Diary Entries August 11th, 1863 </h2>

Firefox (and I think someone said also IE7) always puts floats down on
the next line, unless they occur before any of the inline content. This
is incorrect behaviour, but if FF and IE both do it it looks like it's
here to stay.

All of this has again brought up the problem of the image and text
drifiting to the right if the text is shorter than the associated image -
and I'm at a loss as to why.

I don't understand the description of the problem.

 

[al jones]

That just looks like the margin-left:-12px on div#leftbit, which isn't a
list item anyway-- do you mean "Family Group Sheets", "WWvA Letters",
"Civil War Links" etc. on the left of the home page?

Please explain 'not a list item anyway' - seems like a logical list to me
....

Put both floats first, i.e. like this:

<a class="ppage" href="http://aljones.us/630809va1.html">«</a>
<a class="npage" href="http://aljones.us/630816va1.html">»</a>
<h2>Diary Entries August 11th, 1863 </h2>

Firefox (and I think someone said also IE7) always puts floats down on
the next line, unless they occur before any of the inline content. This
is incorrect behaviour, but if FF and IE both do it it looks like it's
here to stay.

Well, two of you gave me the same suggestion - implemented it and the
results weren't exactly what I expected - see 08/??/63 WWvA and
08/11/63 WWvA Diary each line of the trio of lines is on a new line.

I don't understand the description of the problem.

When looking at the diary pages, if the text which is to the right of the
image is shorter than the associated image, the following image shifts to
the right with the text to the right of that ... you'll probably need to
set font size smaller and / or the viewport wider to see it.

Getting ready for work so I hope this isn't to curt.

 

[Ben C]

Please explain 'not a list item anyway' - seems like a logical list to me
...

I meant it wasn't a <li> or element with display:list-item on it. It's a

Well, two of you gave me the same suggestion - implemented it and the
results weren't exactly what I expected - see 08/??/63 WWvA and
08/11/63 WWvA Diary each line of the trio of lines is on a new line.

That's expected given your markup: one float, then the <h2> block box,
then the other float.

If you want the << and >> either side of the <h2> you'll have to put the
floats in the <h2>-- it's a block box.

Like this:

<h2>
<a class="ppage" href="#">«</a>
<a class="npage" href="http://aljones.us/630801gn1.html">»</a>
Undated letter, 1863
</h2>

If the << and >> are in the <h2> they get a big font-size anyway, so it
looks better if you lose the font-size:1.4em you're setting on them at
the moment.

When looking at the diary pages, if the text which is to the right of the
image is shorter than the associated image, the following image shifts to
the right with the text to the right of that ... you'll probably need to
set font size smaller and / or the viewport wider to see it.

I see what you mean. That's just what floats do.

You could set "clear:left" on .letterunit.

But that would create a new problem, because your "div#leftbit" is a
float, so all your letterunits will clear #leftbit, not what you want.

This is just the same thing dorayme encountered with her "drop caps"
example. See http://tinyurl.com/3yrtb9, and earlier messages in that
thread (I don't know how to work Google Groups) for the explanation.

So alternatively you can set float:left on .letterunit. That will make
each letterunit a "block formatting context root", with the consequence
that it grows vertically to fit its floats in, preventing them from
banging against one another. In your case there don't seem to be any bad
sideffects, but you'd need to check that.

Another way to turn .letterunit into a BFC root (with theoretically
fewer sideffects) is to set display:table on it. Then it should behave
like a block box (it'll get an anonymous table row and table cell inside
it) apart from having shrink-to-fit width (which you don't want, but
which doesn't matter in this case) and growing vertically to fit the
floats.