Firefox & Opera problem?

[hymer]

Hello Everyone,

I have some code for an Amazon book ad that has been modified so that it validates. The code does validate and looks perfect in IE at <snip>.

However, it does not center in Firefox and it does not center plus has an odd background in Opera.

I placed the relevant code below.

Can anyone see how I can fix this for Firefox and Opera?

Thanks a lot,

Bob

--

.centerall{
text-align:center;
font-size: 120%;
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 20px auto 5px auto;
}

<div class="centerall">Amazon Book Sale<br><br>

<!--[if IE]>
<iframe src="http://example.com/" marginwidth="0" marginheight="0" width="120" height="150" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>
<![endif]-->
<object data="http://example.com/" type="text/html"></object>

</div>
</div>

[edited by: encyclo at 1:55 pm (utc) on Aug. 2, 2005]
[edit reason] Examplified and URL removed. Please see forum charter [/edit]

[drhowarddrfine]

The code you show is missing an open div tag but the real reason might be that you are using IE specific code that won't work in anything else. YOu need to get it to work in a standards compliant browser like FF or Opera first, then go with IEs quirks and bugs.

We need to see more code to help you.

[hymer]

Thanks for the reply. I know what you mean by what appears to be an extra </div> but without it the whole page gets messed-up and it does validate with it. Must have been something earlier.
The code was an attempt by someone else to make the Amazon code validate. It does do that in IE but messes up in Firefox and Opera.

Below is the original code partially generated by Amazon.

This is followed by the new validation fix plus the code preceeding it.

Thanks a lot for looking at this.

Bob

Original:
<div class="centerall"><a href="http://example.com/human-factors-books-user-interface-design1.html" title="Recommended Books">Recommended Books</a><br><br>
<a href="http://www.example.com/human-factors-books-user-interface-design1.html">
<img src="http://example.com/images/books3.gif" alt="Human Factors, User Interface Design, Ergonomics."></a></div>

<br><br>

<div class="centerall">Amazon Book Sale<br><br>
<iframe src="http://rcm.amazon.com/e/cm?" marginwidth="0" marginheight="0" width="120" height="150" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>
</div>

New:

<div class="centerall"><a href="http://example.com/human-factors-books-user-interface-design1.html" title="Recommended Books">Recommended Books</a><br><br>
<a href="http://example.com/human-factors-books-user-interface-design1.html">
<img src="http://example.com/images/books3.gif" alt="Human Factors, User Interface Design,
Ergonomics."></a></div>

<div class="centerall">Amazon Book Sale<br><br>

<!--[if IE]>
<iframe src="http://rcm.amazon.com/e/cm?" marginwidth="0" marginheight="0" width="120" height="150" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>
<![endif]-->
<object data="http://rcm.amazon.com/e/cm?" type="text/html"></object>

</div>
</div>

[edited by: encyclo at 8:20 pm (utc) on Aug. 2, 2005]
[edit reason] tidied up [/edit]

[encyclo]

The "new" markup is broken in several ways. Firstly, it makes an assumption that no version of IE will understand the

object

tag - with IE7 just around the corner, this may well be false. After that, you have an

iframe

in an IE conditional comment. Again the IE7 problem surfaces as, if IE7 supports

object

properly, you will get two links rather than one. Finally, the use of the conditional comment in order to make the page validate is a cop-out - you are merely hiding invalid markup from the validator rather than solving the problem.

Looking at the two versions, I would strongly recommend the first, unaltered version. Depending on your doctype (transitional would be most appropriate), you can keep the

iframe

, remove the

border="0"

to make it validate or just leave it there and accept one unknown attribute error.

The reason why Firefox and Opera weren't displaying the link properly is that they were being served the

object

tag only (not the

iframe

) which does not inherit the style from the surrounding

div

.

[hymer]

Thank you encyclo. That new code was a persons attempt to get an Amazon script to validate. I got it off of the Amazon Forum.

I am going back to the first code. But this will not validate in 4.01 Strict.

I think I am going to live with that code not being valid via W3C. The rest of the page does validate.

Do you see any big issues with that lack of validation from an SEO viewpoint?

Thanks Again,

Bob

[tedster]

No SEO issues whatsoever. In fact, just make it a transitional DTD rather than strict and the page WILL validate.

Validation is an aid to SEO because it helps you avoid errors that may blank out part (or even all) of your page. But an conscious, intentional choice to use just one bit of non-standard code that is still well-formed will not have any impact on search engine rank.

[hymer]

Thanks for the information tedster. Sounds good.

Can I just simply change my DocType from 4.01 Strict to transitional DTD without messing up the page? If so, what would that form of DOCTYPE look like?

My present one is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Thanks Again,

Bob

[encyclo]

You can use this instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It should make no difference at all to page rendering.

[tedster]

Side note -- I found recently that Opera 8 does make some changes in its page rendering between strict and transitional when they are "partial" doctypes aimed at triggering quirks mode -- that is, without the url. I didn't persue the details beyond just that discovery, that a strict but partial doctype was not rendered in quirks mode by Opera 8.

But since you are using a full doctype, hymer, that issue should not come up.

[encyclo]

Yes, the "partial" strict doctype for HTML 4.0 and 4.01 both trigger standards-compliance mode in Opera and also Firefox and even IE - it is only the partial, transitional doctype which triggers quirks mode.

I have also noticed an occasional difference in rendering in Firefox between the quirks mode triggered by the partial doctype and the quirks mode triggered by no doctype, but I haven't been able to pin that down yet.

Full doctypes are always safer. :)

[hymer]

Hi Guys,

I'm afraid that I am unfamiliar with Quirks Mode. But if the pages look right in all three browsers, can I assume it is OK to use the 4.01 Transitional?

Is there anything that I should look out for?

Thanks,

Bob

[encyclo]

If you use your current doctype as listed in your message 7 or the alternative one I suggested in message 8, you should be just fine. You are using the most appropriate version of the HTML 4.01 Strict doctype which includes the link to the DTD.

[tedster]

Here's a reference for anyone wanting to learn a bit about quirks mode:

Quirks Mode vs. Standards Mode [webmasterworld.com]

[hymer]

Well, I have to admit that my knowledge is just too limited to take advantage of all your good advice.

I have tried tons of things including changing the DOCTYPE with no success.

I think I am going to have to live with invalid code. I hate to do it because everything has validated for several years. But I do like these additions so I guess I will learn to live with it.

Thanks for all the help,

Bob

[nickied]

hymer:

I have tried tons of things including changing the DOCTYPE with no success.

Others here have suggested loose and/or strict. You may also try 4.01 transitional as well. However, they all have their own rule sets which you will have to validate against.

Since you mention doctype, you're validating html. Just a suggestion - also validate your css at the w3.org site; though I understand css isn't your primary issue.

[tedster]

Just for clarity's sake, when we're talking about HTML 4.01, the file for the transitional DTD filed is named loose:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

So there are three html 4.01 doctypes -- transitional, frameset, and strict. Loose is just a name they used for the transitional file.

[hymer]

Thanks Guys,

My problem is that I know just enough to be dangerous. I think the doctype that I am using is really fine and the problem is with my limitations.

I think I am chasing my tail as I keep trying various fixes.

Bob