FF2 & IE6 rendering differences

Good morning from Wisconsin,

FWIW, I am so tired of creating standards-compliant sites in FF2 to have
them break in IE6, then fixing them to work in IE6 only to have them break
in FF2. Very frustrating.

The site in question looks almost as it should in FF2 but has a ways to go
yet in IE6. There is a wider-than-necessary gap between #mainbody and
#affiliations in FF2, and has whitespace gaps below #specials, #options,
#mainbody and #affiliations in IE6. As this will probably be an ongoing
issue in future sites not just for us but others, is there a visual CSS
validator for IE6 like Aardvark in FF2?

Also, I love .pngs for my mouseovers because of their smooth transparency
and have used pngswap.js from
http://homepage.ntlworld.com/bobosola/png_mouseover.htm for a few years but
don't like that I have to include pngswap.js in the html head. What do all
of you use for transparent mouseovers? (FYI, I was testing .gif
mouseovers in the test link above and quickly remembered why I like .pngs.)

Thank you in advance,
--
Isaac Grover, Owner
Quality Computer Services of River Falls, Wisconsin
Web: http://www.qcs-rf.com

Re: FF2 & IE6 rendering differences

Isaac Grover wrote:
> Good morning from Wisconsin,
>
> FWIW, I am so tired of creating standards-compliant sites in FF2 to have
> them break in IE6, then fixing them to work in IE6 only to have them break
> in FF2. Very frustrating.

Pisser ain't it! Well the problems with IE not FF. My advice is design
for compliant browsers and tweak just enough so that MSIE6 "works"
enough to be usable. Since MSIE is really an OS component as peter out so will the so will MSIE5, 5.5, and 6!

>
> The site in question looks almost as it should in FF2 but has a ways to go
> yet in IE6.

Which site? You've made your first boo-boo by complaining to Usenet with
some vague problem yet you supply no link to the page in question.
Tisk-tisk!

> There is a wider-than-necessary gap between #mainbody and
> #affiliations in FF2, and has whitespace gaps below #specials, #options,
> #mainbody and #affiliations in IE6. As this will probably be an ongoing
> issue in future sites not just for us but others,

Maybe, because they may also make the same error that you *may* have
made...who knows because we cannot see what you have done.

I can guess that your problems may be self-inflicted. Common errors are
designing in ways that trigger quirks mode, scaling in pixels for text
related elements, over use of positioning especially absolute, just to
name a few.

> is there a visual CSS
> validator for IE6 like Aardvark in FF2?

Don't know. THE validator independent of any browser is at

http://jigsaw.w3.org/css-validator/

Not sure what IE-CSS "validation" would mean.

>
> Also, I love .pngs for my mouseovers because of their smooth transparency
> and have used pngswap.js from
> http://homepage.ntlworld.com/bobosola/png_mouseover.htm

Hope you did not use this site for reference on how one should code a
site. It seems to hit all my examples of the most common mistakes folks
make... one most telling snippet!

body{
background : White url("bg.gif") repeat-y;
font-size : 76%;
font-family : Verdana, Arial, Helvetica, sans-serif;
padding : 10px 0 0 30px;
}

> for a few years but
> don't like that I have to include pngswap.js in the html head. What do all
> of you use for transparent mouseovers? (FYI, I was testing .gif
> mouseovers in the test link above and quickly remembered why I like .pngs.)

Use text?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: FF2 & IE6 rendering differences

Well bust mah britches and call me cheeky, on Thu, 27 Sep 2007 13:28:35
GMT Isaac Grover scribed:

> Good morning from Wisconsin,
>
> FWIW, I am so tired of creating standards-compliant sites in FF2 to
> have them break in IE6, then fixing them to work in IE6 only to have
> them break in FF2. Very frustrating.

It shouldn't be. You shouldn't have that problem at all and wouldn't have
it if you used your head. Hint: conditional comments.

> Also, I love .pngs for my mouseovers because of their smooth
> transparency and have used pngswap.js from
> http://homepage.ntlworld.com/bobosola/png_mouseover.htm for a few
> years but don't like that I have to include pngswap.js in the html
> head. What do all of you use for transparent mouseovers? (FYI, I
> was testing .gif mouseovers in the test link above and quickly
> remembered why I like .pngs.)

Generally, on the few occasions I still use mouseovers of any kind, I apply
the css "hover" rule. There are some anomalies with this in ie6, but,
again, conditional comments can help.

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: FF2 & IE6 rendering differences

"Jonathan N. Little" wrote in
news:c5b19$46fbb8f5$40cba7c7$6313@NAXS.COM:
> Isaac Grover wrote:
>>
>> The site in question looks almost as it should in FF2 but has a ways
>> to go yet in IE6.
>
> Which site? You've made your first boo-boo by complaining to Usenet
> with some vague problem yet you supply no link to the page in
> question. Tisk-tisk!

Ah, brainfart. Here's the layout in question:

http://www.qcs-rf.com/boldts/template.html

--
Isaac Grover, Owner
Quality Computer Services of River Falls, Wisconsin
Web: http://www.qcs-rf.com

Re: FF2 & IE6 rendering differences

In article ,
Isaac Grover wrote:

> http://www.qcs-rf.com/boldts/template.html

in Safari 2, the text in the footer at the bottom:

Website design by Quality Computer Services.

is cut off, 10 to 15% of the bottom of the text missing...

First thing I do when anything like that happens in Safari 9 it
is not that forgiving!) is check the validation on both html and
css. Yours has errors.

There is no doctype, you should put one on, preferably 4.01
Strict.

You can't do

clear: top

....though I kinda understand your thinking here
it is left, right or both. If unsure, use last.

There are more "poor practice" things in your code (fonts in
pixels, over specifying dimensions in pixels...) than you can
point a soldering iron at... but never mind for now... I would at
least remove

height: 50px;

from your footer css.

You really don't need to specify so much, let the sizes of the
elements take more of their cues from the natural content.

--
dorayme