IE, Firefox conflict.

[Jonathan N. Little]

You tried my suggestion and this is what you found? You floated the logo
left etc?

I think OP does not want the H1 text to wrap under logo. Floating does
not prevent this, margin does as in my example.

 

[dorayme]

I think OP does not want the H1 text to wrap under logo. Floating does
not prevent this, margin does as in my example.

Did you look at my earlier suggestion? Before you, before Bergamot,
before Lars, why hell, before Jesus Christ Himself, I suggested floating
the image, margining the text and playing about with that scheme...

The OP made several posts losing this of mine and then announcing how he
had found it at last. Did he do anything with it? I have no idea.

Perhaps my code snippet/idea (intended for further development,
tailoring by OP) is so laughable in itself that bugger if it is used for
anything, maybe it is just a fun thing to simply have and to behold and
to own, like a cartoon. Perhaps OP framed it? Maybe it is hanging next
to a pic of Roger Rabbit? I don't know.

Maybe I am just about the worst communicator in the world? Maybe I talk
too much. Maybe when I talk, the sound is muffled as in the words of a
couple of spies colluding 40 metres away in thick snow that further
dampens their whispers.

Btw1, never mind my suggestion, I had a chuckle when you said you could
stand it no longer in a post yesterday... <g>

Btw2, I exaggerated in saying "before Lars". There is nothing before
Lars.

Btw3, the <h1> margining and text-align centering was just one
suggestion, the text aligning could be left out.

Btw4, as I suggested in another thread recently somewhere for a similar
heading, OP should consider simply making the Logo and heading text an
image and have that left and the search form right. Nice and bold and
designed nice... Simpler to manage. No, I am not saying this *is* the
way to go.

Btw5, No I am not saying your suggestion was bad or worse than mine or
anything about it. I admire and respect all your code.

Btw6, I can't think of anything for this one.

 

[DLU]

You tried my suggestion and this is what you found? You floated the logo
left etc?

Yes and I tried several tricks but the best I could do was get the text
to center under the other text when it wrapped.

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

 

[DLU]

Cannot take any more....this is how I would do it. BTW no need for all
those extra containers and classes!

Elegant solution.

It has however left me with a couple of problems which I will post in
awhile. I have been working with it and viewing it with the browser off
line. One problem is the Yosemite Falls picture does not center, but
that might just be a CSS problem. The other is none of the graphics in
the third column show. The third column it the first column marked up
after the header.

I have an error:
In HTML 4.01 Strict the tag <div> must be included within a parent tag

I will upload to the web page and look at it there.


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

 

[DLU]

Did you look at my earlier suggestion? Before you, before Bergamot,
before Lars, why hell, before Jesus Christ Himself, I suggested floating
the image, margining the text and playing about with that scheme...

I tried that and was unable to get it to work. I posted what I could
get and what I could not.

The OP made several posts losing this of mine and then announcing how he
had found it at last. Did he do anything with it? I have no idea.

Yes as I said I wirked with your suggestions and that is what the last post,

Perhaps my code snippet/idea (intended for further development,
tailoring by OP) is so laughable in itself that bugger if it is used for
anything, maybe it is just a fun thing to simply have and to behold and
to own, like a cartoon. Perhaps OP framed it? Maybe it is hanging next
to a pic of Roger Rabbit? I don't know.

I tried modifying the CSS and other things that I could think of. I did
learn quite a bit about hopw they work but could not get the result I
wanted.

Maybe I am just about the worst communicator in the world? Maybe I talk
too much. Maybe when I talk, the sound is muffled as in the words of a
couple of spies colluding 40 metres away in thick snow that further
dampens their whispers.

Occasionally you will run into someone like me that is a slow learner.
As I have said several times I am old but I am slow

Btw1, never mind my suggestion, I had a chuckle when you said you could
stand it no longer in a post yesterday... <g>

heading, OP should consider simply making the Logo and heading text an
image and have that left and the search form right. Nice and bold and
designed nice... Simpler to manage. No, I am not saying this *is* the
way to go.

Btw5, No I am not saying your suggestion was bad or worse than mine or
anything about it. I admire and respect all your code.

Btw6, I can't think of anything for this one.

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

 

[DLU]

I think OP does not want the H1 text to wrap under logo. Floating does
not prevent this, margin does as in my example.

It looks good while editing it with Expression Web, but when uploaded to
the web it is really weird.
http://home.surewest.net/bikesac/bikesac/
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************

 

[Bergamot]

Elegant solution.

It has however left me with a couple of problems which I will post in
awhile.

Please stop! I can't take this any more either!

http://www.bergamotus.ws/cnrcc/cnrcc.html
http://www.bergamotus.ws/cnrcc/cnrcc.css

I didn't fix everything that was broken (IMO) but it is far better than
the clunky mess you have, which seems to get a little worse every time I
see it.

One problem is the Yosemite Falls picture does not center

That's because of the screwy way the gray boxes were styled. None of the
green headings were centered either. That really bugged me.

 

[Beauregard T. Shagnasty]

DLU wrote:
| Could be. I really do not like changing screen resolutions if it is
| not necessary. Not too many people are using 600 X 800 any more but
| I will test for it.

Try ResizeBrowser <http://www.rjlsoftware.com/software/utility/resize/>

"This utility allows you to test your code within all of the default
Windows screen resolutions, without changing your own resolution. It
simply resizes any browser window to 640x480, 800x600, 1024x768 or
any custom size"

And it's free!

Why bother with a 4 Megabyte download add-on which may go awry when
there are far easier ways. (And that tool only works in Windows.)

It seems to me it is far simpler to just add a bit of JavaScript to a
test page in your development environment.

<div>
<a href="javascript:resizeTo(240,400)">240x320</a> /
<a href="javascript:resizeTo(640,480)">640x480</a> /
<a href="javascript:resizeTo(800,600)">800x600</a> /
<a href="javascript:resizeTo(1004,728)">1024x768</a> /
<a href="javascript:resizeTo(1280,728)">1280x768</a> /
<a href="javascript:resizeTo(1680,1050)">1680x1050</a> /
<a href="javascript:resizeTo(514,1893)">514x1893</a> /
<a href="javascript:resizeTo(31,9067)">31x9067</a> /
</div>

...or any other dimension you can think of. (Those last couple are to
illustrate the absurdity of the process; you may snip them...)

Of course the simplest way is to just grab a border of your browser
window and drag it somewhere, changing the size.

But the bottom line is, we should not care a whit what size the visitor
is using. Your pages should work no matter what.

http://allmyfaqs.net/faq.pl?AnySizeDesign

 

[dorayme]

I tried that and was unable to get it to work. I posted what I could
get and what I could not.

What you replied after that (at one point) is:

"I have tried every trick I could think of. When you make the browser
window smaller, the text indexes left under the logo."

All I can say to both you and Jonathan Little is this:

My line:

<h1 style="margin-left:190px; text-align: center;">California Nevada
Regional Conservation Committee</h1>

, whatever poor pathetic thing it was, one thing it surely does not and
cannot easily do is wrap under a logo that is itself less than 190px
wide and floated left. At least that is what I think. Do either of you
two think differently?

Please do not bother to write anything about the suggestion not working
or not being up to some scratch for other reasons for now. You were
invited to change things like text-align if you did not like that
look... For that there is a full money-back guarantee as always. Address
only one simple thing, your claim and JL's claim that it wraps under the
logo.

(I know what JL's excuse is and I have typed it out and hidden it under
a brick in my backyard. But I am not sure of yours?)

If it wraps under the logo, not only will I return all monies but will
pay for a round the world trip for you and JL and anyone else, Lars
might want to go on this little jaunt too... You can stay at the very
best hotels you like (even Mumbai's Taj Mahal Palace when it is repaired
to its former glory)

<g>

 

[DLU]

Please stop! I can't take this any more either!

http://www.bergamotus.ws/cnrcc/cnrcc.html
http://www.bergamotus.ws/cnrcc/cnrcc.css

I didn't fix everything that was broken (IMO) but it is far better than
the clunky mess you have, which seems to get a little worse every time I
see it.


That's because of the screwy way the gray boxes were styled. None of the
green headings were centered either. That really bugged me.

My latest version is up. I have not instituted the last two repairs yet.
I have been trying to correct the problem myself as it is a learning
process.

My latest does not have the Yosemite picture centered or the h1 headers
centered.

I will open the file with word and compare it with the one sent by
Bergamaot to see where my mistakes are.

I will change the CSS as Wayne has and see how that works also.

I could see the boxes needed fixing but every time I did something with
the CSS it came out worse.

In the CSS files, some of them do not ave the . in front of them, and
some of them have a # in front of them. How does this affect the CSS?
Also there is a second CSS file, style2.css, that has a couple of
controls that are the same as the ones in the newer.css file and hae
different parameters. What kind of conflict does this cause, should I
inactivate the ones with the same name?

I really do appreciate the help here maybe it is good that some of you
can not stand it It would probably take me a year of web design
school to get this same level of help. It is a labor of love, I
volunteered because we did not have any one else who seemed to have the
computer experience I have. I was supposed to have an associate
webmaster but it turned out to be over the head of the others who
thought they could help. I find it a challenge to work through the
problems but I do not have all the commands down as of yet. I'll get it
though.

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

 

[DLU]

The problem is here:
/* The theory here is we will give the main part of the page
a big wide right border, then we will place the right bar on
that border so the right bar will appear to go all the way to
the bottom, even if we don't fill it up. */

.wrapper {
margin: 0;
padding: 0;
background-color: white;
border-width: 0 180px 0 0;
border-color: #CCC;
border-style: solid;
}

/* the right bar has a negative right margin in order for it
to float out over the huge right border we created. */


.rightbar {
float: right;
width: 18%;
margin: 0 -180px 0 0;
background-color: #CCC;
height: 100%;
}

Specifically width:18% ; over the top of the 180px in .wrapper above.
Remove the line width:18%; and this issue is resolved.

I am not sure I see what you are referring to.
The 18% is in the .rightbar not in .wrapper. I took the 18% out and it
moved the right bar to the top of the left side.

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

 

[Jonathan N. Little]

My latest version is up. I have not instituted the last two repairs yet.
I have been trying to correct the problem myself as it is a learning
process.

Why don't you stop being a code-monkey and learn how to do it correctly
in an organized manner? Stumbling upon what "works" is not an effective
way to learn and may confuse more then help. Learn the basics first.

1: http://www.htmldog.com/guides/htmlbeginner/

2: http://www.htmldog.com/guides/cssbeginner/

3: http://www.htmldog.com/guides/htmlintermediate/

4: http://www.htmldog.com/guides/cssintermediate/

5: http://www.htmldog.com/guides/htmladvanced/

6: http://www.htmldog.com/guides/cssadvanced/

This should keep you busy for awhile, but in the end you will not be
muddling through and your project will be far more successful!

 

[DLU]

Why don't you stop being a code-monkey and learn how to do it correctly
in an organized manner? Stumbling upon what "works" is not an effective
way to learn and may confuse more then help. Learn the basics first.

1: http://www.htmldog.com/guides/htmlbeginner/

2: http://www.htmldog.com/guides/cssbeginner/

3: http://www.htmldog.com/guides/htmlintermediate/

4: http://www.htmldog.com/guides/cssintermediate/

5: http://www.htmldog.com/guides/htmladvanced/

6: http://www.htmldog.com/guides/cssadvanced/

This should keep you busy for awhile, but in the end you will not be
muddling through and your project will be far more successful!

Oh, I have them bookmarked and study them, but it takes awhile to sink
in, and I still have to insert the code and see how it reacts with the
program. I can read all day, but until I actually get it to work in some
manner or other it does not compute.

I also have:
http://www.htmlcodetutorial.com/quicklist.html

and several books with, but none of them really show you how to make
things like the boxes on my page for instance, or the means by which you
got the header to line up. You need to understand the the users of the
site have not made much in the way of comments. It is me who wants to
make it as good as possible. I could leave it as it is now, and my
audience would not know the difference, on the other hand I post here
and I get every possible error discovered. Then I work to correct them.



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

 

[Bergamot]

It is me who wants to
make it as good as possible.

Sorry, but I don't see any evidence you're really working towards that.
You're in over your head and for whatever reason aren't taking the time
to learn even the basics of CSS before jumping into this layout you've
chosen. How can you hope to "get it" with no understanding of how things
are *supposed* to work?

Maybe this will shed some light on it for you:
http://brainjar.com/css/positioning/

I could leave it as it is now, and my
audience would not know the difference, on the other hand I post here
and I get every possible error discovered. Then I work to correct them.

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

In what way is this any better than any previous attempt?

- The markup is still full of cruft and poor semantics.
- The headings are still not centered over the gray boxes.
- The margins between columns is still excessive at larger text and/or
smaller window sizes.
- The Yosemite Falls picture is still not centered in its column.
- There are still bogus inline styles.
*Get rid of that bloody 'style="height: 20px"' !!!*

You are ignoring the larger errors such as poor markup, and nitpick over
things like centering a photo. Your priorities are whacked, IMO.

You need a good foundation if you want quality results. You don't have
that foundation and you'll never get the results you seek until you do.

 

[Chaddy2222]

Sorry, but I don't see any evidence you're really working towards that.
You're in over your head and for whatever reason aren't taking the time
to learn even the basics of CSS before jumping into this layout you've
chosen. How can you hope to "get it" with no understanding of how things
are *supposed* to work?

Maybe this will shed some light on it for you:http://brainjar.com/css/positioning/


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

In what way is this any better than any previous attempt?

- The markup is still full of cruft and poor semantics.
- The headings are still not centered over the gray boxes.
- The margins between columns is still excessive at larger text and/or
smaller window sizes.
- The Yosemite Falls picture is still not centered in its column.
- There are still bogus inline styles.
   *Get rid of that bloody 'style="height: 20px"' !!!*

You are ignoring the larger errors such as poor markup, and nitpick over
things like centering a photo. Your priorities are whacked, IMO.

You need a good foundation if you want quality results. You don't have
that foundation and you'll never get the results you seek until you do.

I thaught some of my mark-up was bad. Till I looked at the source code
of the Op's site (it goes on for ever).

 

[DLU]

That has nothing to do with CSS, or the HTML markup. It's because Nels
(or was it Lars?) made real thumbnail images with the correct dimensions
using a graphics editor. You need to learn how to do that yourself.

I meant Lars.

The CSS is not error-free. If you validate against HTML 4.01 Strict,
you'll see the HTML is not error-free, either, even ignoring the target
attribute on a couple links.


But the CSS *doesn't* work. If it did, this thread would have died long
ago or not even started in the first place, don't you think?

Obviously and I am trying to find out why.

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

 

[DLU]

I am not sure what you are getting at here. You can make these
statements but, how are things supposed to work? What do you mean by
that? I started with books on web design and went through the exercises.
I then used a template from the SC which turned out to have really
poor construction but it was readable to the users.

As I was working to find what the errors were that caused several
problems I posted here and received some help fixing things. Then Lars
did a rework for me that worked quite nice for my viewers. Then I
discovered that there was some IE, Firefox conflicts and started working
to get those corrected. However I have tried to make some more upgrades
and they did not always come out correct. So, I posted here again and
got some more suggestions.

Johnathan Little put up some code that corrected the header problem but
then other anomalies showed up and I posted to see what could be done
there also. And while I have been at it, I discovered some conflicting
CSS in two different files. I asked about this and instead of a quick
pointer or two I suddenly get told off for the code, which by the way
has mostly been done by getting pointers here.

Bergamot posted a very nice recode but I have not been able to get it
downloaded properly for some reason. I copied the HTML and am at the
moment working to put it in place of what I have now.

Now a great deal of the code you are criticizing has come from people on
this NG. I asked a couple of questions about the CSS that I do not find
covered in the URLs that have been posted here.

Example: wrapper:, or .wrapper:, or #wrapper:
How do each of these react to the main code?

I thaught some of my mark-up was bad. Till I looked at the source code
of the Op's site (it goes on for ever).

So keep in mind that at present the majority of the code was written by
Lars, who I personally thought did a very nice job. Obviously there are
several ways to do this site. I have gotten rid of the inline styles as
I find them. I do not seem to be able to get the margins to adjust as I
would like and have had to rewrite the CSS. In the process I realized
that the other CSS file might be causing a conflict and asked about
this. At the moment I will comment them out and see what the effect is.

I do not know what the "poor semantics" in the code are. Maybe someone
could elucidate for me.

I have made changes to the CSS but the headings do not seem to center,
and I did the same for the Yosemite photo. Bergamot's code does that
but as I said I have not been able to get all of it to work on my site.
For instance the boxes display in the Expression Web viewer but not on
the page when I look at it in Firefox.
My surewest site is for testing and mainly for those of you who are
helping and is public, so the documents are not uploaded to that site.
I think this thread might not have gone on so long if there was some
kind of agreement on coding to start with. I have been told it works OK
but not when the screen size was changed. I have been told the code was
lousy even though I corrected it as was suggested. I have been told the
CSS does not work but when I change it it has effects, not alway good,
and in the long run I have to put the code I have back up until the
changes work correctly. I ave received some really good help and some
not so good criticism. I do not mind criticism but I like to know just
what is being criticized so that I can fix it. Just telling me the code
is lousy does not do anything to fix the problem. I posted here as an
amateur for help. I did not pose as professional or even that I was
the most knowledgeable person, I posted for help. If people do not want
to help, or if you are frustrated because I do not seem to get the
solution in micro seconds then it does not good to denigrate my efforts.
I took on this project because I am concerned about the environment and
no one else on the committee seemed to have the time or expertise to
even begin it. I will get it eventually. I will not happen in the next
100 ms, or even 1K ms, but it will happen. I learned assembly code for
the PDP 11-780, and I can learn this.

One more thing. The main web site is at:
http://clubhouse.sierraclub.org/ca/cnrcc/index.asp
un clubhouse pw explore


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

 

[Jonathan N. Little]

Now a great deal of the code you are criticizing has come from people on
this NG. I asked a couple of questions about the CSS that I do not find
covered in the URLs that have been posted here.

Example: wrapper:, or .wrapper:, or #wrapper:
How do each of these react to the main code?

If you would review the tutorials at htmldog.com then you would learned
that in a stylesheet

wrapper { foo: bar; }

means nothing unless "wrapper" was a valid element, but it is not in
HTML, valid elements are "p", "div" or "form"

..wrapper { foo: bar; }

means set any element of class "wrapper" the property "foo" is set to
the value "bar"


#wrapper { foo: bar; }

means set any element with the ID "wrapper" the property "foo" is set to
the value "bar"

you will also learn about other selectors as well...

I do not know what the "poor semantics" in the code are. Maybe someone
could elucidate for me.

Again, if you would learn the basics first before jumping in it would be
less confusing.

Semantic markup means to place text in elements that define the
structure of the document and not how it looks, e.g. paragraphs within P
elements, lists within UL or OL elements, headings within H# as opposed
to using elements to get the look or "presentation". A common bad
practice is to use H# elements not for headings but just to enlarge or
emphasize text. A pretty good page about the difference found here, just
ignore the 'XHTML' part and think 'HTML'

http://www.motive.co.nz/glossary/markup.php
definition: markup/mark-up: presentational, structural, semantic |
Motive Web Design Glossary

 

[DLU]

If you would review the tutorials at htmldog.com then you would learned
that in a stylesheet

wrapper { foo: bar; }

means nothing unless "wrapper" was a valid element, but it is not in
HTML, valid elements are "p", "div" or "form"

.wrapper { foo: bar; }

means set any element of class "wrapper" the property "foo" is set to
the value "bar"


#wrapper { foo: bar; }

means set any element with the ID "wrapper" the property "foo" is set to
the value "bar"

I guess I did not see that explanation as clearly there.

Semantic markup means to place text in elements that define the
structure of the document and not how it looks, e.g. paragraphs within P
elements, lists within UL or OL elements, headings within H# as opposed
to using elements to get the look or "presentation".

I see, since I inherited the original markup, and the CSS names in
particular I do plan to make them more readable and even alphabetical
eventually. Believe me when i say I have to hunt down a particular CSS
to find out what it is supposed to do. As an example there is one .r,
which on first look does not tell you what it is for. There are several
others like it, but as I have said previously, one at a time.


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

 

[dorayme]

since I inherited the original markup

That's a statistically unlikely use for "inheritance" in this group...
<g>