relative image sizing not working

[Doug Brett-Matthewson]

I'm sure this is a bit of a newbie quiz, but I've scoured the web for a fix,
can't find one and it's got me tearing my hair out, so please bear with
me... I'm using a table to organise images onto a page, and using relative
sizing to make sure that the images always take up the same proportion of
the screen... looks great in the FP design (normal) view, but when I preview
the page either in FP or IE, the images stretch back to their full size and
throw the whole thing out of whack... here's the html

<table border="1" cellspacing="1" width="100%">
<tr>
<td width="2%">&nbsp;</td>
<td width="2%" style="border-left: 2px solid #808080">&nbsp;</td>
<td width="15%"><img src="images/bishops_cleeve_pen.jpg"
width="100%"></td>
<td width="2%" style="border-right: 2px solid #808080">&nbsp;</td>
<td width="2%">&nbsp;</td>
<td width="77%">&nbsp;</td>
</tr>
</table>

As I say, in the FP design window, that looks great... the table takes 100%
of the screen, whatever resolution, the third cell takes up 15% of the width
of the row, and the image takes up 100% of the width of the cell. Preview
in browser and it goes doolally. Any helpful hints?

Doug

 

[Stefan B Rusynko]

Browsers do not support image % sizing well at all

PS to keep your other cells from collapsing always add at least 2 &nbsp; (&nbsp;&nbsp or a transparent .gif

--



| I'm sure this is a bit of a newbie quiz, but I've scoured the web for a fix,
| can't find one and it's got me tearing my hair out, so please bear with
| me... I'm using a table to organise images onto a page, and using relative
| sizing to make sure that the images always take up the same proportion of
| the screen... looks great in the FP design (normal) view, but when I preview
| the page either in FP or IE, the images stretch back to their full size and
| throw the whole thing out of whack... here's the html
|
| <table border="1" cellspacing="1" width="100%">
| <tr>
| <td width="2%">&nbsp;</td>
| <td width="2%" style="border-left: 2px solid #808080">&nbsp;</td>
| <td width="15%"><img src="images/bishops_cleeve_pen.jpg"
| width="100%"></td>
| <td width="2%" style="border-right: 2px solid #808080">&nbsp;</td>
| <td width="2%">&nbsp;</td>
| <td width="77%">&nbsp;</td>
| </tr>
| </table>
|
| As I say, in the FP design window, that looks great... the table takes 100%
| of the screen, whatever resolution, the third cell takes up 15% of the width
| of the row, and the image takes up 100% of the width of the cell. Preview
| in browser and it goes doolally. Any helpful hints?
|
| Doug
|
|

 

[Doug Brett-Matthewson]

cheers... that about gels with what I'd found, that it just didn't work... I
thought either I was missing something really obvious and embarrassing, or
the feature simply wasn't there. I'd thought about reading off the client's
browser resolution when they visit the page, and sizing the pictures
absolutely based on that... is that my best way forward?

Browsers do not support image % sizing well at all

PS to keep your other cells from collapsing always add at least 2 &nbsp;

(&nbsp;&nbsp or a transparent .gif

--



"Doug Brett-Matthewson" <[email protected]> wrote in

message news:[email protected]...

 

[Steve Easton]

Try setting the image width at 80% instead of
100% . If both the table and the image are set at 100%
the image will consume 100% of whatever the table
determines the resolution is.

--
95isalive
This site is best viewed..................
...............................with a computer
message I'm sure this is a bit of a newbie quiz, but I've scoured the web for a fix,
can't find one and it's got me tearing my hair out, so please bear with
me... I'm using a table to organise images onto a page, and using relative
sizing to make sure that the images always take up the same proportion of
the screen... looks great in the FP design (normal) view, but when I preview
the page either in FP or IE, the images stretch back to their full size and
throw the whole thing out of whack... here's the html

<table border="1" cellspacing="1" width="100%">
<tr>
<td width="2%">&nbsp;</td>
<td width="2%" style="border-left: 2px solid #808080">&nbsp;</td>
<td width="15%"><img src="images/bishops_cleeve_pen.jpg"
width="100%"></td>
<td width="2%" style="border-right: 2px solid #808080">&nbsp;</td>
<td width="2%">&nbsp;</td>
<td width="77%">&nbsp;</td>
</tr>
</table>

As I say, in the FP design window, that looks great... the table takes 100%
of the screen, whatever resolution, the third cell takes up 15% of the width
of the row, and the image takes up 100% of the width of the cell. Preview
in browser and it goes doolally. Any helpful hints?

Doug

 

[Steve Easton]

Is this anything like what you're trying to do??
http://www.95isalive.com/test/


--
95isalive
This site is best viewed..................
...............................with a computer

message OK, tried that... what happens now is:
.. in the Frontpage design window, the column still occupies 15% of the width
of the table, but the graphic only occupies 80% of the width of the column
(i.e. there's whitespace down the right hand side of the graphic)
.. in the Frontpage preview window, and when previewing in IE, the column
stays wide enough to accommodate the graphic at full size (i.e. it ignores
the instruction to scale the column to 15% of the available table width),
but the graphic itself only takes up 80% of that column.

What seems to be happening is that unless the contents of the <img> tag are
given an absolute size in pixels, IE takes the width of the column from the
full size of the specified graphic, regardless of any instruction to scale
the column relative to the table. The instruction to scale the graphic to
x% of the width of the table cell is working fine, it's just that by the
time that's done, the column is already the wrong width.

I guess what's really energising me is that the Frontpage design window
looks just fine, the way I want it... if Frontpage can get the display
right, why the heck can't IE? :-s

 

[Doug Brett-Matthewson]

a revelation... that's pretty much spot on, provided I view it on my
web-browsing machine... when I drop that document onto my development
machine (which is networked to this one, but doesn't have its own live web
connection), I get the same problems as before... points I guess to a
problem in the setup of the dev. machine... could be that my copy of IE is
up the creek through not receiving automatic updates... could be a problem
caused by viewing the page on the same machine that's serving it out... not
sure. but it looks like the problem is at least partially outside the HTML,
anyway... thanks for taking the time to help me sort this out!

 

[Stefan B Rusynko]

But it doesn't work in NN4.79 & NN6.2 (top image does not appear at all and/or table is sized to the text height)

--



| a revelation... that's pretty much spot on, provided I view it on my
| web-browsing machine... when I drop that document onto my development
| machine (which is networked to this one, but doesn't have its own live web
| connection), I get the same problems as before... points I guess to a
| problem in the setup of the dev. machine... could be that my copy of IE is
| up the creek through not receiving automatic updates... could be a problem
| caused by viewing the page on the same machine that's serving it out... not
| sure. but it looks like the problem is at least partially outside the HTML,
| anyway... thanks for taking the time to help me sort this out!
|
| | > Is this anything like what you're trying to do??
| > http://www.95isalive.com/test/
| >
| >
| > --
| > 95isalive
| > This site is best viewed..................
| > ..............................with a computer
| >
| > message | > OK, tried that... what happens now is:
| > . in the Frontpage design window, the column still occupies 15% of the
| width
| > of the table, but the graphic only occupies 80% of the width of the column
| > (i.e. there's whitespace down the right hand side of the graphic)
| > . in the Frontpage preview window, and when previewing in IE, the column
| > stays wide enough to accommodate the graphic at full size (i.e. it ignores
| > the instruction to scale the column to 15% of the available table width),
| > but the graphic itself only takes up 80% of that column.
| >
| > What seems to be happening is that unless the contents of the <img> tag
| are
| > given an absolute size in pixels, IE takes the width of the column from
| the
| > full size of the specified graphic, regardless of any instruction to scale
| > the column relative to the table. The instruction to scale the graphic to
| > x% of the width of the table cell is working fine, it's just that by the
| > time that's done, the column is already the wrong width.
| >
| > I guess what's really energising me is that the Frontpage design window
| > looks just fine, the way I want it... if Frontpage can get the display
| > right, why the heck can't IE? :-s
| >
| >
| > | > > Try setting the image width at 80% instead of
| > > 100% . If both the table and the image are set at 100%
| > > the image will consume 100% of whatever the table
| > > determines the resolution is.
| > >
| > > --
| > > 95isalive
| > > This site is best viewed..................
| > > ..............................with a computer
| > > message | > > I'm sure this is a bit of a newbie quiz, but I've scoured the web for a
| > fix,
| > > can't find one and it's got me tearing my hair out, so please bear with
| > > me... I'm using a table to organise images onto a page, and using
| relative
| > > sizing to make sure that the images always take up the same proportion
| of
| > > the screen... looks great in the FP design (normal) view, but when I
| > preview
| > > the page either in FP or IE, the images stretch back to their full size
| > and
| > > throw the whole thing out of whack... here's the html
| > >
| > > <table border="1" cellspacing="1" width="100%">
| > > <tr>
| > > <td width="2%">&nbsp;</td>
| > > <td width="2%" style="border-left: 2px solid #808080">&nbsp;</td>
| > > <td width="15%"><img src="images/bishops_cleeve_pen.jpg"
| > > width="100%"></td>
| > > <td width="2%" style="border-right: 2px solid #808080">&nbsp;</td>
| > > <td width="2%">&nbsp;</td>
| > > <td width="77%">&nbsp;</td>
| > > </tr>
| > > </table>
| > >
| > > As I say, in the FP design window, that looks great... the table takes
| > 100%
| > > of the screen, whatever resolution, the third cell takes up 15% of the
| > width
| > > of the row, and the image takes up 100% of the width of the cell.
| Preview
| > > in browser and it goes doolally. Any helpful hints?
| > >
| > > Doug
| > >
| > >
| > >
| >
| >
| >
|
|