IE, Firefox conflict.

[DLU]

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.

Nothing to do with screen resolutions. The only tests I was talking
about were at your fingertips, text size and browser size. If you want
help on how to operate these controls on your browser, please ask. Name
the browser and I will try to help.
[/QUOTE]
Yes, when I zoom in the text wraps.
I lost the post where you suggested the change to "masthead", I have the
CSS set for 100%. I am using Firefox, so what controls do you mean?
There are only two setting for text zoom, but browser zoom can get
pretty big.

The gray boxes get smaller, the pictures get larger, the heading gets
larger and the heading text has to wrap. It is not proportional, so
something in the CSS needs to be adjusted.



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

 

[dorayme]

Nothing to do with screen resolutions. The only tests I was talking
about were at your fingertips, text size and browser size. If you want
help on how to operate these controls on your browser, please ask. Name
the browser and I will try to help.

Yes, when I zoom in the text wraps.
... I am using Firefox, so what controls do you mean?[/QUOTE]


I am talking about just when the text size goes up. And you do not
mention about browser size so I am not sure if you think somehow browser
size is fixed at screen size? You can change a browser size in Mac by
grabbing the bottom right corner and resizing it. You can do the same on
Windows only if you click a button on top right that stops it being full
screen.

Operating window browser size can be instructive as it gives you an idea
what things might look like to other people with different room or
preferences for such size.

 

[DLU]

Yes, when I zoom in the text wraps.
... I am using Firefox, so what controls do you mean?

I am talking about just when the text size goes up. And you do not
mention about browser size so I am not sure if you think somehow browser
size is fixed at screen size? You can change a browser size in Mac by
grabbing the bottom right corner and resizing it. You can do the same on
Windows only if you click a button on top right that stops it being full
screen.

Operating window browser size can be instructive as it gives you an idea
what things might look like to other people with different room or
preferences for such size.
[/QUOTE]
No you can size the browser on windoze also by
putting the cursor on the frame and changing it by height or width.
Most of the screen resizes proportionally but the header does not.

What was you recommendation again? As I sad, the CSS is set at 100% for
width.

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

 

[Patricia Aldoraz]

My website does not show the same in IE as in Firefox.
the validation does not show any errors, but the heading is much wider
in IE, and the center column does not line up with the other columns.

How can I fix this.  Lars did the majority of fixing the original coding
for me and I normally do not use IE so did not realize how screwed up it
looks in IE.  I must have changed something, or left something out.

Web page at:http://home.surewest.net/bikesac/bikesac/

Looks fine in IE? The only thing I can see is the middle of the
heading text looking strange when I make the window narrow so I can
see other things on the screen at the same time.

 

[DLU]

Looks fine in IE? The only thing I can see is the middle of the
heading text looking strange when I make the window narrow so I can
see other things on the screen at the same time.

Been working on it for a couple of days now. The left column was too
wide and it was preventing the middle column from lining up with the
other two. I made the class to set at 49% and that worked.

I am not sure about the heading text, it wraps but I do not see a way
around that. It worked OK in Firefox but I had to make them compatible.
Too bad I can not give thanks for the end of IE. I do not know why any
uses it,but then they also use Outleak for email also.
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************

 

[Sherm Pendley]

Nothing to do with screen resolutions. The only tests I was talking
about were at your fingertips, text size and browser size. If you want
help on how to operate these controls on your browser, please ask. Name
the browser and I will try to help.

The developer toolbar for FireFox has a nice "resize" feature that will
resize the browser window to simulate going full-screen at a variety of
resolutions.

sherm--

 

[Bergamot]

on the gray boxes are excessive at larger text sizes.
If you want these elements to scale better, use margins
instead, and use % values instead of em. Those of use who
use large default text sizes and/or smaller windows will appreciate it.

I am not sure where to start with this. If it calls for 2em, what %
should I put in its place, also does pix work better?

Start with 2% and 4% and go from there.

 

[Bergamot]

Been working on it for a couple of days now. The left column was too
wide and it was preventing the middle column from lining up with the
other two. I made the class to set at 49% and that worked.

I haven't paid much attention to the code's progression, but it now
looks quite the hacked up mess of superfluous divs, spans and class
selectors. You should strip it down and start fresh. Much of it looks
unnecessarily complicated.

And why, oh why, are image dimensions in the stylesheet instead of using
size attributes in the <img> elements? Image width and height attributes
are not deprecated, and putting them in the HTML prevents the page from
jumping around while it loads.

I am not sure about the heading text, it wraps but I do not see a way
around that.

It has to wrap when there isn't enough horizontal space for everything.
The alternative is keep it on 1 line and suffer with horizontal scrolling.

It looks like you want the image vertically centered with the text. You
can do that with an inline image, but then text can wrap under it like
it does now. If you want the text to stay clear of the image on the left
side, you'll have to do something else, such as float the image left,
but then you'll lose the vertical centering. You can do some complicated
positioning but it's really not worth the trouble. What's most important
to you, regarding those particular visuals?

 

[DLU]

I haven't paid much attention to the code's progression, but it now
looks quite the hacked up mess of superfluous divs, spans and class
selectors. You should strip it down and start fresh. Much of it looks
unnecessarily complicated.

Using the div helps me keep it in sections that I can modify without
affection other sections.
The spans are there in order to change the appearance of the text that
is connected to it. If I try to use use a different markup the markup
does not like it, I get errors such as you can not use ul with div or
something like that.

And why, oh why, are image dimensions in the stylesheet instead of using
size attributes in the <img> elements? Image width and height attributes
are not deprecated, and putting them in the HTML prevents the page from
jumping around while it loads.

As I said before, Nels reworked the majority of the original code for
me. Much of it was in table form and was hell to try and modify.
The images were not thumbnails and took a long time to load even on DSL.
It seems to work fast now, does not show any errors when verified and I
can make modifications easily. For instance if I want to add a new box,
I can make a new div, use the CSS that works for that box and then put
in the hrefs that are needed.

It has to wrap when there isn't enough horizontal space for everything.
The alternative is keep it on 1 line and suffer with horizontal scrolling.

It looks like you want the image vertically centered with the text. You
can do that with an inline image, but then text can wrap under it like
it does now. If you want the text to stay clear of the image on the left
side, you'll have to do something else, such as float the image left,
but then you'll lose the vertical centering. You can do some complicated
positioning but it's really not worth the trouble. What's most important
to you, regarding those particular visuals?

What is important in the long run is that the users find it easy to use
and like it. It is also important that I be able to add and subtract
various components easily and do not have to spend a lot of time doing so.
This has been a learning situation and i am still upgrading. When I was
working with code, you wold make a mistake and get into an endless loop,
or have really weird outcomes, then you had to go line by line to decode
it. With HTML it seems to work even with some pretty bad errors.

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

 

[dorayme]

The developer toolbar for FireFox has a nice "resize" feature that will
resize the browser window to simulate going full-screen at a variety of
resolutions.

You can save screen size settings in that program too... so as to be
able to customise and quickly use over and over.

In case you are not sure what this indicates, it is like this: suppose
you have another computer or someone else has one that you wish to see
your website on but that it is not within reach right now. But you know
it is a 17" monitor or a 19" monitor. Just this knowledge, however, is
not sufficient.

You need to know or at least to guess the resolution of that monitor.
Meaning simply how many pixels it uses across and up and down. The more
pixels it uses, the finer the resolution, the smaller and more detailed
everything is. If you know the resolution, then you can simulate it on a
screen with the same or bigger (but not smaller) resolution by adjusting
the browser window smaller to encompass just the number of pixels that
the other machine would encompass at full screen.

 

[dorayme]

Been working on it for a couple of days now. The left column was too
wide and it was preventing the middle column from lining up with the
other two. I made the class to set at 49% and that worked.

I am not sure about the heading text, it wraps but I do not see a way
around that.

I did suggest something to you? Was it not suitable?

 

[DLU]

I did suggest something to you? Was it not suitable?

I had it on the newsgroup and did not get round to putting it in as I
was just trying to get the page to come up right in IE.
I was going to work with it next.
I must have marked the NG post as read because I can not find it again.
That is why I said to repeat it, so I can try it.

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

 

[dorayme]

I had it on the newsgroup and did not get round to putting it in as I
was just trying to get the page to come up right in IE.
I was going to work with it next.
I must have marked the NG post as read because I can not find it again.
That is why I said to repeat it, so I can try it.

My newsreader is an online one. So I have lost it too. If I want to find
things from threads I use Google Groups as often as not. You can too.

 

[DLU]

- Hide quoted text -
- Show quoted text -

> I found it.
> <!-- The left column starts here-->
> <div class="l" style="width: 49%; height: 1651px">
> <div class="lhead">
> <h2>California</h2>
> The width at 50% was keeping the center column from the space and
> causing it to show below the bottom of the left column.
> It did not seem to make a difference with Firefox, but IE could not

adjust.

Yes, IE6, at least, calculates width a bit differently and floats can
easily drop...

Btw, you might add a min-width to body, say of 700px; to stop a few ugly
things happening at larger fonts. And your banner does not look good
with user text large when the "California Nevada Regional Conservation
Committee" wraps, some of it to far left.

Consider playing with instead:

<div class="masthead">

<div style="float: left;"><a href="http://www.sierraclub.org/" etc
....><img src="images/weblogo_fall2002.gif" id="logo" alt="Sierra
Club"></a></div>

<div class="search">
<form etc...
</form>
</div>

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

(move my inline style out to your sheet...)

Found it in groups.google.com

I though I was trying to get away from inline style.
Should not I put this in the CSS?
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************

 

[dorayme]

(move my inline style out to your sheet...)

Found it in groups.google.com

I though I was trying to get away from inline style.
Should not I put this in the CSS?

"move my inline style out to your sheet" means "class or ID the element
and put the style in the CSS in the head or in the external linked style
sheet"

 

[DLU]

"move my inline style out to your sheet" means "class or ID the element
and put the style in the CSS in the head or in the external linked style
sheet"

I have tried every trick I could think of. When you make the browser
window smaller, the text indexes left under the logo. I can make it
center under the other text bu do not seem to be able to make it line up
so the first letter is under the first line first letter.

(example):
(logo) California Nevada Conservation Committee

or: (When smaller size)
(logo) California Nevada Conservation
Committee

or:
(logo) California Nevada Conservation
Committee

But not:
(logo) California Nevada conservation
Committee

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

 

[Bergamot]

I have tried every trick I could think of. When you make the browser
window smaller, the text indexes left under the logo. I can make it
center under the other text bu do not seem to be able to make it line up
so the first letter is under the first line first letter.

(logo) California Nevada conservation
Committee

Float the image left.

 

[Bergamot]

Using the div helps me keep it in sections that I can modify without
affection other sections.
The spans are there in order to change the appearance of the text that
is connected to it.

Your divs and class selectors are out of control. There is absolutely
*no* need for this clutter:
<div class="lhead">
<h2>California</h2>
</div>

That div container is completely unnecessary. Ditto markup like this:
<ul class="nav">
<li class="link"> <-- unnecessary class
- or -
<ul class="boxed"> <-- unnecessary class
<li class="b"> <-- unnecessary class

It's just bloat. The page is loaded with excess junk that will only make
maintenance harder, not easier. You've also got lists marked up as
paragraphs, as in that first box, presumably because you don't want
bullet markers on them. It's still a list and should be marked up as such.

As I said before, Nels reworked the majority of the original code for
me. Much of it was in table form and was hell to try and modify.

The former table markup is irrelevant to this particular issue.

The images were not thumbnails and took a long time to load even on DSL.

The reason for that is no doubt because you were using full size images
and just changed the dimensions in the HTML. A 3MB jpg doesn't become a
smaller download just because you told the HTML it was 180x135 instead
of 1600x1200 (or whatever).

It seems to work fast now,

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.

does not show any errors when verified and I
can make modifications easily.

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.

For instance if I want to add a new box,
I can make a new div, use the CSS that works for that box and then put
in the hrefs that are needed.

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?

 

[Jonathan N. Little]

I have tried every trick I could think of. When you make the browser
window smaller, the text indexes left under the logo. I can make it
center under the other text bu do not seem to be able to make it line up
so the first letter is under the first line first letter.

(example):
(logo) California Nevada Conservation Committee

or: (When smaller size)
(logo) California Nevada Conservation
Committee

or:
(logo) California Nevada Conservation
Committee

But not:
(logo) California Nevada conservation
Committee

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>template</title>

<style type="text/css">
body {
margin: 0; padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.masthead {
color: white; background-color: #9CB3BE; min-height: 75px;
}
.masthead img {
position: absolute; top: 10px; left: 25px;
}
.masthead form {
position: absolute; top: 10px; right: 25px; width: 125px;
}
.masthead label{
display: block; color: #669; font-size: .8em; font-weight: bold;
}
.masthead h1 {
margin: 0 175px; padding: .5em 0; font-size: 150%;
}
.band { color: white; background-color: #669; }
</style>
</head>
<body>

<div class="masthead">
<img
src="http://home.surewest.net/bikesac/bikesac/images/weblogo_fall2002.gif"
width="125" height="58" alt="Sierra Club Logo">
<h1>California Nevada Regional Conservation Committee</h1>
<form action="http://www.sierraclub.org/advsearch.asp" method="post">
<div>
<input name="wheretosearch" value="d:\www\extranet\ca\cnrcc"
type="hidden">
<label for="search">search</label>
<input id="search" name="SearchString" type="text" size="8">
<input type="submit" value="go">
</div>
</form>
</div>
<div class="band">Explore, Enjoy and Protect the Planet</div>

</body>
</html>

 

[dorayme]

I have tried every trick I could think of. When you make the browser
window smaller, the text indexes left under the logo. I can make it
center under the other text bu do not seem to be able to make it line up
so the first letter is under the first line first letter.

(example):
(logo) California Nevada Conservation Committee

or: (When smaller size)
(logo) California Nevada Conservation
Committee

or:
(logo) California Nevada Conservation
Committee

But not:
(logo) California Nevada conservation
Committee

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