|
|
Posted by bigdaddybs on 10/06/06 08:50
bigdaddybs wrote:
> 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.)
> ...
> > > [S]ince 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 ...
....
> 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 ?
Well, it took me some time, but I think I found the answer to the
overflowing problem in Firefox while it looked alright in IE6 (don't
complain!): My original CSS for the main formats above looked like
this, based on my attempting to modify the ALA article, above... And it
worked well in IE6 (had forgotten to check in FF - again, sorry):
body [basically defines site font - basic size and color - and
background color/image]
#full-page { position: absolute; top: 10px; left: 5px; /* Container
Position */
width: 100%; }
#main-page { margin-left: 130px; padding: 5px; width: 100%;
background-color: #f0fff0;
/* BG color for wide layering [removed] */ }
#full-sidebar { float: left; position: absolute; top: 0; left: 0;
width: 110px; padding: 5px;
text-align: center; z-index: -1; }
/****************************************************************************************/
/* These are supposed to make the two columns the same length. In
some browsers, */
/* there may be a problem in that the full length may appear. */
/****************************************************************************************/
#full-page { overflow: hidden; }
#full-page .column { padding-bottom: 10010px;
margin-bottom: -10000px; }
/****************************************************************************************/
/* Define the general divs sectioning the above containers
[main-page] */
/****************************************************************************************/
#page-top { margin: 0; padding: 0 .5em; width: 100%; text-align:
center; }
#page-content { margin: 0; padding: .5em; width: 100%; }
#page-bottom { margin: 0; padding: .5em; width: 100%; text-align:
center; }
I got into FF and downloaded a number of web-developer tools (figuring
they'd help - and they did), and after a lot of trial and error, had it
working in FF, but then it overflowed in IE (off right of page). More
trial and error, more failure, more getting it working in one and it
failed in the other and vice-versa. I did some searching for a good
2-column format (LS fixed, RS content and fluid) with a container, and
couldn't find any despite hours of searching. I went back to my CSS,
and thought I'd try something. After all my modifications, I was a LOT
leaner than the above, and was playing with the #full-page and
#main-page ids only, dealing with widths.I finally hit upon the
following:
#full-page { width: 100%; margin: 5px; }
#main-page { margin-left: 125px; width: 98%; background-color:
#f0fff0;
/* BG color for wide layering [removed] */ }
#full-page > #main-page { width: auto; }
#full-sidebar { position: absolute; top: 5px; width: 100px;
text-align: center; }
/****************************************************************************************/
/* Define the general divs sectioning the above containers */
/****************************************************************************************/
#page-top { margin: 0; padding: 0 .5em; /* width: 100%; */
text-align: center; }
#page-content { margin: 0; padding: .5em; /* width: 100%; */ }
#page-bottom { margin: 0; padding: .5em; /* width: 100%; */
text-align: center; }
I'm still not quite sure WHY I tried the child-selector (#full-page >
#main-page), or why it works (my assumption is that IE does not see it,
or if it does, it does so incorrectly, so ignores it, therefore uses
the 98% width, while FF sees it and uses the "auto" width. Am I
correct?)
Anyway, I'm including this here for others that may have problems with
this. Since GG (I know... a hated term!) seems to get at least some of
the NGs indexed, maybe it will also become searchable.
If anyone would care to explain why things work now and didn't before
(I'm exhausted from screwing with it!), please do.
Thank you John and Wayne for your comments and suggestions.
Please... Those of you who had problems, see if they still exist...
(See
http://www.orangefrogproductions.com/ofp2/ofp2o_auth_artlet_webelitistsandrookies.shtml
).
Again, I point out that this was NOT FP's fault -- didn't change
anything in the HTML of the page(s) of the site at all -- but my lack
of understanding in setting the DIVs correctly in the CSS.) Should work
fine in both IE6 and FF, now. (No... I did NOT test in other
browsers... Don't have them available. :-} )
BigDaddyBS (Bill S)
Navigation:
[Reply to this message]
|