The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> IE vs Firefox vs Opera, How do I design for all of them?
michelle
post Apr 27 2007, 12:44 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 19-April 07
From: Australia
Member No.: 2,569
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 smile.gif

But...

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

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">
<!-- /* $WEFT -- Created by: Michelle McGregor (info@darcyengineering.com.au) on 16/04/2007 -- */
  @font-face {
    font-family: AvantGarde Bk BT;
    font-style:  normal;
    font-weight: normal;
    src: url(AVANTGA2.eot);
  }
-->
</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">
<!-- /* $WEFT -- Created by: Michelle McGregor (info@darcyengineering.com.au) on 16/04/2007 -- */
  @font-face {
    font-family: AvantGarde Bk BT;
    font-style:  normal;
    font-weight: normal;
    src: url(AVANTGA2.eot);
  }
-->
</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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Effovex
post Apr 27 2007, 01:45 AM
Post #2


Serious Coder
*****

Group: Members
Posts: 251
Joined: 6-January 07
From: Sherbrooke, Qc, Canada
Member No.: 1,477
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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2007, 05:00 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
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 smile.gif

But...

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

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 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">

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
<table STYLE='margin-left:76px; margin-top:100px; width:800px; background-color: black; border=none;'>

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
<td height=150px>

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! tongue.gif

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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 27 2007, 12:04 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 27 2007, 05:30 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2007, 06:39 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 27 2007, 08:19 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 28 2007, 03:35 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I'm confused. Does a system doctype trigger quirks mode in some browsers now?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 28 2007, 07:28 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
I tested SYSTEM in my Windows browsers (latest versions only of Opera and Firefox), and they seemed to go into std mode.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 28 2007, 08:19 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I know. I'm wondering what Darin is on to.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 28 2007, 03:11 PM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 28 2007, 04:31 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
O! At first glance I thought you said the ass-word again. biggrin.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
stjepan
post Apr 29 2007, 01:26 PM
Post #13


Serious Coder
*****

Group: Members
Posts: 329
Joined: 15-October 06
From: zagreb, croatia
Member No.: 445
Design me like.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
michelle
post Apr 30 2007, 10:37 PM
Post #14


Newbie
*

Group: Members
Posts: 12
Joined: 19-April 07
From: Australia
Member No.: 2,569
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
<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" style="margin:0;padding:0" bgcolor=white background="Website_files/background.jpg" lang=EN-US background-repeat: no-repeat>
<table style='position:absolute' topmargin="0" width=137px bgcolor="black" border=0px marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" style="margin:0;padding:0">


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
<p style='margin-top:-700px'>



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

QUOTE
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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 1 2007, 04:57 AM
Post #15


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 08:17 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC