Stylesheets - This just torques me off

Author

This just torques me off

Wes Groleau

2007-07-08, 3:15 am

ALA (http://www.alistapart.com/articles/multicolumnlayouts)
showed how to make a wide content area on the left and a
narrow sidebar on the right, that would always appear the
same length.

With great difficulty, I got it working with wide content
area on the right and the narrow sidebar on the left.

Verified on multiple browsers.

Then, little by little I added elements around and outside
that, and inside as well, continuing to check that it's
working, and finally got to where I thought the CSS and HTML
structure were correct.

Then I started working on the actual content. While doing
that, the #$%&$%&*%^&* ALA trick quit working!

In http://UniGen.us/ - WHY is the border of the
sidebar container, peeking out under the bottom of the content,
not the color I specified?

And why are the borders and floating in the OPPOSITE direction
I specify? (I keep switching them, and they keep going the opposite
direction!)

--
Wes Groleau
-----------
I've been framed! ...
http://www.useit.com/alertbox/9612.html

John Hosking

2007-07-08, 6:16 pm

Wes Groleau wrote:
> ALA (http://www.alistapart.com/articles/multicolumnlayouts)
> showed how to make a wide content area on the left and a
> narrow sidebar on the right, that would always appear the
> same length.
>
> With great difficulty, I got it working with wide content
> area on the right and the narrow sidebar on the left.

Which model did you choose? There are several discussed on that page.

>
> Then, little by little I added elements around and outside
> that, and inside as well, continuing to check that it's
> working, and finally got to where I thought the CSS and HTML
> structure were correct.
>
> Then I started working on the actual content. While doing
> that, the #$%&$%&*%^&* ALA trick quit working!

Suspicious, isn't it? So now to the Help Desk Consultant's Question of
Doom: What did you change? :-)

>
> In http://UniGen.us/ - WHY is the border of the
> sidebar container, peeking out under the bottom of the content,
> not the color I specified?

First of all, I don't see that this page has "wide content
area on the right and the narrow sidebar on the left". Is that part of
your question?

Second, it would help if you would mention "the color you specified,"
and which color you see it as, so we can tell what you're complaining
about. (IOW, it almost certainly *is* the color you specified, just not
the color you *meant* to specify, IYSWIM.)

Third, I see different results in FF and IE6. You too? Which result
don't you like? Or is it both of them? Is the error in Opera 3.1?

IE wanted me to "allow software such as ActiveX controls and plug-ins to
run." I declined. What do you think that might have been, and why do I
need it for your page, and do you think it affects my view of your page
in IE6?

Your doctype invokes quirks mode. I recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ISTM that for a minimal test case, you could turn off the JS and omit
the Google ads and their iFrames. Simplfying is usually a good step in
debugging.

Your markup doesn't validate, even with transitional, although I'm not
convinced that's the cause of the problem(s) you're trying to report.

You've got an error in your CSS, too. Try your site at
http://jigsaw.w3.org/css-validator/ .

What is: <a nicetitle="Find persons by surname" ...? Oh, well, I've
googled it, and it seems to depend on JS running. It's not actual HTML,
though, maybe you ought to drop it.

To summarize so far: I don't know which template or model from ALA you
mean to be working from, so I don't know what to compare. I can't tell
what colors you want where, or whether the content is really flopped as
you say in your post.

From some comments and weirdnesses I see in your CSS, I'm guessing you
flopped the style names from your model, then tried to invert some of
the values. The reult is rather twisted (but you know that... :-) ).
Does it help you to just *delete* the following from #sidebarcontainer?
border-right: 562px solid #c33;
margin-right: -562px;

>
> And why are the borders and floating in the OPPOSITE direction
> I specify? (I keep switching them, and they keep going the opposite
> direction!)
>
I neither understand what you're saying nor see what you mean from your
code. Could you be more specific? What do you mean by borders going in
the opposite direction?

Some other CSS notes and sundry snide remarks:

This scares me:
#header_inner { width: 2000px; }

Of course, it's inside this:
#header_outer { width: 802px; }
and that scares me already.

You have some IE hacks:
/* Hack to prevent Internet Explorer from ruining your display
* html #container
* html #content
etc. These probably won't do for IE7 what you think they will. Read
http://msdn2.microsoft.com/en-us/library/bb250496.aspx .

In #mainwrapper, your
margin: auto;
margin-top: 5px;
margin-bottom: 5px;

can be written as
margin: 5px auto;

Maybe you already know that .sidebar li:hover won't work in IE6.

I suggest you avoid the sizing in px that you're trying to do
everywhere, especially for the text sizes. IE doesn't allow resizing of
px texts, so em or % are better. Using em for block items can help them
resize with the texts they're supposed to contain. It's strange and
arbitrary to demand that my viewport be 806px wide. And your texts start
off too small for me in any case.

HTH. Post again with more specific details if you still need help.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Wes Groleau

2007-07-08, 6:16 pm

John Hosking wrote:
> Wes Groleau wrote:
>
> Which model did you choose? There are several discussed on that page.

The first one--two columns only.

>
> Suspicious, isn't it? So now to the Help Desk Consultant's
> Question of Doom: What did you change? :-)

Tons of stuff. But studying the CSS and the HTML, it really
looks like the only difference between mine and Pearce's are
the pixel widths, the ID values renamed to the ones already
in much of my HTML, and the lefts/rights swapped. (And the
latter done only because things seemd to be going the opposite
direction of what's specified.)

It's probably some really weird side-effect from some inner or
out thing added elsewhere. I'll have to go fetch earlier versions
out of my RCS.

>
> First of all, I don't see that this page has "wide content
> area on the right and the narrow sidebar on the left". Is that part of
> your question?
>
> Second, it would help if you would mention "the color you specified,"
> and which color you see it as, so we can tell what you're complaining
> about. (IOW, it almost certainly *is* the color you specified, just not
> the color you *meant* to specify, IYSWIM.)

No, the sidebar's border/margin is specified as

#sidebarcontainer /* content, in ALA */
{
/* background-color: #B4D1D6; */
background-color: #9cc;
width: 240px;
/* border-left: 562px solid #FBF5E7; */
border-right: 562px solid #c33; <<======
margin-right: -562px; <<======
float: left; <<======
}

just like Pearce's model. Yet, unlike Pearce's (and earlier
iterations of mine), the sidebar is on the _right_ and if
I change float to right, it appears on the left and either
way, its border, peeking out from under the "content," is
#9cc

> Third, I see different results in FF and IE6. You too? Which result
> don't you like? Or is it both of them? Is the error in Opera 3.1?

I liked what I saw on FF, Camino, Safari on Mac and on IE6 on WinXP.
But that was before it broke, and I don't have the latter at home.
My Opera executable seems to have also broken, but it was older than
3.1 anyway, so I'll upgrade.

> IE wanted me to "allow software such as ActiveX controls and plug-ins to
> run." I declined. What do you think that might have been, and why do I
> need it for your page, and do you think it affects my view of your page
> in IE6?

Probably. There are NO plugins or ActiveX controls, but there is
Javascript in Google ads and a function for "better tooltip" when
hovering over links. IE6 never complains about those for me.

You continue with many good points. I have to beg off trying or
responding till later in the day. Thanks

--
Wes Groleau

Beware of the man who works hard to learn something, learns
it, and finds himself no wiser than before ... He is full of
murderous resentment of people who are ignorant without having
come by their ignorance the hard way.
-- Kurt Vonnegut

John Hosking

2007-07-08, 6:16 pm

Wes Groleau wrote:
> John Hosking wrote:
[color=darkred]
>
> The first one--two columns only.

>
> Tons of stuff. But studying the CSS and the HTML, it really
> looks like the only difference between mine and Pearce's are
> the pixel widths, the ID values renamed to the ones already
> in much of my HTML, and the lefts/rights swapped.

Here I think you didn't complete the swapping. Read on, MacDuff.

>
> No, the sidebar's border/margin is specified as
>
> #sidebarcontainer /* content, in ALA */
> {
> background-color: #9cc;
> width: 240px;
> border-right: 562px solid #c33; <<======
> margin-right: -562px; <<======
> float: left; <<======
> }
>
> just like Pearce's model. Yet, unlike Pearce's (and earlier
> iterations of mine), the sidebar is on the _right_ and if
> I change float to right, it appears on the left and either
> way, its border, peeking out from under the "content," is
> #9cc

Okay, still not perfectly clear, but lemme take another swing at it.

You took the model displayed at http://preview.tinyurl.com/2yg6lc, where
the (long, bulky) main content is supposed to be left (div#content) and
a narrow little sidebar rail is to its right (div#rail), both wrapped in
a div#container.

You took that code and wanted to swap sides, so you renamed your copy of
#content to #sidebarcontainer, and you renamed your copy of #rail to
#content (confusing because it's the same as the old name of the other
div). You then massaged the values of the divs in the CSS to widen one
side (the former rail, new content) and narrow the other side (former
content, new sidebar).

But you left the divs in the HTML where they were, and just renamed the
one div (<div id="rail"> became <div id="sidebarcontainer"> ).

Suggestion: SWAP the two divs in your markup. I think you'll find the
two sides will appear as you want, with the reddish color you want, too.

Does that help?

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Wes Groleau

2007-07-08, 6:16 pm

John Hosking wrote:
> Here I think you didn't complete the swapping. Read on, MacDuff.

You might be right. I have to study it a bit.

Part of my problem is that a heck of a lot of people
are still using crappy browsers and my job doesn't
allow me to alienate them with lectures that they
can't understand on why they should upgrade.

The other part is that as I've aged, I have evolved
from someone who could learn things like CSS from specs
to someone who has to learn by working with examples--
and a heck of a lot of examples are not as good
under the hood as they look on the screen.

--
Wes Groleau

If you put garbage in a computer nothing comes out but garbage.
But this garbage, having passed through a very expensive machine,
is somehow ennobled and none dare criticize it.

John Hosking

2007-07-08, 6:16 pm

Wes Groleau wrote:
> John Hosking wrote:
>
> You might be right. I have to study it a bit.

Okay.

>
> Part of my problem is that a heck of a lot of people
> are still using crappy browsers and my job doesn't
> allow me to alienate them with lectures that they
> can't understand on why they should upgrade.

I don't understand. My suggestion doesn't have anything to do with
browser choice or lectures.

GL.
--
John

Wes Groleau

2007-07-08, 10:16 pm

John Hosking wrote:
> Your doctype invokes quirks mode. I recommend
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">

I prefer XHTML strict, but most of the content will
be output by someone else's PHP. I'm not sure he
really needs Transitional, though, as I have already
seen some [br /] tags.

> ISTM that for a minimal test case, you could turn off the JS and omit
> the Google ads and their iFrames. Simplfying is usually a good step in
> debugging.

Well, I started simple, and added on. It was _not_ broken after
adding the JS, but I do have to go back in time now.

> Your markup doesn't validate, even with transitional, although I'm not
> convinced that's the cause of the problem(s) you're trying to report.

I'm not either. Last time I tried to validate a page that
was working well on all browsers, attempting to fix some
of the alleged errors trashed the page on some browsers.

> You've got an error in your CSS, too. Try your site at
> http://jigsaw.w3.org/css-validator/ .

Finds no errors in _my_ CSS, but does complain about "opacity"
in nicetitle.css

> What is: <a nicetitle="Find persons by surname" ...? Oh, well, I've

You must have a tool that shows the HTML _after_ JS alters it.
What tool is that? All my browsers show the source as received
from the server.

> This scares me:
> #header_inner { width: 2000px; }

Yeah, I'll drop that. It was needed on another site.
They decorated the top with several pictures selected
at random from a larger collection. The inner allowed
the row to extend to the last picture without making
a line wrap. Then the outer sliced off the excess.

> You have some IE hacks:
> /* Hack to prevent Internet Explorer from ruining your display
> * html #container
> * html #content
> etc. These probably won't do for IE7 what you think they will. Read
> http://msdn2.microsoft.com/en-us/library/bb250496.aspx .

Ah, but notice I've commented them out.

> Maybe you already know that .sidebar li:hover won't work in IE6.

It worked the last time I looked at an IE6

> I suggest you avoid the sizing in px that you're trying to do
> everywhere, especially for the text sizes. IE doesn't allow resizing of
> px texts, so em or % are better. Using em for block items can help them

Yes, I'd like to figure out a way to make the text more flexible
while still complying with the layout plan for the geometry.

--
Wes Groleau

Words of the Wild Wes(t) = http://Ideas.Lang-Learn.us/WWW

Wes Groleau

2007-07-08, 10:16 pm

John Hosking wrote:
> I don't understand. My suggestion doesn't have anything to do with
> browser choice or lectures.

No, you were not one of the irrational purists.
Those are the folks who tell me

"_____ is the One True Way to make websites,
and when you do it right, and half the people
don't like the way it looks, tell them they're
idiots and they need to get ______ browser."

--
Wes Groleau

"A man with an experience is never
at the mercy of a man with an argument."
-- Ron Allen

Wes Groleau

2007-07-08, 10:16 pm

I think you might be right about the divs.

I started with

[container]
[content]
information, etc.
[sidebarcontainer]
nav links and other tools

the latter was on the left and sized to fit Google ads
(which do not validate AND assume the IE6 box model--Grrr!)

So what I was _trying_ to do was to only copy the
properties from rail into content and
content (ALA) into sidebarcontainer, tweak the dimensions,
and leave the XHTML alone.

Maybe I'll start over and try that again.

I don't understand why height: 100%;
doesn't make the box the height of the box it's in,
which if it has no height specified, ought to be
as high as the largest item within it.

Although I've done numerous changes since then, this
CSS originally used a gif of the "correct" width to
repeat below the sidebar. Trouble with that is you
have to change the gif if you change the width, and
you have to make the width for one particular browser's
interpretation of width.

--
Wes Groleau

What kind of smiley is C:\ ?

Bergamot

2007-07-08, 10:16 pm

Wes Groleau wrote:
>
> Those are the folks who tell me
>
> "_____ is the One True Way to make websites,

There is no One True Way. Ignore anyone who says there is.

> and when you do it right, and half the people
> don't like the way it looks, tell them they're
> idiots and they need to get ______ browser."

That sounds like the outdated "best viewed in browser x" crap. Even if
the "x" is some modern day standards-compliant beast, it's still a poor
practice. A good web site is browser agnostic.

--
Berg

Wes Groleau

2007-07-09, 3:16 am

Bergamot wrote:
> Wes Groleau wrote:
>
> There is no One True Way. Ignore anyone who says there is.
>
>
> That sounds like the outdated "best viewed in browser x" crap. Even if
> the "x" is some modern day standards-compliant beast, it's still a poor
> practice. A good web site is browser agnostic.

It sounds like them, but nowadays, there's also the crowd
that says it all HAS to be in CSS, and you CAN'T use ____
because that's only in the spec to placate the idiots,
and yes, we know that this browser fails to implement the
spec properly, therefore only idiots use it, and you shouldn't
design for idiots.

--
Wes Groleau

There are some ideas so wrong that only a
very intelligent person could believe in them.
-- George Orwell