By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,530 Members | 2,181 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,530 IT Pros & Developers. It's quick & easy.

Help with table width and CSS relative positioning

P: n/a
Could anyone please help me with a problem I am having with my table
widths???

If I have 2 images within a td tag, but using CSS relative positioning I
position one over the top of the second (I am placing a transparent gif
over the top of a normal gif) then the width of my table is large enough
to accommodate both images side by side

My browsers (both IE ad Firefox) do not appear take into account the
relative positioning of my transparent gif (i.e. it only needs enough
space for one gif as the other sits on top of it).

As an example try the following:
<html>
<body>
<table border="1">
<tr>
<td>
<img height="50" width="200" alt="real-gif" src="real.gif"/>
<img height="50" width="200" style="position:relative;
left:-100px;" alt="transparent-gif" src="transparent.gif"/>
</td>
</tr>
</body>
</html>

Both images are 200 pixels wide but the second is moved 100 pixels left,
therefore the total width of the table required is 300 pixels. However,
as can be seen in a browser the table width is 400 wide, enough to
accommodate both images side by side.

Despite numerous attempts I cannot seem to make my browser realise that
it does not need all of the space due to one image having been
relatively positioned.

Could anyone please shed any light onto this, and solutions, any
alternatives? I did try adding the transparent image outside of the
table and them moving it into the correct place in Java script however,
the browser still leaves the required space at the position in the
document that I originally place the image.

Thank you to anyone who replies,
Stephen Weatherly
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Stephen Weatherly <st*************@NOSPAMyahoo.com> wrote in
news:Zv***************@newsfe5-gui.ntli.net:

bit lost on what you're trying for here. The position attrib offsets the
tag relative to where it should be, so with 200px width images they will
remain offset; but you've neither closed the table tag nor given it a
px width. Hardly surprising the browsers are having a hard time.
Could anyone please help me with a problem I am having with my table
widths???

If I have 2 images within a td tag, but using CSS relative positioning
I position one over the top of the second (I am placing a transparent
gif over the top of a normal gif) then the width of my table is large
enough to accommodate both images side by side

My browsers (both IE ad Firefox) do not appear take into account the
relative positioning of my transparent gif (i.e. it only needs enough
space for one gif as the other sits on top of it).

As an example try the following:
<html>
<body>
<table border="1">
<tr>
<td>
<img height="50" width="200" alt="real-gif"
src="real.gif"/> <img height="50" width="200"
style="position:relative;
left:-100px;" alt="transparent-gif" src="transparent.gif"/>
</td>
</tr>
</body>
</html>

Both images are 200 pixels wide but the second is moved 100 pixels
left, therefore the total width of the table required is 300 pixels.
However, as can be seen in a browser the table width is 400 wide,
enough to accommodate both images side by side.

Despite numerous attempts I cannot seem to make my browser realise
that it does not need all of the space due to one image having been
relatively positioned.

Could anyone please shed any light onto this, and solutions, any
alternatives? I did try adding the transparent image outside of the
table and them moving it into the correct place in Java script
however, the browser still leaves the required space at the position
in the document that I originally place the image.

Thank you to anyone who replies,
Stephen Weatherly


Jul 20 '05 #2

P: n/a
You are of course correct, my html does not close the table tag, this
example was quickly typed to demonstrate my point. Even with the close
table tag and a table width set I cannot get browser to display a table
of the correct width.

Basically all I want is to overlay a transparent image on top of another
image which resides within a table. The problem is that once I place 2
images inside the td tag of the table the table width resizes to
accommodate both images. I realise that by using relative positions this
moves the image, and indeed, this is what I am using it for, to place
the transparent image on top of the real one. My point is that the table
therefore does not need to be as wide. As one image is now sat on top of
the second the table only needs to be the width of one image. Running
the example code shows that the table width is too wide.

<html>
<body>
<table border="1" width="420">
<tr>
<td>
<img height="50" width="200" alt="real-gif"
src="real.gif"/> <img height="50" width="200"
style="position:relative; left:-100px;"
alt="transparent-gif" src="transparent.gif"/>
</td>
</tr>
</table>
</body>
</html>

Steve

s_m_b wrote:
Stephen Weatherly <st*************@NOSPAMyahoo.com> wrote in
news:Zv***************@newsfe5-gui.ntli.net:

bit lost on what you're trying for here. The position attrib offsets the
tag relative to where it should be, so with 200px width images they will
remain offset; but you've neither closed the table tag nor given it a
px width. Hardly surprising the browsers are having a hard time.

Could anyone please help me with a problem I am having with my table
widths???

If I have 2 images within a td tag, but using CSS relative positioning
I position one over the top of the second (I am placing a transparent
gif over the top of a normal gif) then the width of my table is large
enough to accommodate both images side by side

My browsers (both IE ad Firefox) do not appear take into account the
relative positioning of my transparent gif (i.e. it only needs enough
space for one gif as the other sits on top of it).

As an example try the following:
<html>
<body>
<table border="1">
<tr>
<td>
<img height="50" width="200" alt="real-gif"
src="real.gif"/> <img height="50" width="200"
style="position:relative;
left:-100px;" alt="transparent-gif" src="transparent.gif"/>
</td>
</tr>
</body>
</html>

Both images are 200 pixels wide but the second is moved 100 pixels
left, therefore the total width of the table required is 300 pixels.
However, as can be seen in a browser the table width is 400 wide,
enough to accommodate both images side by side.

Despite numerous attempts I cannot seem to make my browser realise
that it does not need all of the space due to one image having been
relatively positioned.

Could anyone please shed any light onto this, and solutions, any
alternatives? I did try adding the transparent image outside of the
table and them moving it into the correct place in Java script
however, the browser still leaves the required space at the position
in the document that I originally place the image.

Thank you to anyone who replies,
Stephen Weatherly


Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.