IE, Firefox conflict.

[Jonathan N. Little]

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.

If you learn what "C" in CSS is you will understand that alphabetical
order of your rules or selectors will *not* be a good idea, in fact may
be a very *bad* idea.


If you inherited such a mess, most times the most efficient way to fix
it is to save to copy, i.e., the plain textual content-- strip all HTML
and STYLE. Then redo the markup semantically to build the proper
structure for the documents, then develop a stylesheet to give the
document the appearance you wish!

 

[dorayme]

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

Another way that you might think of the semantics of a mark up is that
it is a way to tell a browser how to make a basic presentation. This way
of looking at it can give you some immediate understanding of what is
good and what is bad markup.

If you turn off or omit all the styles that you, the author, have added,
or mean to add, you get a basic appearance. Never mind why for the
moment. The point is that browsers do not keel over and die because you
have not told it about appearances or presentation. There are no
browsers that have no ideas of their own how to present HTML.

Only non-existent browsers have no sense of style. Perhaps it could be
more charitably said that only abstract browsers (let's grant them
existence) have no sense of style. But non-existent browsers and
abstract browsers are almost completely useless browsers.

You will find that a lot of orthodox explanations of semantic markup
deal in this useless variety of browser. So, as a practical novice in
these matters, I suggest you have nothing at all to do with the orthodox
types of explanation, no matter that they are mostly true as far as they
go.

Now, if the browser basic appearance, without a skerrick of author
styles, makes no sense to a human being, then, if the browser is a
competent one, you have done a very bad job. You have done a really
first class job if your site is perfectly understandable on the HTML
processing by the browser.

Let me give you an example, you want to say something about trees. You
want people to know that what you have to say is about trees. One
obvious way to do this is to put a heading up.

<h1>Trees</h1>

that should be presented on its own as a first item, it would stand out
by being bold or big or loud or simply by being on its own with a pause
or space below it. The real life browsers, the ones that exist, know how
to present such a thing so that most basically educated people can
understand it. Real browsers transmit meaning by knowing *how to
present* text that is marked up in level one heading tags.

Below or after this would be various thoughts you want to say about
trees. Each thought, by long convention and evolution of communication,
is probably best put into paragraphs. Real browsers know how to present
these in ways that humans recognise. I don't know what abstract browsers
do, you will have to ask various folk who like to conjure them up.

I will stop now and hope you will take away at least the idea that if
you remove all *your* styles, how does your webpage look (or sound or
feel in non-visual browsers), crucially, does it make sense to a human?

 

[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"

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

I have just finished parsing htmldog and can not find any explanation
like you just gave. In fact several example show CSS without the . and
one that sort of explains the # but it is not real clear.
This is not the first time I have read htmldog but the examples are not
always easy to see.

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

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

 

[Jonathan N. Little]

Jonathan N. Little wrote:

I have just finished parsing htmldog and can not find any explanation
like you just gave. In fact several example show CSS without the . and
one that sort of explains the # but it is not real clear.
This is not the first time I have read htmldog but the examples are not
always easy to see.

The first selector, the *type* selector (e.g., the ones without the
period p {}) is introduced here

http://htmldog.com/guides/cssbeginner/selectors/
CSS Selectors, Properties, and Values | HTML Dog

Then the class and id selectors are featured here

http://htmldog.com/guides/cssintermediate/classid/
Class and ID Selectors | HTML Dog

Of curse going to the source ain't a bad idea.

http://www.w3.org/TR/CSS21/selector.html

Not the most exciting read, but the most informative...

 

[Jonathan N. Little]

There is an excellent tutorial on Selectors here:

<http://css.maxdesign.com.au/selectutorial/>

Agree! Look like a clear and accurate tutorial upon quick inspection,
worthy of bookmarking.

 

[DLU]

I posted the recode that Bergamot did.
It looks good on the web page in both IE, and Firefox and when page size
is changed.

It has on glitch in that my editor, Expression Web has the right column
where he images are displayed, and the selections above them, are
shifted to the left of the column so that they appear over the right
side of the middle column. Since it looks good on the web page the
problem has to be with Expression Web, but I can not see what CSS is
used to set the position of the graphics.
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************

 

[dorayme]

I can not see what CSS is
used to set the position of the graphics.

Perhaps you want this bit of the CSS:

/* captioned photos under right column .nav */
ul.scenes {
width: 180px;
text-align: center;
margin: 0 0 2em 0;
padding: 0;
list-style: none;
}
ul.scenes li {
margin: 1.5em 0;
padding: 0;
}
ul.scenes a {
text-decoration: none;
}
ul.scenes a span {
background: #ccc;
color: #000;
}
ul.scenes img {
display: block;
border-width: 0;
}

 

[DLU]

Perhaps you want this bit of the CSS:

/* captioned photos under right column .nav */
ul.scenes {
width: 180px;
text-align: center;
margin: 0 0 2em 0;
padding: 0;
list-style: none;
}
ul.scenes li {
margin: 1.5em 0;
padding: 0;
}
ul.scenes a {
text-decoration: none;
}
ul.scenes a span {
background: #ccc;
color: #000;
}
ul.scenes img {
display: block;
border-width: 0;
}

That was what I was looking at but it did not seem to help.
This is what fixed it and it does not seem to affect the online display.

..rightbar {
float:right;
width: 180px;
margin: 0 -360px 0 0;
background-color: #CCC;
color: #000;
position: relative; /* for IE */

I changed the margin from -180 to -360.
Now I just have to get the header to look the same in the editor
program. It does not extend across the top of the page in the editor
but is fine online.

Bergomat's revision is quite different than Lar's was. I am also going
to work with Lar's just to see how compatible I can make the two.
Bergomat's made me wonder for awile until I realized many of the hrefs
and src calls, referred to files on his web site. I had to go through
and edit those.




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

 

[dorayme]

That was what I was looking at but it did not seem to help.

I must have misunderstood your:

"Since it looks good on the web page the
problem has to be with Expression Web, but I can not see what CSS is
used to set the position of the graphics."

I suppose you will not welcome me saying that you will learn much
quicker with a plain text editor? <g> Just a suggestion to eliminate
this extra layer of things you seem to have to cope with?

 

[DLU]

I must have misunderstood your:

"Since it looks good on the web page the
problem has to be with Expression Web, but I can not see what CSS is
used to set the position of the graphics."

I suppose you will not welcome me saying that you will learn much
quicker with a plain text editor? <g> Just a suggestion to eliminate
this extra layer of things you seem to have to cope with?

With plain text editor you have no way to see the immediate changes, you
have to switch between the editor and the browser.
Expression Web allows you to see the page and the code at the same time,
and when you put the cursor on a place it shows the associated code or
display at the same time. I can make changes in the CSS and see the
immediate impact. I can write a basic program using a text editor, that
is not the issue. The program also gives me page templates that I can
use to add new pages tot he site, such as the ones that take you to the
BATC page, and the archives for instance. I can also save various
versions of the page and it also has the FTP so that I can immediately
upload changes. In that case, if the chair of the committee asks me to
put something on the page, I can do so in a matter of a few minutes.

My layer of things mostly involves CSS, uL, ol, div, and a couple of
other tags. CSS properties and values and how to make them work. It is
also an intellectual exercise, just as when I was learning code. Some
of us would spend all night in the computer lab writing and debugging
code. The main advantage was that we had debugging programs, or were
able to step through a a source code one line at a time and see where
the error occurred.

Notice here with HTML, there have been several ways to write the same
page and they all make the page look the same, but not all are as
efficient or as easy to trouble shoot. I learn more by trouble shooting
the code than I do by just writing it. When I was working my main job
was to trouble shoot large complicated electrical systems. They would
be installed by contractors who were supposed to follow the
manufacturers specifications but did not always work as planned once
installed. Now, I have indeed been picking brains to get the best
information IO can in order to manage this web page. This will allow me
to keep it running with minimal maintenances and time. If i go hiking
for ten days or two weeks in the Sierra Nevada, it will continue to run
just fine. I can probably train a helper to do the simple things like
adding and removing references, or posting news and such.

One I get this down I will embark on a more complicated site using drop
down menus and maybe animation just to keep up to date.

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

 

[dorayme]

If i go hiking
for ten days or two weeks in the Sierra Nevada, it will continue to run
just fine.

One I get this down I will embark on a more complicated site using drop
down menus and maybe animation just to keep up to date.

I say this on behalf of everyone here, confident in their assent. We
look forward to this event with anticipation and pleasure. Have a nice
hike.

(If, while you are away, we notice anything on your page urgently
needing your attention, have you a mobile number we can text?)

 

[John Hosking]

With plain text editor you have no way to see the immediate changes, you
have to switch between the editor and the browser.
Expression Web allows you to see the page and the code at the same time,
and when you put the cursor on a place it shows the associated code or
display at the same time.

I understand what you are saying, and how close you think your world is
to being as nice as you want it. But:

1. Graphical editors have a poor track record for accurate display, even
when not using server-side content generation (I have no experience with
Expression Web, but have used multiple versions of MS FrontPage, and
Macromedia Dreamweaver, and the display mode (as opposed to code mode)
has *always* been deficient for any non-trivial page.)

2. Nobody (except you) is going to view your page in Expression Web;
they'll be using FF or IE or Safari, or maybe even Lynx, but the last
program you have to worry about your site "looking good" in is
Expression Web.

3. No matter how wonderful it may be, whatever rendering engine
Expression Web uses, it's going to produce different results from *some*
of the actual browsers out there, so you might as well trust what the
atual browsers show you, rather than Expression Web.

4. It's not too hard to use ALT-TAB plus F5 to swap windows to a browser
and refresh the display.

IOW: Don't worry about the display in your editor, test in the UAs.

[rest snipped]

 

[rf]

Hmmm. That'll help the physically challenged.

and maybe animation just to keep up to date.

Animation?

Back in the days when we were all hovering in caves and sometimes venturing
bravely out to catch a rabbit for dinner animation was important. Anything
at all that was animated, or moved, was important.

If something moved (other than the rabbit one had ones eye on) one simply
*had* to look at it. It just might be a Tiger out looking for its own
dinner.

In these days of fast food joints and web pages animation is no longer so
important. However we all still have built into our genes the Tiger
syndrome: if it moves look at it. We might just have to start running very
quickly to somewhere else[1].

Try this out for yourself. Have your friend wait around demurely for a
random number of hours and then suddenly wave a tennis racquet furiously
about. No matter else what you are doing you *will* look at that tennis
racquet, if only to confirm that there are no tennis balls proceeding
rapidly in your direction.

Translate that to the web and remember, if it moves it must be looked at.

If you are happily reading the content of a web page when something in the
bottom right hand corner of that web page startlingly moves. You will look
at it.

Ah, now, where was I up to in my reading of that content? Oh yes, here.
<move> <look> Damn there is that Tiger again.



Moving stuff on a web page totally distracts your viewers attention from the
important bit, the content.

Just look at any site made in China. Everything moves. There is no content.
Because everything is moving nobody would look at any content, so it does
not need to be there.


[1] Two blokes are having a swim in the creek when they spot a Tiger
lurking. Bloke 1 bolts while bloke 2 carefully puts on his running shoes.
Bloke 1 calls back: "Mate, running shoes will not enable you to out-run a
Tiger". Bloke 2 replies "I don't have to out-run a Tiger. I only have to
out-run you".

 

[Adrienne Boswell]

Since it looks good on the web page the
problem has to be with Expression Web, but I can not see what CSS is
used to set the position of the graphics.

In addition to what others have said, Expression Web's rendering engine
would be IE because it is a Microsoft product. Think about that for a
moment - IE has the worst reputation for rendering CSS correctly.

 

[Jonathan N. Little]

In addition to what others have said, Expression Web's rendering engine
would be IE because it is a Microsoft product. Think about that for a
moment - IE has the worst reputation for rendering CSS correctly.

Slightly better than WebTV ;-)

 

[Bergamot]

With plain text editor you have no way to see the immediate changes, you
have to switch between the editor and the browser.

So what? It is to your benefit to view the changes in multiple browsers
anyway, since they do not all necessarily give the same results. I
thought you already learned that, the hard way. Relying on the so-called
WYSIWYG view in Expression Web is a serious mistake.

One I get this down I will embark on a more complicated site using drop
down menus and maybe animation just to keep up to date.

Ah yes, gratuitous animation and user-unfriendly drop-down menus are
just what every site needs. :-\

Don't do these things just because you can or because other sites use
them, do them because they make sense for *your* site and are something
*your* users want.

 

[DLU]

So what? It is to your benefit to view the changes in multiple browsers
anyway, since they do not all necessarily give the same results. I
thought you already learned that, the hard way. Relying on the so-called
WYSIWYG view in Expression Web is a serious mistake.

I am aware of this and I do look at the display in the different browsers.

I open IE and Firefox to start and look at the results. Then if
everything seems to be OK I try Opera, Sea Monkey, and Netscape 7.2.
If no one complains then I let it go. So far, the viewers are not as
sophisticated as the people on this NG, so most of them probably do not
have any understanding of web site design. There are some who are very
good at publishing however. Look at:
http://www.desertreport.org/
for instance.

Ah yes, gratuitous animation and user-unfriendly drop-down menus are
just what every site needs. :-\

Who knows what the future will bring. If my users want rattle snakes
slithering across the screen, that is what they will get. Most likely
though would be some sort of view, of some environmental destruction
going on, like an OHV tearing up a meadow or such.

Don't do these things just because you can or because other sites use
them, do them because they make sense for *your* site and are something
*your* users want.

Well they, if at all, are in the future.
It remains to be seen just what the committee wants on their site. I
was the committee secretary or five years and may run again for office,
or I may work at the national level. I am the chair of a standing
committee at present. If any of you are club members you will see my
name on the leadership site.

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

 

[DLU]

In addition to what others have said, Expression Web's rendering engine
would be IE because it is a Microsoft product. Think about that for a
moment - IE has the worst reputation for rendering CSS correctly.

Yes that is exactly the problem, so in most cases, what it looks like in
Expression Web, which is just an upgrade of Front Page, is what it
usually looks like in IE. Fortunately Firefox is much more forgiving.
Unfortunately IE is the browser of choice for about 80% of those on
line. The judge who heard the anti-trust suit against microsquish did
not have a clue as to how programs are constructed. MS tole the court
that they had to "integrate" the browse into windoze in order to make it
run properly. The attorneys for the Justice Department did not have
enough knowledge to challenge this, or maybe did not want to. No one
suggested in court that IE was really a separate program activated by a
call to a sub routine. MS got away with giving away a program in order
to drive a competitor out of business. A clear violation of anti-trust law.


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

 

[dorayme]

Look at:
http://www.desertreport.org/
for instance.

It is a rare thing to have an animation that is quite as nice as this.
What authors usually do, including this example, is make a big gaffe.
There is something about animation that clouds the human brain. I am
talking about the author brain:

Here is a nice sensitive, cute animation. What does the author do? He
repeats the thing and it becomes highly irritating! Never even occurred
to him or her that it is his or her job to do something good about the
looping. The good thing to do here is to have no looping. It is overkill.

 

[Neredbojias]

[1] Two blokes are having a swim in the creek when they spot a Tiger
lurking. Bloke 1 bolts while bloke 2 carefully puts on his running
shoes. Bloke 1 calls back: "Mate, running shoes will not enable you
to out-run a Tiger". Bloke 2 replies "I don't have to out-run a
Tiger. I only have to out-run you".

<g>I'm glad you didn't say "Two friends..."</g>