OK, Next Question.

A

Adrienne Boswell

We are all volunteers on this committee, no one gets paid except those
who print the newsletters. I do not tell them what they should want, I
set it up and ask them if they like it.

Do not tell clients what they SHOULD want. Tell clients they COULD have a
more accessible web site, they COULD get better search engine positioning,
they COULD get more visitors, they COULD get more contributions, etc., IF
they follow your suggestions.
 
D

DLU

I bought:
The Ultimate CSS Reference.
Olson & O'Brien

Hope it was worth it.
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************
 
N

Neredbojias

I bought:
The Ultimate CSS Reference.
Olson & O'Brien

Hope it was worth it.

Mebbe, I dunno. As for myself, I learned the hard way - by trying
stuff and seeing if it worked and talking 'bout it here and waiting for
people to bitch, etc. However, there _are_ gaps in my "education",
probably most related to theory and stuff like that, but at least I
didn't get "paper finger".
 
D

DLU

http://home.surewest.net/bikesac/bikesac/

Using the wide margin the you put in the CSS .wrapper, seems to cause a
problem with people who are still using OI6.
I causes the rightbar to move over the top of the box to the right of
it, and to make the left side move down the page making a large open
space between the headers and the main content.

I took out the margin and moved the rightbar falls into place but I can
not get the header to extend over the rightbar. also there is a wide
blank space under the tagline that I can not make smaller. I have not
been able to discern which CSS is setting the space.

I can extend the hight if the rightbar so that it extends to the page
bottom. that seems to work better. All the newer browsers seem to work
OK as it was, but a few people still have older machines.


***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************
 
D

DLU

Neredbojias said:
Mebbe, I dunno. As for myself, I learned the hard way - by trying
stuff and seeing if it worked and talking 'bout it here and waiting for
people to bitch, etc. However, there _are_ gaps in my "education",
probably most related to theory and stuff like that, but at least I
didn't get "paper finger".
Well I am trying stuff, but I have not figured out the anchor
configuration, and how these actually work.

/* list items within .nav */
..nav li {
margin: 5px 0 5px 0;
padding: 0 0 3px 0;
text-align: center;
border: solid 1px #FFF;
border-width: 0 0 1px 0;
width: 180px;
display: block;
}
/* links within .nav */
..nav li a:visited {
text-decoration: none;
width: 100%;
display: block;
}
..nav li a:link {
text-decoration: none;
width: 100%;
display: block;
}
..nav li a:active {
color: blue;
background-color: white;
}
..nav li a:focus {
color: blue;
background-color: white;
}
..nav li a:hover {
color: blue;
background-color: white;
}
I do not see them declared within the headers to the sections.
I have not had the time to change an attribute and see what happens.

There also seems to be some other selectors.
the (.), (*), (@), (#), seem to have different effects, but I have nt
been able to make the connection yet.

--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************
 
D

DLU

DLU said:
http://home.surewest.net/bikesac/bikesac/

Using the wide margin the you put in the CSS .wrapper, seems to cause a
problem with people who are still using OI6.
I causes the rightbar to move over the top of the box to the right of
it, and to make the left side move down the page making a large open
space between the headers and the main content.

I took out the margin and moved the rightbar falls into place but I can
not get the header to extend over the rightbar. also there is a wide
blank space under the tagline that I can not make smaller. I have not
been able to discern which CSS is setting the space.

I can extend the hight if the rightbar so that it extends to the page
bottom. that seems to work better. All the newer browsers seem to work
OK as it was, but a few people still have older machines.
I think I got part of it, still have not figured out how to close up the
space between the header and the boxes below it.
Also, the width of the boxes changed to take up the whole page, is that
what they are supposed to do, and then correct for smaller screen sizes?
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************
 
J

John Hosking

I think I probably don't have this UA to test with. Typo?

Your .masthead is 118% (of the viewport, I think), while your .rightbar
is set to width: 180px. The collision of pixel sizing and viewport
percentages will give you different results at different window sizes.
I think I got part of it, still have not figured out how to close up the
space between the header and the boxes below it.

Delete (at least the uncommented parts of):

<p class="disclaim" style="height: 23px"><span class="style1"></span><br>
<!--For corrections and requests email:
<a href="mailto:[email protected]">Webmaster</a></p>-->

<!-- The left column starts here-->

[rest snipped]
 
J

John Hosking

John said:
[snippage]
I think I got part of it, still have not figured out how to close up
the space between the header and the boxes below it.

Delete (at least the uncommented parts of):

<p class="disclaim" style="height: 23px"><span class="style1"></span><br>
<!--For corrections and requests email:
<a href="mailto:[email protected]">Webmaster</a></p>-->

<!-- The left column starts here-->

as well as this closing tag:

</p>

which I hadn't seen before my previous post (it's always *after* I hit
send...)
 
J

John Hosking

I'm thinking not. Depends on whether you *read* it or just *bought* it. ;-)
Well I am trying stuff, but I have not figured out the anchor
configuration, and how these actually work.

/* list items within .nav */
.nav li {
margin: 5px 0 5px 0;
padding: 0 0 3px 0;
text-align: center;
border: solid 1px #FFF;
border-width: 0 0 1px 0;
width: 180px;
display: block;
}
/* links within .nav */
.nav li a:visited {
text-decoration: none;
width: 100%;
display: block;
}
.nav li a:link {
text-decoration: none;
width: 100%;
display: block;
}
.nav li a:active {
color: blue;
background-color: white;
}
.nav li a:focus {
color: blue;
background-color: white;
}
.nav li a:hover {
color: blue;
background-color: white;
}
I do not see them declared within the headers to the sections.
I have not had the time to change an attribute and see what happens.

I don't know what you mean by the first (I mean the one-before-last)
sentence above, and I also haven't studied their content or played with
them at all, but I can point out that the ordering of these declarations
is problematic, not to say wrong. You want the order :link, :visited,
:hover, :)focus,) :active, where :focus is a bit special and not always
declared (researching why is left as an exercise for the reader). By the
way, these are known as pseudo-classes.
There also seems to be some other selectors.
the (.), (*), (@), (#), seem to have different effects, but I have nt
been able to make the connection yet.

This is really fundamental to using CSS. Probably you should stop
tinkering with live pages until you get these things down. If the book
you bought (with which I've had no personal experience) doesn't cover
this, then demand a refund. (Although it's called "Reference", so maybe
you're assumed to already understand this stuff, and nothing's actually
explained in the book. But if *anything* about CSS is explained, it
ought to include what the "." and "#" are used for.)

I really like (using and recommending) the tutorial pages at
<http://css.maxdesign.com.au/selectutorial/>. Go through all of them.
Directly pertinent to your question are the pages starting at
<http://css.maxdesign.com.au/selectutorial/selectors_type.htm>, which
talk about class (.) and id (#) selectors, plus
<http://css.maxdesign.com.au/selectutorial/selectors_universal.htm> for
the universal selector (*) (note also the support charts; I know IE6 and
below don't support *).

I don't use @ much myself, but I'd probably go right to the W3C for that
when I had a question.
<http://www.w3.org/TR/CSS21/syndata.html#at-rules> would be my first
stop, although I'd probably keep looking around the spec and maybe a few
other tutorial or reference sites.

For pseudo-classes:
<http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm>
and, e.g.,
<http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes>.

GL. HTH.
 
B

Bergamot

DLU said:
http://home.surewest.net/bikesac/bikesac/

Using the wide margin the you put in the CSS .wrapper, seems to cause a
problem with people who are still using OI6.
I causes the rightbar to move over the top of the box to the right

It's causing a problem for the rest of us, as well. Maybe you hadn't
noticed the horizontal scrolling, regardless of the window size.

Besides the .masthead width:118% that someone else already mentioned,
you removed the right border on .wrapper (which is what made the gray
background go all the way down to the bottom of the page), but are still
positioning the right column at margin-right:-200px. This makes the page
width 100% + 200px, so it will *always* scroll.

I can't imagine that's what you wanted. Please stop hacking away at
these things and learn how the CSS box model and positioning are
supposed to work. I'm sure I posted the link before, but here it is again:
http://brainjar.com/css/positioning/

If you don't understand it, then ask! Just stop hacking away hoping
something will fall into place, because it won't!

Learn how to use the developer extension tools for Firefox, too.
Firebug, the Web Developer extension, and the DOM Inspector can be
invaluable for debugging CSS. At the very least, they can help pinpoint
rogue elements and those with bad rules.

And validate your code to eliminate syntax errors as a cause of
rendering problems.
 
N

Neredbojias

Do not tell clients what they SHOULD want. Tell clients they COULD
have a more accessible web site, they COULD get better search engine
positioning, they COULD get more visitors, they COULD get more
contributions, etc., IF they follow your suggestions.

Sounds like tyrannical blackmail to me...
 
A

Adrienne Boswell

Gazing into my crystal ball I observed Neredbojias
Sounds like tyrannical blackmail to me...

No, it's more like Obi Wan saying "You don't need to see his
identification" and waving his hand.

The difference here is SHOULD vs COULD. Our minds almost automatically
shut down when someone says "should", but if someone says you "could",
our minds thinks "I could" and that leaves a possibility open.
 
D

DLU

Bergamot said:
It's causing a problem for the rest of us, as well. Maybe you hadn't
noticed the horizontal scrolling, regardless of the window size.

Yes I have noticed the horizontal scrolling.
That is one of the things I am trying to correct. Apparently I have to
get all three columns to add up to 100%. The problem I have at the
moment is the space just above the H2s. it extends past the area and
the right column sits on top of it causing the header to be the highth
of that column above the two main content boxes.
What is there at the moment will be changed as soon as I get close to
what i want it to do. It has to work with IE6 and also to work when the
size is changed.
Besides the .masthead width:118% that someone else already mentioned,
you removed the right border on .wrapper (which is what made the gray
background go all the way down to the bottom of the page), but are still
positioning the right column at margin-right:-200px. This makes the page
width 100% + 200px, so it will *always* scroll.

It is the .wrapper that is causing the problem with IE6. Now I have
suggested that people stop using IE6 and below because it is so buggy,
however, it seems as if some people can not upgrade to IE7 for some
unknown reason. As i said previously, many of these people probably
should not own a computer, but that is another subject.

yes I did position the right column to far to the right, I did so in
order to see where the block was coming from as I could not discern it
from the CSS. Believe me when I say I have been reading just about
everething I can find on this.
I can't imagine that's what you wanted. Please stop hacking away at
these things and learn how the CSS box model and positioning are
supposed to work. I'm sure I posted the link before, but here it is again:
http://brainjar.com/css/positioning/

Actually having the gray box extend to the bottom of the page is not
necessary,and the same effect can be achieved by extending the .rightbar
as far as I can tell.
If you don't understand it, then ask! Just stop hacking away hoping
something will fall into place, because it won't!

Well I was asking and got hammered for it.
Learn how to use the developer extension tools for Firefox, too.
Firebug, the Web Developer extension, and the DOM Inspector can be
invaluable for debugging CSS. At the very least, they can help pinpoint
rogue elements and those with bad rules.

I have them but it still does not give me the information I need.
And validate your code to eliminate syntax errors as a cause of
rendering problems.

The working copy I am using has been validated, I keep it up to date.
I found three minor errors such as a misplaced </a>, an unclosed <li>,
and a line that the program put in that identified a pic as being a
thumbnail. None of them affected the operation of the code.



--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************
 
D

DLU

Well that is what I am doing, now you get to bitch.
I don't know what you mean by the first (I mean the one-before-last)
sentence above, and I also haven't studied their content or played with
them at all, but I can point out that the ordering of these declarations
is problematic, not to say wrong. You want the order :link, :visited,
:hover, :)focus,) :active, where :focus is a bit special and not always
declared (researching why is left as an exercise for the reader). By the
way, these are known as pseudo-classes.

Neredbojias wrote them and made the css that they are in, and they
seemed to work. If they need to be rearranged then where is the
information that tells me that. Se, the problem is, I have been reading
everything I can find on this but some of tis just does not show up, it
seems to be something that is learned by osmosis.
This is really fundamental to using CSS. Probably you should stop
tinkering with live pages until you get these things down. If the book
you bought (with which I've had no personal experience) doesn't cover
this, then demand a refund. (Although it's called "Reference", so maybe
you're assumed to already understand this stuff, and nothing's actually
explained in the book. But if *anything* about CSS is explained, it
ought to include what the "." and "#" are used for.)

Again, I have read every thing suggested here and what ever else I can
find. I see the descriptions but unless someone restates these in plain
english, it still comes across as written by some tech writer from
Bangladesh.
I really like (using and recommending) the tutorial pages at
<http://css.maxdesign.com.au/selectutorial/>. Go through all of them.
Directly pertinent to your question are the pages starting at
<http://css.maxdesign.com.au/selectutorial/selectors_type.htm>, which
talk about class (.) and id (#) selectors, plus
<http://css.maxdesign.com.au/selectutorial/selectors_universal.htm> for
the universal selector (*) (note also the support charts; I know IE6 and
below don't support *).

Yes I have read them several times and sort of get the idea but it is
like if someone was teaching you assembly language and all you had was
examples. Do you understand stacks, overflows, FIFO, LIFO, calls, how to
write an assembler, a compiler, did you just learn it by yourself
reading a few books, or did someone actually help you understand the books?
I don't use @ much myself, but I'd probably go right to the W3C for that
when I had a question.
<http://www.w3.org/TR/CSS21/syndata.html#at-rules> would be my first
stop, although I'd probably keep looking around the spec and maybe a few
other tutorial or reference sites.

For pseudo-classes:
<http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm>
and, e.g.,
<http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes>.

GL. HTH.


--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************
 
N

Neredbojias

No, it's more like Obi Wan saying "You don't need to see his
identification" and waving his hand.

The difference here is SHOULD vs COULD. Our minds almost
automatically shut down when someone says "should", but if someone
says you "could", our minds thinks "I could" and that leaves a
possibility open.

'Kay, I think I see where you're coming from. It sounded kinda preachy
at first but perhaps that was just me and my gall bladder. I get a
little neurotic around the holidays because Santa Claus yelled at me
once for asking for a hooker.
 
B

Bergamot

DLU said:
That is one of the things I am trying to correct. Apparently I have to
get all three columns to add up to 100%.

There is no "apparently" about it. If you understood the box model, you
would know that, and how to avoid such problems.

I get that you're trying to learn, but you've really got to get the
fundamentals down first. Without that, you'll never get past the
problems you're having now. You'll just keep making things worse.
The problem I have at the
moment is the space just above the H2s. it extends past the area and
the right column sits on top of it causing the header to be the highth
of that column above the two main content boxes.

? Are you talking about the empty space between the bottom of the
masthead and the top of the h2? That area does not extend any farther
right than it did before. It is bound by the same containing div.main as
the 2 content columns. Whatever you perceive to be the issue is probably
not it at all.

BTW, I see no real difference between IE6 and other browsers. The layout
looks to be equally "off" in all.
It is the .wrapper that is causing the problem with IE6.

No, removing the border on .wrapper caused problems. I'll try to explain...

Before:
..wrapper { <-- container for the 3 cols below the masthead
margin: 0;
padding: 0;
border-width: 0 180px 0 0;
border-color: #CCC;
border-style: solid;
}
..main { <-- container for the 2 content cols
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
}

Now:
..wrapper {
margin: 0;
padding: 0;
border-width: 0 0 0 0; <-- right border gone
border-color: #CCC;
border-style: solid;
}
..main {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%; <-- same as before
}

The .wrapper div has no explicit width and defaults to auto, which in
this case is 100% of the available viewport width. The previous styling
with the border made the calculated div width (refer to the box model)
100% *minus* 180px
The right column was subsequently positioned with a margin-right:-180px
that put it on top of that 180px right border.

Within .wrapper there is another div container for the 2-column content
area: .main
Its width is 100% of the available space in .wrapper. After you removed
the border, this became 100% of the viewport width, leaving no place for
the right column to go except off the right side of the screen.

Does any of that make sense? If not, what specifically don't you understand?
Now I have
suggested that people stop using IE6

Good luck with that. It's not really important, anyway, because undoing
the problems you brought on yourself will clear up the IE6 issues, too.
yes I did position the right column to far to the right, I did so in
order to see where the block was coming from as I could not discern it
from the CSS.

You will find these things *way* easier using any of the Firefox tools I
mentioned. Firebug and the DOM Inspector both outline elements for you,
plus you can learn a lot just by following the DOM tree and seeing how
elements are nested.
Believe me when I say I have been reading just about
everething I can find on this.

But you either aren't comprehending, or not retaining what you do learn.
I don't know why that is, but it is your biggest obstacle at the moment.
Actually having the gray box extend to the bottom of the page is not
necessary,and the same effect can be achieved by extending the .rightbar

By "extending" do you mean adding the inline style of height:1593px?
as far as I can tell.

This shows just how little you do know. The number you chose only
"works" when the conditions are the exact same as when you chose it. By
that I mean browser viewport size, font size, and any other variables
that affect the physical page dimensions. You might as well have picked
3000, or 1000, and had a chance of being "right" under some specific
conditions. Setting height like that is an ugly, newbie hack and is the
wrong way to go about it.
Well I was asking and got hammered for it.

You aren't asking the right questions, I think, or it appears that you
aren't even trying to learn from the references given you, even if you
really are. The latter is perceived as laziness on your part and does
not endear you to the regulars here. So you get hammered.
I have them but it still does not give me the information I need.

I loaded your page in Firefox/Firebug and easily found where all the
excess H2 spacing comes from. You've got a bogus inline style
height:23px for starters. Add to that a bogus <br/>, plus 1em top and
bottom padding, plus default margins added to the <p> element and you've
got a big heap of space with nothing in it. Everything you'd want to
know about the right column is there, too.

AND GET RID OF ALL YOUR INLINE STYLES!!! They only make maintenance a
PITA and debugging an even bigger PITA.
The working copy I am using has been validated, I keep it up to date.
I found three minor errors such as a misplaced </a>, an unclosed <li>,

Does that mean you are working off a different version than the one you
and a line that the program put in that identified a pic as being a
thumbnail.

I don't know what that means. What program?
None of them affected the operation of the code.

How can you say that for certain when you admit you don't know what the
code is doing? Fix the errors and post the corrected page.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top