HTMLHelp Forums > IE vs Firefox vs Opera

HTMLHelp Forums > Web Authoring > Web Site Functionality

michelle

Apr 27 2007, 12:44 AM

Hi all

With the help of this forum and this website and serveral other tutorials I have made my Dad a website for his business:

http://www.darcyengineering.com.au

I now have it validating without error (with the exception of one page, which I can fix) and, as a user of Internet Explorer I was viewing what looked pretty good to me

But...

... I have now downloaded Firefox and Opera and see something quite different

It appears that nearly all of the margins I have set are lower on the screen, and most of my text has double the line space.

Below is my html for the home page (of which the changes aren't too bad):

CODE

<!DOCTYPE HTML SYSTEM "http://www.darcyengineering.com.au/HTML4plus.dtd">
<head>
<META NAME="keywords" CONTENT="darcy, engineering, darcy engineering, darcy engraving, engraving, pattern making, tool making, toolmaking, traditional pattern making, traditional toolmaking, peter mcgregor, mcgregor, dies and stamps, dies, stamps, die, stamp">
<STYLE TYPE="text/css">

</STYLE>
<style type="text/css">
a:link, span.MsoHyperlink
    {color:white;
    text-decoration:none;
    text-underline:none; }
a:visited, span.MsoHyperlinkFollowed
    {color:white;
    text-decoration:none;
    text-underline:none; }
a img { border: black; }
p { font-family: AvantGarde Bk BT; font-size:14pt; }

</style>
<title>Darcy Engineering</title>
</head>
<body bgcolor=white background="Website_files/background.jpg" lang=EN-US
style='tab-interval:36.0pt'>

<table STYLE='margin-left:76px; margin-top:100px; width:800px; background-color: black; border=none;'>
<tr>
<td width="33.3%">
<p align=center>
<a href="http://www.darcyengineering.com.au/Engraving.html">
engraving</a></p>
</td>
<td width="33.3%">
<p align=center>
<a href="http://www.darcyengineering.com.au/PatternMaking.html">
pattern making</a></p>
</td>
<td width="33.3%">
<p align=center>
<a href="http://www.darcyengineering.com.au/DiesAndStamps.html">
dies and stamps</a></p>
</td>
</table>

<img src="Website_files/DarcyEngineering.png" ALT="Darcy Engineering" style='margin-left:100px; margin-top:50px'>

<table STYLE='margin-left:76px; margin-top:50px; width:800px; background-color: black; border=none;'>
<tr>
<td width="33.3%">
<p align=center>
<a href="http://www.darcyengineering.com.au/AboutUs.html">
about us</a></p>
</td>
<td width="33.3%">
<p align=center>
<a href="http://www.darcyengineering.com.au/ContactUs.html">
contact us</a></p>
</td>
<td width="33.3%">
<p align=center>
<a href="http://www.darcyengineering.com.au/RequestQuote.html">
request a quote</a></p>
</td>
</table>

</body>
</html>

And here is my code from what is a typical page on my site (which I am not happy with the Firefox and Opera appearance):

CODE

<!DOCTYPE HTML SYSTEM "http://www.darcyengineering.com.au/HTML4plus.dtd">
<head>
<STYLE TYPE="text/css">

</STYLE>
<STYLE TYPE="text/css">

a:link, span.MsoHyperlink
    {color:white;
    text-decoration:none;
    text-underline:none; }

a:visited, span.MsoHyperlinkFollowed
    {color:white;
    text-decoration:none;
    text-underline:none; }

a img { border: black; }

/* general style for P */
p {font-family: "AvantGarde Bk BT"; font-size:1em; line-height: 1.3em; color: white; }

/* style for points */
p.points {
font-size:1.2em;
color: black;
line-height: 1.5em;
}

/* style for body */
.body {
font-size:1.25em;
color: black;
line-height: 1.5em;
}

/* style for footer */
p.footer {font-family: AvantGarde Bk BT;color: black;font-size:10pt; }

H1 {font-family: AvantGarde Bk BT; color:black; font-size:20pt; }
</style>

<title>Darcy Engineering - Engraving</title>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" style="margin:0;padding:0" bgcolor=white background="Website_files/background.jpg" lang=EN-US>
<DIV ALIGN=LEFT>
<table style='position:absolute' width=137px bgcolor="black" border=0px>
<tr>
<td height=150px>
</td>
</tr>
<tr>
<td>
<p align=center><a href="http://www.darcyengineering.com.au">home</a></p>
</td>
</tr>
<tr><td><p> </p></td></tr>
<tr>
<td>
<p align=center>engraving</p>
</td>
</tr>
<tr><td><p> </p></td></tr>
<tr>
<td>
<p align=center><a href="http://www.darcyengineering.com.au/PatternMaking.html">
specialised pattern making</a></p>
</td>
</tr>
<tr><td><p> </p></td></tr>
<tr>
<td>
<p align=center><a href="http://www.darcyengineering.com.au/DiesAndStamps.html">
dies and stamps</a></p>
</td>
</tr>
<tr><td><p> </p></td></tr>
<tr>
<td>
<p align=center><a href="http://www.darcyengineering.com.au/AboutUs.html">
about us</a></p>
</td>
</tr>
<tr><td><p> </p></td></tr>
<tr>
<td>
<p align=center><a href="http://www.darcyengineering.com.au/ContactUs.html">
contact us</a></p>
</td>
</tr>
<tr><td><p> </p></td></tr>
<tr>
<td>
<p align=center><a href="http://www.darcyengineering.com.au/RequestQuote.html">
request a quote</a></p>
</td>
</tr>
<tr>
<td height=350px>
</td>
</table>
</DIV>
<img src="Website_files/logo.jpg" ALT="Darcy Engineering" style='position:absolute;margin-left:6px;margin-top:15px;width:199.5pt;height:43.3pt'>
<h1 align=center style='margin-top:100px' >engraving</h1>

<table style='line-height:150%;margin-left:220px;margin-top:80px;width=400px'>
<tr><td>
<p class=points>memorial plaques</p>
</td></tr>
<tr><td>
<p class=points>engraving from your artwork</p>
</td></tr>
<tr><td>
<p class=points>labels: plastic, aluminium, timber</p>
</td></tr>
<tr><td>
<p class=points>computer engraving</p>
</td></tr>
</table>
<table width=400px style='margin-left:220px;margin-top:50px;'>
<tr>
<td>
<p class=body ALIGN=justify>
Darcy Engineering combines the skill of traditional engraving with the modern practices and technology of the industry to create a more diversified and higher quality product for their customers.
<br>
Darcy Engineering specialises in engraving, and can work with a wide range of materials and artwork.
</p>
</td>
</tr>
</table>
<a href="http://www.darcyengineering.com.au/Website_files/brass_plaque1.jpg"
target="new"><img src="Website_files/brass_plaque.jpg" ALT="Brass Plaque Sample"
style='position:absolute;margin-left:555.6pt;margin-top:-300pt'></a>

<table style='width:300px;margin-top:100px' align=center>
<tr><td align=center>
<p class=footer>Darcy Engineering</p>
</td></tr>
<tr><td align=center>
<p class=footer>phone 02 9558 3805 fax 02 9558 5894</p>
</td></tr>
<tr><td align=center>
<p class=footer>email <a href="mailto:info@darcyengineering.com.au" style='color:black'><u>info@darcyengineering.com.au</u></a></p>
</td></tr>
</table>
</body>
</html>

Please feel free to pick on my code, I am very new at this, and any advice on my code would be much appreciated (but please try to be nice too! This is my first website!)

I guess the most annoying thing about the appearance in Firefox and Opera is that my page is so stretched it has made my background have a 'tiled' effect, which I think looks dodgy. I am yet to test this on a Mac... fingers crossed it works!

Any advice would be much appreciated

Thanks,

Michelle

Effovex

Apr 27 2007, 01:45 AM

Sounds like you're experiencing problems with default paddings and margins. Just set the paddings and margins explicitly everywhere the defaults could cause problems.

Consider the use of a Reset sheet (here's the reasoning behind them)

Christian J

Apr 27 2007, 05:00 AM

QUOTE(michelle @ Apr 27 2007, 07:44 AM)

http://www.darcyengineering.com.au

I now have it validating without error (with the exception of one page, which I can fix)

That should be this page, where the unknown attribute MAX is used. Using mixed case in file names like "RequestQuote" might cause problems if users type in the address "requestquote.html", which is not the same thing on many servers.

QUOTE

and, as a user of Internet Explorer I was viewing what looked pretty good to me

But...

... I have now downloaded Firefox and Opera and see something quite different

In addition to the suggestions below, it's always a good idea to keep several browsers running from the start. Firefox and Opera are among the best ones when it comes to standards support, but no browser is bug free.

QUOTE

It appears that nearly all of the margins I have set are lower on the screen

If you mean CSS "margin" literally, different browsers often use varying default values for this, so unless you set it explictly they'll do things slightly different.

CODE

<!DOCTYPE HTML SYSTEM "http://www.darcyengineering.com.au/HTML4plus.dtd">

Why use a custom doctype? Besides being complicated for no reason, browsers will probably go into "quirks mode" when seeing it (where they simulate bugs from older versions), which means pages will look more different between browsers than ever. Instead I recommend a doctype that put browsers into "standards mode", such as

CODE

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

Note that when using this your pages may initially be invalid HTML4/strict and look even worse, but that's because they were previously written to IE's quirks mode rendering.

As a side-note, I'm surprised that both the WDG and W3C validators accept the custom doctype further up. http://www.darcyengineering.com.au/HTML4plus.dtd doesn't seem to be correct (not that I know how this works), so how can a validator know which rules to validate against?

CODE

META keywords are nowadays ignored by probably all search engines. Try instead writing ordinary text content that contains all the important words. The TITLE text is given much weight by search engines.

CODE

a:link, span.MsoHyperlink

"Mso" sounds like something Microsoft invented, such as FrontPage or (even worse) MS Word. These programs are best avoided.

CODE

<body bgcolor=white background="Website_files/background.jpg"

It's better to specify backgrounds (together with text color) in the style sheet.

CODE

style='tab-interval:36.0pt'>

"tab-interval" is a property I've never seen before, apparently it was suggested for CSS1 http://www.w3.org/People/howcome/t/970224H...abs-970117.html but never implemented, and most likely all browsers (even IE) will ignore it.

CODE

It's generally more practical to not use inline styles, instead put all your CSS in embedded or external style sheets.

CODE

p {font-family: "AvantGarde Bk BT"; font-size:1em;

The .em unit may cause IE to scale user text size changes too wildly (the deafult size look OK though). Try percent instead.

CODE

font-size:10pt; }

The .pt unit is meant for print, not screen media. Use .px instead (except for font-sizes, where percent is best).

CODE

<table style='position:absolute'

Why the absolute positioning?

CODE

In an HTML attribute like HEIGHT you shouldn't use units. If you use the "strict" doctype I suggested above you are not allowed to use such "presentational" attributes at all (same goes for MARGINHEIGHT etc). Use CSS instead.

QUOTE

Please feel free to pick on my code

Done!

QUOTE

I guess the most annoying thing about the appearance in Firefox and Opera is that my page is so stretched it has made my background have a 'tiled' effect, which I think looks dodgy.

That might happen if a user increases text size too, or uses a large browser window. You can control tiling with CSS "background-repeat".

Darin McGrew

Apr 27 2007, 12:04 PM

QUOTE(Christian J @ Apr 27 2007, 03:00 AM)

Why use a custom doctype?

Personally, I've used a custom DTD because the standard DTDs haven't offered quite what I want. Although my current custom DTD is only HTML 4.01 Strict, with support for <base target="_top"> copied from HTML 4.01 Transitional.

But I do use a standard doctype declaration so browsers will use a more standards-oriented rendering mode.

QUOTE(Christian J @ Apr 27 2007, 03:00 AM)

CODE

p {font-family: "AvantGarde Bk BT"; font-size:1em;

The .em unit may cause IE to scale user text size changes too wildly (the deafult size look OK though). Try percent instead.

It's easy enough to work around this MSIE bug. Just add

CODE

body { font-size: 100% }

to the beginning of your style sheet. That fixes MSIE's broken implementation of em units, and not just for font sizes.

Christian J

Apr 27 2007, 05:30 PM

QUOTE(Darin McGrew @ Apr 27 2007, 07:04 PM)

Personally, I've used a custom DTD because the standard DTDs haven't offered quite what I want.

I agree there might be reasons for using a custom DTD, I was curious about the OP in particular.

QUOTE

But I do use a standard doctype declaration so browsers will use a more standards-oriented rendering mode.

Is it possible to make a custom doctype trig standards mode, e.g. by replacing

CODE

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

with

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://mysite.com/custom.dtd">

or similar? Or do browsers take every character in the DTD into account for their doctype switching?

QUOTE

QUOTE(Christian J @ Apr 27 2007, 03:00 AM)

CODE

p {font-family: "AvantGarde Bk BT"; font-size:1em;

The .em unit may cause IE to scale user text size changes too wildly (the deafult size look OK though). Try percent instead.

It's easy enough to work around this MSIE bug. Just add

CODE

body { font-size: 100% }

to the beginning of your style sheet. That fixes MSIE's broken implementation of em units,

True, but if you use percentages instead of em you don't need it.

QUOTE

and not just for font sizes.

From my tests it seems "height" or "width" with em units are not buggy unless you've specified font-size with em in the first place.

pandy

Apr 27 2007, 06:39 PM

QUOTE

Is it possible to make a custom doctype trig standards mode, e.g. by replacing

CODE

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

with

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://mysite.com/custom.dtd">

or similar? Or do browsers take every character in the DTD into account for their doctype switching?

AFAIK custom doctypes aways trigger Strict Mode in all browsers. Probably because it's logical that an unknow doctype should do that. So just use SYSTEM.

Darin McGrew

Apr 27 2007, 08:19 PM

Sometimes browsers pay attention to the URL in the doctype declarations, sometimes they don't. My appoach is to use a standard doctype declaration in the markup (to trigger a standards-oriented rendering mode), but to configure the validator to use my custom DTD rather than the standard one.

Re: specifying "font-size: 100%"
Interesting. I had read that MSIE's implementation of em was broken without the workaround, although I haven't done extensive tests myself. It certainly doesn't hurt though.

pandy

Apr 28 2007, 03:35 AM

I'm confused. Does a system doctype trigger quirks mode in some browsers now?

Christian J

Apr 28 2007, 07:28 AM

I tested SYSTEM in my Windows browsers (latest versions only of Opera and Firefox), and they seemed to go into std mode.

pandy

Apr 28 2007, 08:19 AM

I know. I'm wondering what Darin is on to.

Darin McGrew

Apr 28 2007, 03:11 PM

Sorry, but I was under the impression that SYSTEM doctype declarations (for custom DTDs) triggered quirks mode. So many other perfectly valid constructs trigger quirks mode because they upset the browsers' concept of what a "strict" document looks like.

The whole browser sniffing thing is so bass-ackwards, it's hard to keep track of what the "right" thing is supposed to be. Looking again, none of my references mention what browsers do with SYSTEM doctype declarations, so I assumed they fell into the catch-all that anything unrecognized gets quirks mode.

pandy

Apr 28 2007, 04:31 PM

O! At first glance I thought you said the ass-word again.

That's good then. I thought you knew some horrid secret about browser X. Not that I use custom doctypes but it's good to know I can if I want to without problems.

stjepan

Apr 29 2007, 01:26 PM

Design me like.

michelle

Apr 30 2007, 10:37 PM

Hi

Thanks for all of your help and input, I have been working through it and now have Opera showing my site (the pages I have so far updated!) pretty well. Firefox is a little strange though...

The top margin is still funny despite using Effovex's helpful suggestion of a reset sheet, which fixed most of problems straight up! Thanks Effovex! (the one Effovex suggested seemed a little out of my league in trying to work out how to actually use the thing! So I used the one the site linked to form yahoo). I now have this up and running on my site: http://www.darcyengineering.com.au/Engraving.html.

As you can see, the table on the left is still not at the top of the screen as it is in IE and Opera.

Any suggestions? A few people have mentioned the need to "explicitly" set margins, I am not sure how... This is what I have done to try and fix it without any luck:

CODE

i.e. I have simply repeated the margins from the <body></body> section.

I am not sure what the verdict was on my use of a custom DTD, but the reason I did this was to avoid errors in my validation resulting from my use of:

CODE

marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" style="margin:0;padding:0"

in the <body></body> section (Which was suggested to help remove default margins so that I wasn't using negative margins to have my table sit on the left hand, top corner of the screen.

I followed HTML Help's tutorial on how to do this: http://www.htmlhelp.com/design/dtd/customdtd.html

QUOTE

CODE

a:link, span.MsoHyperlink

"Mso" sounds like something Microsoft invented, such as FrontPage or (even worse) MS Word. These programs are best avoided.

Busted! Yes, when I first started designing this website I was using dreamweaver, frontpage and MSWord but was not happy with any of them, so I switched to Notepad and used the MSWord version (as it was closest in appearance to what I was after) as a bit of a guide, that bit was one of a few bits that I didn't bother redoing.

QUOTE

Why the absolute positioning?

I have used absolute positioning on my table which contains links to other pages and the logo so that my text started next to the table rather than underneath it, I thought this was better than what I was trying before: using negative margins to try and achieve this eg.

CODE

If there is a better way to do this please let me know.

QUOTE

QUOTE
I guess the most annoying thing about the appearance in Firefox and Opera is that my page is so stretched it has made my background have a 'tiled' effect, which I think looks dodgy.

That might happen if a user increases text size too, or uses a large browser window. You can control tiling with CSS "background-repeat".

I have put in the "background-repeat" and was wondering if there was some way to make the background stretch to fit the user's screen rather than simply have it set to not repeat? (Rather than having the tiling look, I don't like that!)

Thanks again for the help, I really appreciate it!

PS. Any Mac users out there, can you please let me know if you can see my site? http://www.darcyengineering.com.au/ Thanks!

Frederiek

May 1 2007, 04:57 AM

To answer your last question, the homepage of your site does show in Safari on Mac, though slightly off center.

I get the feeling you are complicating things more than necessary:
- a custom DTD, not really needed as the available DTD's together with CSS provide sufficient tools,
- several stylesheet declarations (external, in the HEAD, inline, as well as HTML attribute declarations (all concerning margins),
- tables, where they don't really seem appropriate.
All to achieve the same effect.

There's not the one solution I can provide for your problem. If I were you, I'd read about CSS (column) layouts, lists, positioning and floats.

See Web Design References: Cascading Style Sheets.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.