Pages that have a mind of their own! (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

MartynB -> Pages that have a mind of their own! (5/2/2006 12:56:42)

I'm suffering from terminal stupidity!

I'm building a web for a client and hosting it temporarily at www.imsl01.co.uk.

As you will see it is for a small design and print company who, like me, are picky about how their site looks.

I'm building the web in FP2002 (though the uploaded version is in FP2003 and it hasn't cured the problems).

The web is based on tables - I know, but I haven't got sufficiently ofey with CSS et al yet[:(]

Despite the fact that most of the web has been built around one page, which I've then copied, pasted and modified by hand, there are odd shifts in the position of things.

Worst still is that when I carefully place images in cells and publish the site the images move around based upon what browser I am using. If the images are correct in IE they are wrong in Firefox. Worse yet is that they are wrong in Safari - that's a MAC only browser and my client (and his clients) all have great big, widescreen MAC displays (I have mer mortal twin TFTs running at 1280x1024.

I know I can do the site in my DTP package rendered to small jpegs with graphical hotspots.

Can I do it in FrontPage so that it works properly?

Kind regards,

MartynB



jaybee -> RE: Pages that have a mind of their own! (5/2/2006 13:11:13)

Well the whole thing is far too wide for my monitor which means I have to side scroll, danged annoying.

This gives a clue to your problem. Fixed width so the page doesn't resize with the window.

Looking at the code some of which is below.... 
<table border="1" cellpadding="0" cellspacing="0" width="1200" id="AutoNumber1" height="775" style="border-color: black">
  <tr>
    <td width="203" rowspan="2" bgcolor="#B4CA5E" style="border: 0" height="181" colspan="2">
    <img border="0" src="images/LHcol.jpg" width="200" height="200"></td>
    <td width="995" height="160" colspan="2" style="border: 0" style="border-style: solid; border-width: 0">
    <table border="0" cellpadding="10" cellspacing="10" style="border: 0" width="100%" id="AutoNumber2">
      <tr>
        <td width="33%"> </td>
        <td width="33%"> </td>

        <td width="34%"> </td>
      </tr>
      <tr>
        <td width="33%"> </td>
        <td width="33%"> </td>
        <td width="34%"> </td>
      </tr>


You can see you have %ages which will expand and contract but you also have fixed somethings.
td width="203"
203 what?

Set it all up to use %ages.




rdouglass -> RE: Pages that have a mind of their own! (5/2/2006 13:29:56)

quote:

Set it all up to use %ages.


Not always jaybee. [8|] Some times you *do* want some fixed and some %ages (and sometimes a few not defined at all). Especially if you're trying to do a 'liquid' page using tables - it does work and for a big range of browsers when done properly.

I agree they need to be 'somethings' but they don't all have to be %.



MartynB -> RE: Pages that have a mind of their own! (5/2/2006 14:13:53)

Thank you both for your responses.

Being that the client has a rather large, wide, MacMon he has defined the page as (more-or-less) A4 landscape.

The page is, essentially, therefore fixed in size rather than fluid. The 203 (what) should, I think, be "px" - pixels.

If one takes the company.htm page as the basic model then all the other pages should fall into line with that page except, of course, that the left margin for the current section and the top table for the subsection will change as will the page content in the middle-right section.

The crucial and overriding problem is that an image that displays perfectly in the bottom right-hand corner of the middle-right section in IE changes its position in Firefox and Safari and this I simply do not understand at all.

Thanks,

MartynB



Reflect -> RE: Pages that have a mind of their own! (5/2/2006 15:55:50)

Try removing the height statements, I believe they might be throwing it off.

Just a thought.

quote:

<table border="1" cellpadding="0" cellspacing="0" width="1200"


1200 pixels? Wow, this will create some side scroll for the lower end of the graphics curve but I understand why you did it above. I wouldn't recomend this though.

Take care,

Brian



jaybee -> RE: Pages that have a mind of their own! (5/2/2006 16:08:16)

So the client wants the site so that he can see it alright but most of his customers can't? That's plain daft.

quote:

I agree they need to be 'somethings' but they don't all have to be %.


True but in this case the browsers are getting confused and I was suggesting setting them all the same for ease of troubleshooting. They don't have to be % they can be pixels. The things that are nothing need to be something.

I had a quick play with the code and with the current method I can get the picture to move around but never exactly the same place in all the browsers.

IE allows you to specify somethings. Firefox, Opera and Safari do not. They expect you to tell them exactly where you want things so width=200 isn't valid. The heights aren't helping either.

I found everything shifted as soon as I put a doctype in as well which points to browsers dropping into quirks mode as a last resort.

I suggest you start by correcting all the width=/height= to specify a unit of some sort. See where that takes you.



MartynB -> RE: Pages that have a mind of their own! (5/2/2006 17:07:45)

Thank you all very much for your replies thus far.

I will recode the company.htm page specifying px throughout as the unit of measurement and see what effect that has.

Height will be important to maintain.

Being an old geezer I have to work on the principle that the customer is right even though it make my (our) life difficult.

I'll come back to this post when I know the effect of the changes.

Kind regards,

MartynB



MartynB -> RE: Pages that have a mind of their own! (5/2/2006 18:34:36)

Okay...

I've now specified widths and heights as "px" throughout and republished.

Another oddity has crept back in - spurious black cell border lines in Firefox where they should not be. Firefox updated itself whilst I was doing this but that did not change anything.

I did something fairly obvious as a test in that I opened IE and Firefox and placed one on top of the other with great care. Interesting conclusion! The image blobs.gif is stretched in the vertical plane in Firefox compared with the same image in IE and in FrontPage itself. The code shows the pixel size of the image remaining constant but it would appear that either the Microsoft tools as squashing the image down or Firefox is stretching the image (and, by inference, so is Safari - but I can't test for that).

The main content table is identical in size, the text is rendered more-or-less identically, the image starts on the same horizontal plane and has the same width but in Firefox it is rendered as being larger that in IE.

Time for bed for me but in respect of the image I think I've found a problem. Now all I need is a solution!

Kind regards,

MartynB



treetopsranch -> RE: Pages that have a mind of their own! (5/2/2006 22:09:26)

quote:

The code shows the pixel size of the image remaining constant but it would appear that either the Microsoft tools as squashing the image down


Could that be because 'automatic image resizing' is enabled in IE?



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 4:20:35)

Hi Don...

I've checked the IE Advanced settings and changed that option in the Multimedia section a few times and reloaded the page from the server each time. No changes in page layout were observed.

My own belief is that IE is rendering that which I created in FPXP as it is rendered in FPXP but Firefox and Safari have their own ideas. This may, of course, be down to the fact that the code generated in FPXP is not compliant to the W3C standards (note the plural!) The best example of this, perhaps, is that when one selects % for table cell contents the code shows, say, 33% but when one selects pixels the code shows, say, 200 - without the px.

The problem is that the main page content area in IE and Firefox is rendered to an identical size when I overlay them and switch between them on screen but the Firefox image is stretching in Firefox and going outside the confines of that area.

Cheers,

MartynB



Kitka -> RE: Pages that have a mind of their own! (5/3/2006 5:45:47)

quote:

but the Firefox image is stretching in Firefox and going outside the confines of that area.


If you mean that you think Firefox is stretching the blobs.gif image - I strongly disagree. I established this by measuring it in IE and FF using Screen Calipers, and both are rendering the image to the exact size you have specified in the code.

What seems to be happening is a positioning issue, not a sizing issue.



jaybee -> RE: Pages that have a mind of their own! (5/3/2006 6:13:03)

quote:

Being that the client has a rather large, wide, MacMon he has defined the page as (more-or-less) A4 landscape.


This worries me and I think it's going to come back and bite you. The client is used to designing bits of paper not web sites. I suggest you politely ask him to check the site on a standard monitor.

The splash page appears, I get a small bit of it, I don't have time to scroll all over it before it vanishes and I get a bit of another page.

I often have a requirement for design and print facilities for clients and to be honest, if I was Googling and found them, I'd assume from their web site that they weren't very good if they couldn't take the care to make their site appear within a window. Vertical scroll is fine, horizontal is a disaster.



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 7:34:36)

Yes, you are quite correct. The image in Firefox appears to be starting lower down than in IE.

This is the code from the Firefox Browser: -

<img border="0" src="images/Blobs.gif" style="position: absolute; left: 736px; top: 536px" width="472px" height="255px">

And this is the code from the IE Browser: -

<img border="0" src="images/Blobs.gif" style="position: absolute; left: 736px; top: 536px" width="472px" height="255px">

Clearly the code is identical as one might expect so given that, so far as I can see, the browsers are rendering the page to exactly the same height and given that I think that I has asked for the image to be positioned identically is there a logical explanation as to why the image is being positioned differently in the two browsers (three if you include Safari) when everything else seems to display in the same place?

Thanks for correcting my misconception - it was late when I looked at it so I had brain fade[&o]

Kind regards,

MartynB



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 8:25:40)

That's why you are a Moderator and I'm a curmudgeonly Tyke. It has indeed come back to byte[:D] me!

The client is quite clear about what he wants and why. I've known him for several years and he knows his own mind and his clients.

He has now suggested that we go the graphical route - i.e. the pages are created as images and have graphical hotspots on them. His original mockup was created in Acrobat Distiller 7.0 for Macintosh, comprises 9 pages of A4 landscape and is all of 333KB in total (around 35KB per page). The suggestion is that I place each page as an image on an otherwise empty web page and add graphical hotspots to it to link it all up. So i'll pull the PDFs into my DTP package and play around exporting individual pages as JPEGs and GIFs.

It irks me to say that I am inclined to take that route as it enables me to satisfy the needs of my client and thus keep him as a client.

That said, I am keen to learn what, precisely, is causing this apparent image shift in the different browsers.

Kind regards,

MartynB



jaybee -> RE: Pages that have a mind of their own! (5/3/2006 10:19:15)

quote:

He has now suggested that we go the graphical route - i.e. the pages are created as images and have graphical hotspots on them


[image]http://www.california-ballroom.info/images/Webgifs/swoon.gif[/image]




jaybee -> RE: Pages that have a mind of their own! (5/3/2006 10:36:37)

I've had a quick look and if I get some time later I'll delve a bit more but it's not the image shifting. I've measured it in FF and it's positioned exactly where it should be. I even removed the img from the flow in the code and stuck it immediately under the body tag in case it was an inheritance problem and it's not. Exactly the same position.



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 10:39:28)

My thoughts precisely.

So tonight I shall go to archery - my thoughts will be elsewhere but my arrows will be in the GOLD!

I've offered to do it his way in such a way that they will need to do the grunt work [8|].

One can but hope..........



jaybee -> RE: Pages that have a mind of their own! (5/3/2006 10:48:41)

OK, checked your code again and you still have loads of stuff in there with no units against them. It's not the picture that's the problem it's the rest of the page that's rendering differently in the different browsers and that's as I said before, down to having widths and heights specified as just numbers, they need to be given a unit of some sort so at least we have a level base for comparison.

Firefox doesn't like "somethings". IE doesn't care. Not sure what IE7 will make of it but if it complies as it supposedly will then it'll do the same as FF.

quote:

The problem is that the main page content area in IE and Firefox is rendered to an identical size when I overlay them and switch between them


Check again, if you look, the top of the table is higher up on the page in FF than in IE.



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 10:49:38)


quote:

ORIGINAL: jaybee

I've had a quick look and if I get some time later I'll delve a bit more but it's not the image shifting.


I shall be much obliged. A good delve is what is required but for me it would be like a hippo in a mud bath. I use FrontPage because it's relatively quick and most people use IE. Its WYSIWYG nature takes one too far from the code and makes one lazy. A skilled and keen eye is the thing.

Kind regards,

MartynB [sm=tantrum.gif] - DON'T Panic! - I'm not - my chips are too hot!



jaybee -> RE: Pages that have a mind of their own! (5/3/2006 10:53:47)

quote:

I use FrontPage because it's relatively quick


Ahhhh but is it? Has it taken you longer faffing around with this in FP than it would have taken me using notepad, html and css?



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 10:57:42)


quote:

ORIGINAL: jaybee

quote:

I use FrontPage because it's relatively quick


Ahhhh but is it? Has it taken you longer faffing around with this in FP than it would have taken me using notepad, html and css?


Indeed you are right, oh wise one! I think that monumental masonary and OCR would be quicker. On the subject of speed your motto reminds me of a saying or two - but only one that isn't rude..... Time flys like an arrow - fruit flies like a banana!



jaybee -> RE: Pages that have a mind of their own! (5/3/2006 11:00:57)

Ah ha! Found it. I knew it was lurking somewhere. This is your problem.

quote:

If you specify the width for an absolutely positioned element, either explicitly via width in percents, or implicitly via left and right, the standard says that it should be computed relative to the containing block. Both Internet Explorer and Opera get this wrong, unfortunately, and use the width of the parent element as the basis for their computations. Gecko-based browsers like Mozilla and Firefox behave correctly.


As to flying bananas, it's a very long story and not at all rude but rather painful. Somewhere on this forum there is a thread all about it.



jaybee -> RE: Pages that have a mind of their own! (5/3/2006 11:03:25)

Here it is.......

Motorist's nose broken by sausage



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 11:11:03)

[sm=bowdown.gif] seems to be appropriate.

Is there a workaround that will enable me to position the image(s) correctly irrespective of browser? I'm guessing that non-Gecko browsers are absolute from TLC (Top Left Corner) of page rather than TLC of container object.

Bear in mind that I'm an utter dummy in respect of conditional code in web design (though I did write a 1 million line app in VB and support it for 12 years so the concept is understood).

I shall hunt down those bananas!

MartynB



MartynB -> RE: Pages that have a mind of their own! (5/3/2006 11:29:34)

OOOOOh! 100 posts and my signature appears!

Read about your banana and eye think it's very sad. So what you are saying is that H&S don't oblige you to wear safety goggle when attempting a fruity manoeuvre with hot coffee.

In my murky past I was a copper and was sitting in my van above the M11 at Loughton when below me an accident occurred involving, amongst other vehicles, an occupied hearse. Nobody was injured but the rear occupant of said hearse was transported through the front window - no seat, no seat belt - and into the outside lane. Sadly, the ensuing delay caused the occupant to be late to his own funeral.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125