IE7 vs Firefox

[Mark B]

I am trying to figure out why Firefox displays a big blue rectangle at
www.factorwords.com whereas IE and Safari don't.

TIA

 

[Nathan Sokalski]

What version of each browser are you viewing it with? I tried looking at it
with IE8, and I saw the blue rectangle as well. When I did a view source,
the HTML for that area was:

<table border=".75px" cellpadding="3" cellspacing="0" bordercolor="#0080FF"
bgcolor="#CCE6FF" width="100%">

If you look at this HTML, you will notice that the table tag has the
following attribute:

bgcolor="#CCE6FF"

This is obviously what is causing the "big blue rectangle". I'm not sure why
it is being displayed by some browsers and not others, but the bgcolor
attribute is deprecated, and the page did have the XHTML DOCTYPE, so I would
suggest using CSS instead (as well as for some of the other attributes). I
haven't looked at it in anything other than IE8, but it is usually a good
idea to use CSS rather than HTML attributes for anything that you can,
especially attributes that are deprecated.

 

[Nathan Sokalski]

Sorry about that, the blue is actually coming from the attribute:

bordercolor="#0080FF"

But all three attributes:

border=".75px" bordercolor="#0080FF" bgcolor="#CCE6FF"

Should be converted to CSS (the width attribute is optional, but it would be
good practice to convert it).

 

[Nathan Sokalski]

Sorry, I also want to correct my original response. I did not see the "big
blue rectangle" in IE8, I thought you meant the cyan background when I wrote
my original response.

 

[Mark B]

I've uploaded these screenshots:

IE7 (my machine here): www.factorwords.com/screenshots/ie7.png
IE8: www.factorwords.com/screenshots/ie8.png
Firefox: www.factorwords.com/screenshots/firefox.png
Safari: www.factorwords.com/screenshots/safari.png

So comparing my machine (IE7), IE8 and Safari are similar except for the
height of the navigation bar. Not sure why they are taller.

Firefox however shows the big blue rectangle I was talking about.

 

[Mark Rae [MVP]]

I am trying to figure out why Firefox displays a big blue rectangle at
www.factorwords.com whereas IE and Safari don't.

http://validator.w3.org/check?verbose=1&uri=http://www.factorwords.com/

No point even trying to achieve cross-browser compatibility with that many
validation errors...

 

[Alexey Smirnov]

I've uploaded these screenshots:

IE7 (my machine here):www.factorwords.com/screenshots/ie7.png
IE8:  www.factorwords.com/screenshots/ie8.png
Firefox:www.factorwords.com/screenshots/firefox.png
Safari:  www.factorwords.com/screenshots/safari.png

So comparing my machine (IE7), IE8 and Safari are similar except for the
height of the navigation bar. Not sure why they are taller.

Firefox however shows the big blue rectangle I was talking about.

Because of

border=".75px"

It cannot be decimal and it makes no sense to have the border width
less than 1 px. Either make it as 1 or 0

 

[Mark B]

Thanks. I can work on all those. Some may have been because I went from
FrontPage to Visual Web Developer Express... or not.