IE, Firefox conflict.

[DLU]

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/

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

 

[Irina Rempt]

My website does not show the same in IE as in Firefox.

This is absolutely normal.

I must have changed something, or left something out.

No, it's not your fault that IE sucks.

Irina

 

[dorayme]

My website does not show the same in IE as in Firefox.

IE which version?

 

[dorayme]

I must have changed something, or left something out.

No, it's not your fault that IE sucks.[/QUOTE]

Whose fault is the odd character in the CSS before the HTML selector:

i>>?

?

What about the general oddness of the header when the text size is big
and the window not too wide when the header text "California Nevada
Regional Conservation Committee" wraps to the far left...?

What about not knowing which version of IE is the one meant?

Why am I so grumpy?

Irina, do you have any real answers to these deep questions?

<g>

 

[Bergamot]

My website does not show the same in IE as in Firefox.
http://home.surewest.net/bikesac/bikesac/

What specifically is not "the same"?

BTW, those side white borders (pretending to be margins) 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.

You should also drop the bogus inline styles. The reason for
style="height: 20px" on one of the list items is a mystery.

 

[richard]

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/

Nice layout.

The only difference I saw in IE 7 was a much higher header.

 

[Jonathan N. Little]

No, it's not your fault that IE sucks.

Whose fault is the odd character in the CSS before the HTML selector:

i>>?

? [/QUOTE]

http://unicode.org/faq/utf_bom.html
FAQ - UTF-8, UTF-16, UTF-32 & BOM

http://wiki.mybboard.net/index.php/Help:UTF_BOM_Mark
Help:UTF BOM Mark - MyBB Wiki

http://en.wikipedia.org/wiki/Byte-order_mark
Byte-order mark - Wikipedia, the free encyclopedia

 

[Sherm Pendley]

My website does not show the same in IE as in Firefox.
the validation does not show any errors

The CSS validator shows one:

<http://jigsaw.w3.org/css-validator/...uri=http://home.surewest.net/bikesac/bikesac/>

Dunno if that's the cause of the problem, but it's worth fixing, and
easy - it's just a transposed "/*" at the beginning of a comment.

sherm--

 

[DLU]

What specifically is not "the same"?

BTW, those side white borders (pretending to be margins) 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.

You should also drop the bogus inline styles. The reason for
style="height: 20px" on one of the list items is a mystery.

I am not sure what borders, it looks to me like the gray boxes are
centered in the middle of a column. I will have to look for the inline
you are referring to. The styles should refer to a CSS.

I will see how I can fix the em values. Lars did a great deal of the
original fix for me and I really owe him for it. I am still learning how
the damned thing works.

The boxes were originally in table form.

The public page is at:
http://clubhouse.sierraclub.org/ca/cnrcc/
The access information is on the login page, easy to decipher.
main reason for the login is to keep web crawlers out.
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************

 

[DLU]

IE which version?

IE 7.

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

 

[DLU]

Nice layout.

The only difference I saw in IE 7 was a much higher header.

I have the high header in IE7, and the center column does not line up
with the others when I look at it.

I am somewhat mystified the the right hand column is formatted first
instead of from left to right.

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

 

[Jonathan N. Little]

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/

take:

<h1 style="width: 971px;">

and make it

<h1>

Your use of inline styles is biting you in the butt.

Also you have a bad comment in your stylesheet

*/ Adjust lists in boxes here. Do NOT try to adjust padding of the
boxes as that will break corners. list-style-position: outside means
the bullets show up to the left of all text. inside would make text
wrap under the bullets. */

should be

/* Adjust lists in boxes here. Do NOT try to adjust padding of the
boxes as that will break corners. list-style-position: outside means
the bullets show up to the left of all text. inside would make text
wrap under the bullets. */

 

[Raymond SCHMIT]

Nice layout.

The only difference I saw in IE 7 was a much higher header.

The most ennoying that i have with my IE.7 is that
the "CNRCC Committees" is aligned with the "California State & Federal
Parks" making the page "not niced layout"
instead of aligned with the "California"(using SeaMonkey)

 

[Bergamot]

I am not sure what borders, it looks to me like the gray boxes are
centered in the middle of a column.

That's what it may look like to you. Try zooming text up a couple
notches and you'll see things don't necessarily align like you thought.
The green headings are *not* centered over the boxes.
http://www.bergamotus.ws/screenshots/bikesac.png

One of those "centering" selectors in your CSS:
..rinbox {
background-color: #CCC;
text-align: left;
border-width: 5px 4em 0 2em; /* Adjust box size by changing border size
The border size are clockwise from top. */
border-style: solid;
border-color: white;
padding-bottom: 9px; /* This makes rounded corners work, see above */
font-weight: bold;
}

There are other selectors that use 2em/4em margins instead of borders,
but neither should be set in em units - % units would make much better
use of the available canvas space. It would spread things out more in
larger windows and shrink them up when space is not so abundant.

I will have to look for the inline
you are referring to. The styles should refer to a CSS.

The screenshot above shows the effect of one of those inline styles. It
obviously shouldn't be there, but you may not have noticed it before now.

 

[DLU]

The most ennoying that i have with my IE.7 is that
the "CNRCC Committees" is aligned with the "California State & Federal
Parks" making the page "not niced layout"
instead of aligned with the "California"(using SeaMonkey)

Yes, I am trying to figure out how to fix that. I can not get the
column to start at the top of the page.

Interesting thing is right hand column is marked up first, then left,
then center. It seems a little out of line to me.

I have three index files to play with.

I am still learning the process. I still have not rally figured how the
columns get in place in the first place.
--
***************************************
* This is the Spammish Inquisition *
* Not Lumber Cartel Unit 75 [TINLC] *
* I am not SPEWS.ORG *
***************************************

 

[DLU]

That's what it may look like to you. Try zooming text up a couple
notches and you'll see things don't necessarily align like you thought.
The green headings are *not* centered over the boxes.
http://www.bergamotus.ws/screenshots/bikesac.png

One of those "centering" selectors in your CSS:
.rinbox {
background-color: #CCC;
text-align: left;
border-width: 5px 4em 0 2em; /* Adjust box size by changing border size
The border size are clockwise from top. */
border-style: solid;
border-color: white;
padding-bottom: 9px; /* This makes rounded corners work, see above */
font-weight: bold;
}

There are other selectors that use 2em/4em margins instead of borders,
but neither should be set in em units - % units would make much better
use of the available canvas space. It would spread things out more in
larger windows and shrink them up when space is not so abundant.


The screenshot above shows the effect of one of those inline styles. It
obviously shouldn't be there, but you may not have noticed it before now.

What % should I use, or do I need to experiment?

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

 

[DLU]

take:

<h1 style="width: 971px;">

and make it

<h1>

Your use of inline styles is biting you in the butt.

Also you have a bad comment in your stylesheet

*/ Adjust lists in boxes here. Do NOT try to adjust padding of the
boxes as that will break corners. list-style-position: outside means
the bullets show up to the left of all text. inside would make text
wrap under the bullets. */

should be

/* Adjust lists in boxes here. Do NOT try to adjust padding of the
boxes as that will break corners. list-style-position: outside means
the bullets show up to the left of all text. inside would make text
wrap under the bullets. */

The */ was causing some of the problems.
It keeps the comment from being a comment.

I tried playing with the <h1> and I do not seem to be able to get it to
work properly.

<h1> style="width:"</h1>
Does not seem to work.

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

 

[Bergamot]

What % should I use, or do I need to experiment?

Experiment with different window sizes.

 

[Bergamot]

<h1> style="width:"</h1>
Does not seem to work.

Get rid of the width altogether. You don't need it.

 

[Jonathan N. Little]

Get rid of the width altogether. You don't need it.

Exactly!