Firefox and IE do not display the same.

[Dave Kelly]

I am in over my head and not sure where to read for help. I maintain a
web site. One of the pages displays as I want it in linux Foxfire but
not in XP IE.

http://www.texasflyfishers.org/misc.htm

In Firefox:

header across the top
column down each side
text label in the middle
table in the middle
footer across the bottom

In IE:

header across the top
column down each side
text label in the middle - large size taking 2 lines
table aligning with bottom of longest column
footer across the bottom

The associated CSS sheet is viewable at:

http://www.texasflyfishers.org/misc.css


I have run 'misc.htm' through W3 and it validates.

I have run 'misc.css' through W3 and it validates but get 18 warnings.

I don't have an XP machine, I have to goto the neighbors and use hers
to test.

What do I need to do to get that page to display the same as firefox?

TIA
Dave

 

[BootNic]

[email protected]
I am in over my head and not sure where to read for help. I
maintain a web site. One of the pages displays as I want it in linux
Foxfire but not in XP IE.

http://www.texasflyfishers.org/misc.htm

In Firefox:

header across the top
column down each side
text label in the middle
table in the middle
footer across the bottom

In IE:

header across the top
column down each side
text label in the middle - large size taking 2 lines
table aligning with bottom of longest column
footer across the bottom

The associated CSS sheet is viewable at:

http://www.texasflyfishers.org/misc.css


I have run 'misc.htm' through W3 and it validates.

I have run 'misc.css' through W3 and it validates but get 18
warnings.

I don't have an XP machine, I have to goto the neighbors and use hers
to test.

What do I need to do to get that page to display the same as
firefox?

TIA
Dave

IE 3px gap
http://www.positioniseverything.net/explorer/threepxtest.html

<!--[if gte IE 5.5 & lte IE 6]>
<style type="text/css">
table {
margin:0 -3px 0 -3px;
</style>
<![endif]-->

I don't see any good reason for the width=100% on the table, suggest
it be removed.

The links on the side jump about on hover, unless that is a feature,
give the links a bottom border the same color as the background to
prevent that.

--
BootNic Thursday, November 02, 2006 2:11 PM

Happiness for the average person may be said to flow largely from
common sense - adapting one-self to circumstances - and a sense of
humor.
*Beatrice Lillie (1898-1989) English comedienne*

 

[Dave Kelly]

IE 3px gap
http://www.positioniseverything.net/explorer/threepxtest.html

<!--[if gte IE 5.5 & lte IE 6]>
<style type="text/css">
table {
margin:0 -3px 0 -3px;
</style>
<![endif]-->

Just to clarify...........
This goes inside the wrapper that contains the table and right after
this line:
<table border="1" cellspacing="1" >

I put it there and it works.

Thanks for your help.
Dave

 

[BootNic]

[email protected]

IE 3px gap
http://www.positioniseverything.net/explorer/threepxtest.html

<!--[if gte IE 5.5 & lte IE 6]>
<style type="text/css">
table {
margin:0 -3px 0 -3px;
</style>
<![endif]-->

Just to clarify...........
This goes inside the wrapper that contains the table and right after
this line:
<table border="1" cellspacing="1" >

I put it there and it works.

Make it an external style sheet, wrap the link in the conditional
statement, add it to the head after your other external style sheet.
....
<link href="misc.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5.5 & lte IE 6]>
<link rel="stylesheet" href="" type="text/css" />
<![endif]-->

 

[Beauregard T. Shagnasty]

I am in over my head and not sure where to read for help. I maintain a
web site. One of the pages displays as I want it in linux Foxfire but
not in XP IE.

http://www.texasflyfishers.org/misc.htm

The page looks nearly the same to me in Firefox and IE6, given a
sufficiently wide browser window. Narrowing to around 750px it starts to
fall apart. Why not study this template for some better ideas on sizing
and positioning? Let it float.
http://benmeadowcroft.com/webdev/csstemplates/3-column.html

Some other comments:

a. Your footer links/text is 70% of 0.8em, definitely in
the micro-flyspeck range. I can't come close to reading it.
And the links disappear when hovered.
b. Helvetica is not a standard Windows font; you need to specify
font-family: Helvetica, Arial, sans-serif;
I use "Trebuchet MS", Helvetica, Arial, sans-serif;
c. font:normal 0.8em/1.2em verdana,aria,sans-serif;
1. "aria" is misspelled.
2. Verdana? http://k75s.home.att.net/fontsize.html#verdana
3. the 1.2em line-height causes text overlap in narrow windows
and the height itself is normally never needed.
4. use 100% for everything except headings and footers, see
my fontsize page
d. Stop thinking of precise pixel positioning, it's a lost cause.
e. The hover effect in the two columns is not pleasant.

 

[dorayme]

[email protected]

IE 3px gap
http://www.positioniseverything.net/explorer/threepxtest.html

<!--[if gte IE 5.5 & lte IE 6]>
<style type="text/css">
table {
margin:0 -3px 0 -3px;
</style>
<![endif]-->

Just to clarify...........
This goes inside the wrapper that contains the table and right after
this line:
<table border="1" cellspacing="1" >

I put it there and it works.

Make it an external style sheet, wrap the link in the conditional
statement, add it to the head after your other external style sheet.
...
<link href="misc.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5.5 & lte IE 6]>
<link rel="stylesheet" href="" type="text/css" />
<![endif]-->[/QUOTE]

If it is the only thing for IE eyes only, probably as well to
just stick it at the bottom of the regular stye sheet, no?

 

[BootNic]

news: (e-mail address removed)

[email protected]
BootNic wrote:

IE 3px gap
http://www.positioniseverything.net/explorer/threepxtest.html

<!--[if gte IE 5.5 & lte IE 6]>
<style type="text/css">
table {
margin:0 -3px 0 -3px;
</style>
<![endif]-->

Just to clarify...........
This goes inside the wrapper that contains the table and right after
this line:
<table border="1" cellspacing="1" >

I put it there and it works.

Make it an external style sheet, wrap the link in the conditional
statement, add it to the head after your other external style sheet.
...
<link href="misc.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5.5 & lte IE 6]>
<link rel="stylesheet" href="" type="text/css" />
<![endif]-->

If it is the only thing for IE eyes only, probably as well to
just stick it at the bottom of the regular stye sheet, no?[/QUOTE]

Conditional comments don't work inside the stylesheet. However it
does make for a good laugh if one is trying to write a bit a javascript
and cant figure out why IE is thronging object expected error.

--
BootNic Thursday, November 02, 2006 7:03 PM

People grow through experience if they meet life honestly and
courageously. This is how character is built.
*Eleanor Roosevelt*

 

[dorayme]

If it is the only thing for IE eyes only, probably as well to
just stick it at the bottom of the regular stye sheet, no?

Conditional comments don't work inside the stylesheet.[/QUOTE]

oops...

<g>

I stick the * html style "for IE eyes only" ones into same css.
Now and then, I have used /* Hides from IE5-mac \*/ when I want
to stop IE Mac from seeing stuff. And did once use the
conditional but via reference in head.

I think this was discussed once: a very special doctype that
threw every new browser from now on into singing from exactly the
same songsheet. Would save us all having to mess about. But
hardly likely to come about for now.

 

[Dave Kelly]

text label in the middle - large size taking 2 lines

I found that this problem was caused by screen resolution on different
computers.

Can something like this be coded to where a resolution of 1280x1024
will have a <h1> size text and a 1024x768 would have a <h2> size text?

 

[Beauregard T. Shagnasty]

I found that this problem was caused by screen resolution on
different computers.

Your next hundred visitors could have fifty different combinations of
screen resolution, DPI, browser window size...

Can something like this be coded to where a resolution of 1280x1024
will have a <h1> size text and a 1024x768 would have a <h2> size
text?

Mine is 1152x864. What will you do for me? What if I had a nice 24"
wide screen monitor? But my browser window was 855 pixels wide over at
the left edge of the display?

What is an "<h1> size"? An "<h2> size"? These could also vary
considerably between my computer/browser and yours.

You need to stop thinking about pixels. <g>
http://allmyfaqs.net/faq.pl?AnySizeDesign