Browser incompatibility (FP2003)

[carsten-m]

Hello

I am designing a new web site for a client. I am fairly new to designing
for/on web. I am using FP 2003 and have solved prior problems using this
forum, so I try again:

Please refer to test site on url: http://www.cm-context.dk/newweb

I have never checked the site on anything but IE 6.0 (did simply not think
there could be a problem) but my attention has been brought to the fact, that
the site is not compatible with Opera browser (and possible other browsers as
well).

Please, will anyone look at my site and possible tell me what I am doing
wrong.

hopes and regards
carsten-m

 

[Tom Pepper Willett]

Designing for browser compatibility:
http://hotwired.lycos.com/webmonkey/99/41/index3a.html?tw=design
--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
How to ask a newsgroup question:
http://support.microsoft.com/kb/555375
===
| Hello
|
| I am designing a new web site for a client. I am fairly new to designing
| for/on web. I am using FP 2003 and have solved prior problems using this
| forum, so I try again:
|
| Please refer to test site on url: http://www.cm-context.dk/newweb
|
| I have never checked the site on anything but IE 6.0 (did simply not think
| there could be a problem) but my attention has been brought to the fact,
that
| the site is not compatible with Opera browser (and possible other browsers
as
| well).
|
| Please, will anyone look at my site and possible tell me what I am doing
| wrong.
|
| hopes and regards
| carsten-m

 

[Murray]

Why are you concerned about Opera with its very nearly insignificant market
share?

It would also help if you mentioned which things weren't working for you.

Anyhow - looking at the code, I can see that you have violated one of the
cardinal rules of using absolute positioning -

<td width="260">
<div style="position: absolute; width: 260px; height: 300px;
z-index: 2; padding-left: 130px; padding-top: 265px" id="click"
onclick="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/forside/animation.gif');
FP_changeProp(/*id*/'click',0,'style.visibility','hidden')">
<marquee behavior="slide" style="font-family: Verdana; color: #CC0000;
font-size: 10pt" loop="1" width="140" class="handClass">Click for short
intro</marquee></div>
<p>&nbsp;</p>
<p>
<img border="0" src="images/forside/anim_right_still.jpg"
width="260" height="260" id="img1"></td>

You must never put absolutely positioned elements directly into table cells.
Perhaps by changing this markup to this -

<td width="260">
<p>&nbsp;</p>
<p>
<img border="0" src="images/forside/anim_right_still.jpg"
width="260" height="260" id="img1"></td>

and then this -

</body>

to this -

<div style="position: absolute; width: 260px; height: 300px;
z-index: 2; padding-left: 130px; padding-top: 265px" id="click"
onclick="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/forside/animation.gif');
FP_changeProp(/*id*/'click',0,'style.visibility','hidden')">
<marquee behavior="slide" style="font-family: Verdana; color: #CC0000;
font-size: 10pt" loop="1" width="140" class="handClass">Click for short
intro</marquee></div>
</body>

you may well see that your problems go away.

 

[carsten-m]

Thanks for answering. There seems to be many intersting features and info on
the site you referred me to, but I can not seem to find any solution to my
present problem there. But thanks again for borthering to look into it.

carsten-m

"Tom Pepper Willett" skrev:

 

[carsten-m]

Thanks for your answer and your effort to help.

I am not primarily concerned about Opera but merely the fact, that
everything in this newly designed site works absolutely fine when tested in
IE 6, but apparently not in other browsers? I have been using FP 2003 as I
would do PhotoShop, Illustrator and InDesign when I design brochures etc,
meaning that I do not have to know anything of the coding that lyes behind
the program.

Please refer to the looks/appearence of the url: http://cm-context.dk/newweb
in IE 6 for ref.

You tell me, that "You must never put absolutely positioned elements
directly into table cells". It may sound strange to you, but I do not know
what absolute positioning means. I have in FP 2003 made a swap behavior and
used a layer to form the "click for short intro" button to acitvate the swap
behavior. I have made it as layer because it had to be on the top of the
picture. And as I said: I have had no indication from FP 2003 or from review
in IE 6 that this was no good??

I have tried your suggestion,
please ref. to url: http://cm-context.dk/newweb_disc_group

As I do not programme in "raw" html I do not know, what theese changes are
or what they do, but the result seems to be pretty much the same (if I have
made the corrections the right way, that is) except that the "button" "Click
here for more info" has disappeared from the screen - you have to scroll far
down to find it. This is the same for IE 6 as for Opera (which other more
significant browsers should I test it on)?

How do I correct this, how do I go about, how concerned should I be?

kind regards - and still hopefull

carsten-m

"Murray" skrev:

 

[Murray]

used a layer to form the "click for short intro" button

That's absolute positioning. "Layers" are absolutely positioned elements.
They should never be put directly into table cells.

And as I said: I have had no indication from FP 2003 or from review
in IE 6 that this was no good??

Yes - unfortunately this is something you only learn by experience.

but the result seems to be pretty much the same

It's entirely possible, since I had no idea what I was trying to fix! 8)

But looking at your link - http://cm-context.dk/newweb_disc_group/ - I can
see that the center image is now displaying properly aligned, whereas before
it was not. Was that the problem?

If that is the case, it appears that you need to do two more things and then
you will be done. Both will require that you work in the 'raw' HTML - are
you up for the challenge?

 

[carsten-m]

Thanks again for replying

"Learn from experience" you say. Hmmm. I was lead to believe that FP 2003
with review on IE 6 was a "what you see is what you get" application, that
you did not need to know "raw" html to work. I am not into "raw" html, have
not got the time to learn it. Is there any other application that will work
without knowledge of html, or will I encounter problems in any of these?

If I am not to make absolutely positioned elements, how do I go about it? Is
it safe to only use tables/cells?

How it is meant to look: Again: Check the url: http://www.cm-context.dk/newweb
with IE 6 versus i.e. Opera (the one I have compared it with)....

kind regards

"Murray" skrev:

 

[Murray]

"Learn from experience" you say. Hmmm. I was lead to believe that FP 2003

with review on IE 6 was a "what you see is what you get" application, that
you did not need to know "raw" html to work.

It's hyperbole. There is no such thing as a WYSIWYG HTML authoring system
for the simple reason that there are so many different versions of browsers
made by so many different browser manufacturers with so many different
interpretations of what the standards really are. The real truth is that
the more you know about HTML, the easier these problems will be to solve.

Is there any other application that will work
without knowledge of html, or will I encounter problems in any of these?

You will have the same or similar problems in all of them. There is just so
much to HTML that cannot be built into a "wizard".

If I am not to make absolutely positioned elements, how do I go about it?

I didn't say that you are not to use absolutely positioned elements
(layers). I did say that if you are going to use them, you must not put
them directly into table cells, however. There are several other caveats
about using them, just as there are about using anything you put onto a web
page.

Is it safe to only use tables/cells?

Yes. Sometimes. 8(

Here are the remaining steps you need to do to fix your page so that it will
look as it does here - http://www.cm-context.dk/newweb - assuming you have
already made the changes I described in my previous post -

1. Drag and drop the layer in the location where you want it to appear on
the finished page.
2. Change this -

</head>

to this -

<style type="text/css">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:850px; margin:0 auto;position:relative; }
-->
</style>
</head>

change this -

<body ...> (the elipsis represents everything else in the body tag)

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

</div><!-- /wrapper -->
</body>

and see if that helps.

The page will display properly in any browser viewport width, with the layer
positioned as you want.

By the way, an 850px wide table will give horizontal scrollbars on any
800x600 screen....

 

[carsten-m]

I thank you again. I appreciate the effort you have done and may have to
reconcider the extent to which I use web design applications. Unfortunately.

I have tried to implement your suggested changes, but not much have changed
using the opera browser.

Which browsers should I primarily test my site on?

regards
carsten-m

"Murray" skrev:

 

[Murray]

Which browsers should I primarily test my site on?

Those most often used by your client's customers.

I have tried to implement your suggested changes, but not much have
changed
using the opera browser.

I still don't know what you are looking for - it looks quite good to me in
IE6 and FF. But can you show me the page with the changes, please?

 

[carsten-m]

The "original" site is at: http://www.cm-context.dk/newweb

The revised site (with your correction) at:
http://cm-context.dk/newweb_disc_group

Both look and work ok in IE6 - neither looks ok in Opera (I still have not
tested in other browsers). Is there anywhere I can see the number of users
for different browsers?


"Murray" skrev:

 

[Murray]

Is there anywhere I can see the number of users

for different browsers?

You would have to get that information from the server logs for the client's
existing site.

Both look and work ok in IE6 - neither looks ok in Opera

See - when you say "neither looks ok...." I have no idea what you mean. Can
you describe how they don't look OK?

I see that you have made exctly the changed I recommended. Good work.

However, I notice that I missed one thing.

Please change this -

<td bgcolor="#EBEBEB" width="160">
<div style="position: absolute; width: 160px; height: 90px; z-index:
1; padding-left: 15px; padding-top: 77px" id="dato">
<i><font size="1" color="#666666">Update 20 September
05</font></i></div>
<!--webbot bot="Include" U-Include="menu.htm" TAG="BODY" startspan -->


to this -

<td bgcolor="#EBEBEB" width="160">
<!--webbot bot="Include" U-Include="menu.htm" TAG="BODY" startspan -->

and this -

</div><!-- /wrapper -->
</body>

to this -

<div style="position: absolute; width: 160px; height: 90px; z-index:
1; padding-left: 15px; padding-top: 77px" id="dato">
<i><font size="1" color="#666666">Update 20 September
05</font></i></div>

</div><!-- /wrapper -->
</body>

(you may also need to reposition this layer)

Now you have removed ALL of the layers from the table cells! As far as I
can tell, there is no other markup anomaly in that page that could be
expected to cause problems.

I can say that it's a nce design, and it looks fine in IE6/FF1.0.7/PC, and
Safari2.0.1/FF1.0.7/Mac. It's a teeny bit broken in IE5.2/Mac, but not even
enough to worry....

 

[carsten-m]

Thanks again for your answer and effort. I appreciate it.

I have been out of office for some days and I have re-concidered. It seems
the reason for my problems is the use of absolute layers on the index page-
is that correctly understood? In case it is, I will re-design the index page,
which is the only one featuring layers. In that way I will still be able to
control the design from within FrontPage - wheras if I just implement your
suggestions I will have no control my-self, which obviously is not well at
all... Is that not the right way to work around this problem?

kind regards
carsten-m

"Murray" skrev:

 

[Murray]

It seems

the reason for my problems is the use of absolute layers on the index
page-
is that correctly understood?

No. You problem isn't that you have used them, it's the way you have used
them.

wheras if I just implement your
suggestions I will have no control my-self

I guess I don't understand this at all. Of course you will still have
control.

Is that not the right way to work around this problem?

If you want to redesign then that's fine. But your layout doesn't require
that to be fixed. All you need to do is just to remove the layers from the
table cells (and avoid ever placing any there again - you are certainly in
control of that), which is what I have tried to tell you how to do.

 

[carsten-m]

I am very greatful for your time and effort. I DO understand and appreciate
what you have been trying to tell me and I acknowledge how your suggestions
solved the layer related problems with the disruption of the middle image
etc. (problems seen only in other browsers than IE). I have now downloaded
Firefox, where I see these changes, your suggestions have made (could not see
them in Opera?). I also understand that it is the WAY I have used layers,
that is the problem. Unfortunately, as I mentionned, I am not able to do html
programming - I have to depend on my FrontPage 2003 - and from within this
program I do not UNDERSTAND your html changes and do not know how to make
layers in any other way, than I did (which caused these incompatibility
problems in other browsers). Your suggestions I just copied and pasted...!

Reg. your latest suggestions (for fixing the lack of interactivity on the
first 3 menus left, I think) I have tried to implement these, but I have
probably made some kind of mistake. The result is at:
http://cm-context.dk/newweb_disc_group_b

Your first revision still is at http://cm-context.dk/newweb_disc_group

kind regards
carsten-m
"Murray" skrev:

 

[Murray]

The mistake you made was that you had the cursor (insertion point) in a
table cell when you inserted the layer. You can tell that this is the case
by looking at the tag selector (FP2003) at the top of the document's window
before you insert anything. If the last structural tag (as opposed to
presentational tag, e.g., <b>, or <p>, or <font>) in the 'parade' of tags at
the top is <td>, then your insertion will go into a table cell.

If you are going to insert layers onto a page, make sure that the ONLY thing
you see on the tag selector is <body>. The best way for you to insure that
this is the case, is to open the split view, and click immediately before
</body> in the code. As far as I can tell, there is no way to do this using
ONLY the design view. This is one of the real downsides of relying
exclusively on a WYSIWYG approach to building web pages. You can create
problems using only design view that you cannot solve using only design
view. This is a good example of one.

Reg. your latest suggestions (for fixing the lack of interactivity on the
first 3 menus left, I think) I have tried to implement these, but I have
probably made some kind of mistake. The result is at:
http://cm-context.dk/newweb_disc_group_b

I am not sure what I am looking for here. Can you summarize the problem for
me, please?

 

[carsten-m]

Thanks again. Theese are really good pointers, that even I : ) can work with.
I will experiment a little with this - and I have your html suggestions to
guide me as well. Thanks.

Ref. to your latest suggestions at http://cm-context.dk/newweb_disc_group_b