Posted by bigdaddybs on 10/03/06 19:23

John Hosking wrote:
> Hello Bill
>
> bigdaddybs wrote:
> > Chris F.A. Johnson wrote:
> >
> >>On 2006-10-02, Dan wrote:
> >>
> >>>That page comes out as a horrendous mess in my browser (Mozilla
> >>>SeaMonkey), with pieces of the page overlapping others, and some of the
> >>>text going off the right edge of the screen so I can't read it (there's
> >>>no horizontal scroll bar).
> >>
> >> In my browser (FF 1.5.0.7) there is a scroll bar, but even with it
> >> moved all the way to the right, some of the text is still off the
> >> screen.

First off, I apologize for going OT (Why shouldn't I use FP?), however,
as you can see it is the fault of the writer, and not FP, and I thought
this was something that could help others who will run into the same
situation (and you know there WILL be others.)

> > I currently use 100% on multiple divs, and, apparently, this works in
> > IE6 Quirks mode
>
> When you say, "works in Quirks mode," do you mean "operates" in quirks
> mode, or "functions" in quirks mode? Because "operates," I would
> believe. But "functions" is misleading, because what do you mean by
> "works?" You don't know *what* you're going to get with a different box
> model (and you're setting margins and padding all over the place).

Works = displays correctly. Right or wrong, it does.

> > (I DO state I used transitional, and why.)
>
> I missed seeing your rationale for this. Is your reasoning that these
> pages are so ancient and numerous, you haven't gone STRICT yet?

Um... Not really. The thing was when I started redesigning the site, I
didn't even think about it, to be honest. I used the same mode I had
used for the old version. (Another mistake, I know.) Now, with 150+
pages set that way in the redesign, I'm afraid to try STRICT.

> > However,
> > since it IS CSS, can anyone tell me which div (outer or inner or both)
> > should be defined differently and how? My full page div (container) is
> > defined as 100% wide, and a number of internal divs are defined at 100%
> > wide (because they are to take up the width allowed by the container.)
> > Obviously at least one of those is wrong... Instead of trying to come
> > up with why FP is bad (especially when it wasn't to blame for the
> > problem), I'm sure you have run up against this before, somewhere...
> > How 'bout a clue?
>
> A clue or two is all I can offer you because (1) I'm no expert, not
> nearly, and (2) your CSS is so convoluted I don't know what all's going
> on. Fortunately I can delete vast chunks of it in the Edit CSS function
> of FF Web Developer extension, and localize some likely suspects. YOU
> will have to check and test and verify the usefulness of these clues.
>
> I notice:
> #full-page { position:absolute; top:10px; left:5px; width: 100%; }
>
> If I get rid of the width:100%, the horizontal scroll bar vanishes.
> Further, I notice no other effects. I suspect therefore, you don't need
> this at all. Or maybe 90% or something would be better.
>
> But just because the scroll bar is gone doesn't mean that the text is
> visible; it's still hanging off the right side of the viewport. So look:
>
> #main-page {
> margin-left: 130px;
> padding: 5px;
> width: 100%;
> background-color: #f0fff0;
> }
>
> Here, you're saying your want the content to be as wide as the viewport
> (or wait, I think I mean _containing block_, but in your case I think
> it's pretty much the same). But you've also said to start the 100%-wide
> block to start 130 pixels to the right (give or take the 5). So it's no
> surprise that the right edge is about 130 pixels off to the right.
>
> You might want to adjust the width and/or margin values accordingly.
>
> I am almost certainly overlooking something. With your opaque CSS and my
> lack of experience, there's bound to be something else you ought to look
> at too. But at the rates I'm charging you, maybe this is good enough. ;-)

Thanks for ANY insight other than "This page sucks!"

Originally, I was trying to modify the three-column layout from A List
Apart's article using the modification the original author made at
http://www.infocraft.com/articles/the_case_of_the_disappearing_column/.
(That setup is for a 3-column page, while mine was to be only two.)
After most of the pages were complete, when I had problems printing, I
asked for possible reasons. From alt.www.webmaster, it was recommended
I change it as follows:

I would recoomend re-naming and re-planning these divs along the
line of:
<div id="container">
<div id="left-column"> </div> (floated left)
<div id="right-column"> (margin-left = width of left
column + guttter)
<div id="header"> </div>
<div id="content"> </div>
</div>
<div>
which, while not helping my printing problem, did make the layout a
little more logical, in my mind. (Sorry... was a programmer for 25
years!)

The basic page "layout" (sorry if that's the wrong term) using my div
names is:
Body | Body
full-page | body division wrapper
(corresponds to "container")
main-page | "right frame" division wrapper
(corresponds to "right-column")
page-top | banner +
page-content | actual content
page-bottom | bottom linkbar +
copyright/footer
full-sidebar | sidebar wrapper ("left
frame") (corresponds to "left-column")
sidebar-top | decoration + nav buttons
sidebar-middle | (currently,
"transparent"/blank - just for spacing)
sidebar-bottom | buttons for "used on site"

(I use the term "frame" because a long time ago, I had used frames,
hated it, and revised it. Also, almost everything I've read says to put
the navigation (sidebar) AFTER the content for various reasons, so
that's what I've done for years. I also tend to format my HTML to be
readable about what is in what div, paragraph, etc. While I may have
missed a few, to me, this is not that "convolulted" and I don't
understand why others think so.)

So, because of the number of screens and resolutions out there in
"internet-land", and the number of browsers and how they handle the
"box model", preferably without changing the HTML (would like to handle
it in the CSS), how should the main-page div be defined to keep the
writing within those browsers that ?

> > I'm VERY loathe to ask, because then someone, I'm sure, will complain
> > about my HTML or CSS, but, to fix the problem, I need answers.
>
> Well, I'm not the guy to point out all the bad things in either part,
> but in summary, I can't easily read and understand your code. Maybe
> *you* know what .hbbqrff, .hbbqrffw, and #wntbl ol ol ol all mean, but I
> certainly can't tell what styles are cascading and inheriting on your
> page. I'm sure both your HTML and CSS could be much simpler, you'd then
> have fewer problems with it, and whatever problems you did have would be
> quicker to understand and solve.

To make the classes more "generic" and easier to enter, I used
abbreviations:
hbbqrffw = Heavy Border, Blockquote Replacement, Fixed Font, White
(background)
hbbqrly = Heavy Border, Blockquote Replacement, (normal font),
Light Yellow (bg)
bfp7 = Bold, Fine Print, .7em
etc.
I did not use tables for layout, except for tabular content, and did
not use blockquotes at all, instead creating classes for "blockquote
replacement", some with colored background, some without. Again, the
names are ... "logical" to me, and I didn't think they'd be that hard
to decipher. (Sorry, again.) I am the only one who edits this website,
so, except for asking for help... :-} And the majority of the pages use
the above "layout".)

> > As for the warnings about the background colors, can
> > you explain why anything but "transparent" would be needed? And why
> > it's necessary at all?
>
> Ohh! Ohh! Pick me! I *know* this one! er, I think...
> Suppose I have set my browser to use a default black background (for
> whatever reason), and your site specifies dark green text, and no (i.e.,
> your "transparent") background. I see: darkness. A textless muddle of
> mud. And as goofy as this example sounds, it's simply that if you're
> going to commandeer the foreground (or bg) color, you'd better specify
> the background (or fg) color, too. It's so important (and so often
> forgotten) that the W3C includes it in the validation.

Ok... I understand. Again, these don't preclude validation, they are
"warnings". I will see about changing MOST of them, however, the idea
of setting a font-color is to set that color on any background on your
site. I have a VERY large CSS as it is (some because I was learning and
used the cascading properties within an external CSS, but most needed,
and some are comments), and I've already been "complained at" because
of it's size. If I have to handle every different foreground color on
every different background...

> > Thanks, in advance, for any HELP. Believe it or not, I really do
> > appreciate it.
>
> My pleasure. Hope it helps.
> > BigDaddyBS
>
> --
> John

John, again, Thank you. I hope my explanations and further questions
make sense.

BigDaddyBS (Bill)

[Back to original message]