Site works in IE, fails in Firefox

[Bob]

http://www.wendybrown-barry.com/

Site is here. Created in Dreamweaver. Author added an element a while
back, and it somehow threw all of the links to the left and to the
very bottom. If you look in IE, all of the links are at the top and on
the right. He can't figure out how to fix it, and neither can I.

Any help?

 

[Ben Bacarisse]

http://www.wendybrown-barry.com/

Site is here. Created in Dreamweaver. Author added an element a while
back, and it somehow threw all of the links to the left and to the
very bottom. If you look in IE, all of the links are at the top and on
the right. He can't figure out how to fix it, and neither can I.

In my firefox it works if I make the window wide enough.

I'm pretty sure that what happened was that an image was added whose
width made the middle table so wide that there was no room for the one
on the right. Even if you fix the image (or whatever), the layout is
going to be very fragile: it's dependent on text sizes, browser window
width and so on.

Table for layout went out of style some years ago, but they did have the
advantage of being able to get round this sort of problem. If the whole
page was one table, the left and right columns would have to fit.

 

[Beauregard T. Shagnasty]

In my firefox it works if I make the window wide enough.

I'm pretty sure that what happened was that an image was added whose
width made the middle table so wide that there was no room for the one
on the right. Even if you fix the image (or whatever), the layout is
going to be very fragile: it's dependent on text sizes, browser window
width and so on.

And just about every one of those images is being resized by the HTML
height and width attributes. It makes that waaaay-too-long page jump and
jitter as it loads. Each one of the images should be resized to what the
author wants them to be. Example:

http://www.wendybrown-barry.com/images/WENDY-FLASHNEWWEB.jpg
214.33 KB (219,470 bytes)
600px × 741px (scaled to 187px × 226px)

As a bit of a test, I resized that image to 187x226 and optimized it for
web use, and reduced it from 214KB to 9KB.

 

[dorayme]

http://www.wendybrown-barry.com/

Site is here. Created in Dreamweaver. Author added an element a while
back, and it somehow threw all of the links to the left and to the
very bottom. If you look in IE, all of the links are at the top and on
the right. He can't figure out how to fix it, and neither can I.

Any help?

Good luck. This design is so awful that it might be illegal to help
you! <g>

Interestingly enough, to try to get a bit of aesthetic sanity, even if
you turn off the styles, the gaucheness remains almost wholly intact
which is telltale of one significant thing: the markup is very
purposively built to produce a certain look - never mind what! - all
on its ownsome. In other words, from the word go, the website is badly
flawed.

 

[Hot-Text]

http://www.wendybrown-barry.com/

Site is here. Created in Dreamweaver. Author added an element a while
back, and it somehow threw all of the links to the left and to the
very bottom. If you look in IE, all of the links are at the top and on
the right. He can't figure out how to fix it, and neither can I.

Any help?

<pre>


The Table with IMG Wendy Flash,
Yosemite Valley pic,
and Monarch Butterfly pic,
is where the Error at....

TABLE #A border=0 width="106%"
<< Error WebPage BODY is Default at
800Pixels...
#A width can only be 100%,
to over ride Body Default,

You need to use a Calculator,
to get the right Pixels widths,
to help over ride Body Default....

TD #1 height=250 width=190
TD #2 width=599
TD #3 width=228
190 + 599 + 228 = 1017Pixels
<< Error TABLE #A Body Default of 800Pixels
or width="1017"
All TD need a Height of 250 in them,
in the TABLE..

IMG "Wendy &amp; Flash" width=187 height=226
IMG "Yosemite Valley pic" width=583 height=228
IMG Monarch Butterfly pic" width=215 height=228


IMG Height 226 and 228 is ok for the TD is set to 250,
by Default it will move to TD Height 228,
But it would help to make TD to TD Height 228

IMG widths
width=187
width=583
width=215
= 984

Here is set to Pixels, to over ride Body Default of 800Pixels
and it can be a TABLE width="100%"
<TABLE border=0 width="100%" align=center>
Too will do the same,
if all the TD have same height in them..

<TABLE border=0 width="1017" align=center>
<TBODY>
<TR>
<TD height=250 width=190>
<DIV align=left>
<IMG alt="Wendy &amp; Flash" src="http://www.wendybrown barry.com/images/WENDY-FLASHNEWWEB.jpg" width=187 height=226>
</DIV>
</TD>
<TD height=250 width=599>
<DIV align=center>
<IMG border=0 alt="Yosemite Valley pic" src="http://www.wendybrown-barry.com/images/yosemiteCROPWEB.jpg" width=583 height=228>
</DIV>
</TD>
<TD height=250 width=228>
<IMG border=0 alt="Monarch Butterfly pic" src="http://www.wendybrown-barry.com/images/monarch1EDITWEB.jpg" width=215 height=228>
</TD>
</TR>
</TBODY>
</TABLE>



You need to do all webpage,
TABLE that pass 100 to width="100%",
or use a Calculator to get the right,
Pixels Widths in the TABLE
</pre>

 

[Hot-Text]

Bob
I see height=228> it here[[[]]]


<table width="100%" border="0" align="center">
<tr>
<td width="190" height="250"><div align="left"><img src="/images/WENDY-FLASHNEWWEB.jpg" alt="Wendy & Flash" width="187"
height="226"></div></td>
<td width="599"> [[[height="250">]]] <div align="center"><img src="/images/yosemiteCROPWEB.jpg" alt="Yosemite Valley pic"
width="583" height="228" border="0"></div></td>
<td width="228" height="250"><img src="/images/monarch1EDITWEB.jpg" alt="Monarch Butterfly pic" width="215" height="228"
border="0"></td>
</tr>
</table>

 

[Hot-Text]

Ben Bacarisse wrote:

Beauregard T. Shagnasty Right like always

http://www.wendybrown-barry.com/images/WENDY-FLASHNEWWEB.jpg
214.33 KB (219,470 bytes)
600px × 741px (scaled to 187px × 226px)

As a bit of a test, I resized that image to 187x226 and optimized it for
web use, and reduced it from 214KB to 9KB.

here Needs
< http://www.irfanview.com/ >
too do the residing and reduced for him..

< http://hot-text.ath.cx:81/Temp-Folder_Deleted-Files-in_24\WENDY-FLASHNEWWEB.jpg >
183 X 226 40.3 KB (41,269 bytes)
< http://hot-text.ath.cx:81/Temp-Folder_Deleted-Files-in_24\yosemiteCROPWEB.jpg >
550 x 226 Pixels (2.43) 100 KB (102,409 bytes)

he need to Keep the height=226 at 226 Pixels

and he need put them is Thumbnails Folder name tnails...
http://www.wendybrown-barry.com/images/tnails/WENDY-FLASHNEWWEB.jpg
And all use Save-As

If he need help with irfanview..
I know we can help him
for I do not have time to do all the Images for him...

 

[Bob]

<pre>

The Table with IMG Wendy Flash,
Yosemite Valley pic,
and Monarch Butterfly pic,
is where the Error at....

TABLE #A border=0 width="106%"
<< Error WebPage BODY is Default at
800Pixels...
#A width can only be 100%,
to over ride Body Default,

You need to use a Calculator,
to get the right Pixels widths,
to help over ride Body Default....

TD #1 height=250 width=190
TD #2 width=599
TD #3 width=228
190 + 599 + 228 = 1017Pixels
<< Error TABLE #A Body Default of 800Pixels
or width="1017"
All TD need a Height of 250 in them,
in the TABLE..

IMG "Wendy &amp; Flash" width=187 height=226
IMG "Yosemite Valley pic" width=583 height=228
IMG Monarch Butterfly pic" width=215 height=228

IMG Height 226 and 228 is ok for the TD is set to 250,
by Default it will move to TD Height 228,
But it would help to make TD to TD Height 228

IMG widths
width=187
width=583
width=215
= 984

Here is set to Pixels, to over ride Body Default of 800Pixels
and it can be a TABLE width="100%"
<TABLE border=0 width="100%" align=center>
Too will do the same,
if all the TD have same height in them..

<TABLE border=0 width="1017" align=center>
<TBODY>
<TR>
<TD height=250 width=190>
<DIV align=left>
<IMG alt="Wendy &amp; Flash" src="http://www.wendybrownbarry.com/images/WENDY-FLASHNEWWEB.jpg" width=187 height=226>
</DIV>
</TD>
<TD height=250 width=599>
<DIV align=center>
<IMG border=0 alt="Yosemite Valley pic" src="http://www.wendybrown-barry.com/images/yosemiteCROPWEB.jpg" width=583 height=228>
</DIV>
</TD>
<TD height=250 width=228>
<IMG border=0 alt="Monarch Butterfly pic" src="http://www.wendybrown-barry.com/images/monarch1EDITWEB.jpg" width=215 height=228>
</TD>
</TR>
</TBODY>
</TABLE>

You need to do all webpage,
TABLE that pass 100 to width="100%",
or use a Calculator to get the right,
Pixels Widths in the TABLE
</pre>

Hi thx for this. We worked on it a lot. We got it to where the links
now are on the right properly in FF 8, but not in the latest version
of FF. In the latest version, all they did is move to the middle at
the bottom. My friend is about ready to give up.

 

[Hot-Text]

Hi thx for this. We worked on it a lot. We got it to where the links
now are on the right properly in FF 8, but not in the latest version
of FF. In the latest version, all they did is move to the middle at
the bottom. My friend is about ready to give up.

I look at it with IE8 see you was working on it at the time,
it look good!
Opera 11.61 Show loading but look good..


Firefox 8.0.1.4341 Look good, same as IE8 and Opera 11.61,
But like with Opera Show

A old Netscape® Communicator 4.61
Look at it in Communicator Editor
is see 7 main Tables

for Netscape® Communicator is just a good old tool,

 

[Ben Bacarisse]

[/QUOTE]

Hi thx for this. We worked on it a lot. We got it to where the links
now are on the right properly in FF 8, but not in the latest version
of FF. In the latest version, all they did is move to the middle at
the bottom. My friend is about ready to give up.

It seems to me that where the links are will depend on things like the
windows width and font sizes. These may vary from version to version,
but that's not the problem. The problem is that the design can't work
as is for all window widths and font sizes. I can make the links move
to the "right" place just my making the window a little wider or by
making the text a little smaller.

I don't think there is a real solution other than to re-design the page.
You have three tables that can't shrink because of all the fixed sizes
you are using, so there will always be cases where they don't fit across
the browser window. The old solution was to put tables in tables and I
image that would work (i.e. your three main tables become cells in a
giant on-row table) but that's a terrible design.

How hard would it be to start over a use a modern three-column flexible
layout?

 

[MG]

It seems to me that where the links are will depend on things like the
windows width and font sizes. These may vary from version to version,
but that's not the problem. The problem is that the design can't work
as is for all window widths and font sizes. I can make the links move
to the "right" place just my making the window a little wider or by
making the text a little smaller.

I don't think there is a real solution other than to re-design the page.
You have three tables that can't shrink because of all the fixed sizes
you are using, so there will always be cases where they don't fit across
the browser window. The old solution was to put tables in tables and I
image that would work (i.e. your three main tables become cells in a
giant on-row table) but that's a terrible design.

How hard would it be to start over a use a modern three-column flexible
layout?

If you do start over, I would suggest breaking up the page into multiple
pages. That is one very long page!

Google for "html 3 column layout".

And don't forget Beauregard's post on resizing photos for web use.

 

[dorayme]

The old solution was to put tables in tables and I
image that would work (i.e. your three main tables become cells in a
giant on-row table) but that's a terrible design.

How hard would it be to start over a use a modern three-column flexible
layout?

Looking at the site in question, it is not hard to guess that its
maker would find css columning a challenge.

There is something in between the idea of a bad three col table and a
good three column CSS layout: a well made table that is flexible in
many if not all ways. If you are going to use tables for layout, at
least do it well and do it in style. It is hard to be motivated to
show anyone how, but removing so many widths would help.

 

[Bob]

Looking at the site in question, it is not hard to guess that its
maker would find css columning a challenge.

There is something in between the idea of a bad three col table and a
good three column CSS layout: a well made table that is flexible in
many if not all ways. If you are going to use tables for layout, at
least do it well and do it in style. It is hard to be motivated to
show anyone how, but removing so many widths would help.

What do you put instead of widths in the tables?

 

[dorayme]

What do you put instead of widths in the tables?

Must there always be an instead? If there always has to be, maybe
having an ice-cream would be the best sometimes.

A table and its cells too will shrink or expand to fit its contents in
rational and natural fashion, no absolute need to tell it what to do.
But sometimes a few widths are needed, *few* being the key concept.

<table>
<tr>
<td><td>
<td></td>
<td></td>
</tr>
<table>

is a three column layout, the cells ready to receive your stuff.

If we really want it to be as wide as the browser width, then we style
the table element to be 100%:

Let's say it is some navigation on the left, lots of content in the
middle and a third col for features, ads whatever. Lets say the nav is
such that no item ever needs more than 12em. Let's say the features
column is similar.

Now, about the middle column, no need to set a width, the browser will
expand the column to be between the first and third cell. It is
flexible.

<table class="layout">
<tr>
<td class="nav"><td>
<td class="content"></td>
<td class="features"></td>
</tr>
<table>

The CSS:

..layout {width: 100%;}
..nav, .features {width: 12em;}

But enough is enough, try not to have any more tables in all of this
(unless you need tables for their more legitimate use, to show
relationships between lists like in a table of products, prices,
availability).

An html table is a *very easy* and *sturdy cross browser* three column
set up and would be easy for you or your website maker to understand.
The point is that the simplest widths to the most overall structure is
enough to get a sturdy layout going and unlikely to break. The nav
links will stay on the left, no sweat.

If you want this structural table to be 100% high too, you might try
with:

html, body, .layout {height: 100%; margin: 0;}
..layout {width: 100%; }
..nav, .features {width: 12em;}

 

[Jonathan N. Little]

all we a Width in tables,
Just not not go pass 100%

Well it is not illegal, but there are consequences for going over 100%
in the form of a scrollbar or clipped content.

For in PX it's W 800px X H 600px,
or W 1024px X H 768px
< http://www.w3schools.com/browsers/browsers_display.asp >

Sorry I have to rebut this bogosity, they are collecting the display
screen resolutions not what the browser canvas size is being used. I
have two monitors going here, do you want a guess what my browser window
width is at? With large widescreen monitors becoming the norm, the
maximized browser is less common and now visitors can be coming to your
site using 2" to 27" displays. It is a bad idea to design for a specific
resolution.

You see the border=1 is just to help when editing,
you have to make them border=0


<!-- Start Table #1 -->

<!-- End Table #1 -->

Just underscores why the mid-90's nested tables layout was a true
nightmare to maintain!