Help with table width and CSS relative positioning

Stephen Weatherly

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="transparen t-gif" src="transparen t.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

Subscribe Reply

7748

s_m_b

Stephen Weatherly <st************ *@NOSPAMyahoo.c om> 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="transparen t-gif" src="transparen t.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

Stephen Weatherly

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="transparen t-gif" src="transparen t.gif"/>
</td>
</tr>
</table>
</body>
</html>

Steve

s_m_b wrote:

Stephen Weatherly <st************ *@NOSPAMyahoo.c om> 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="transparen t-gif" src="transparen t.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
alternative s? 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

Similar topics

2069

Table width in column div

by: David & Angela Ehmer | last post by:

I am using a table to display forum posts at http://www.acpchnqld.org.au/forum/forum.php The table is contained in the left column of the page in a div with the following ID #leftcolumn { position: relative; border:1px solid #000; background-color : white;

HTML / CSS

1691

Problem with relative positioning in Netscape.

by: miked | last post by:

Hi, I'm using relative positioning, and trying to shift the position of two gifs used to link to other pages on my site. The end result is fine in IE and Opera (the link gifs move to the required position), but doesn't seem to work in Netscape. The code I'm using is: A.1 {position: relative; left: 20px; top:25px} A.26 {position: relative; left: 10px; top:50px}

HTML / CSS

42519

Z-Index not working with Relative Positioning

by: Asad | last post by:

Hi, I am basically trying to accomplish drop down menus for navigation on a site. And I'm pretty much done except I am having one problem. The z-index is not working with relative positioning! Basically I have a page such as this: http://members.rogers.com/asadkhan2/prob2.jpg

HTML / CSS

1722

Relative positioning

by: David Dorward | last post by:

I'm trying to come up with a list of uses for relative positioning. Can anybody think of any I've missed? * Establishing a local positioning context on an element for the benefit of its absolutely positioned descendents. * Overlapping a nearby element (but why not just use negative margins?) * Cute, but probably useless, animations involving an element flying into and/or out of its normal position with JavaScript.

HTML / CSS

3045

IE 6 has trouble with relative positioning?

by: George Hester | last post by:

http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the scroll right. Both of these issues occur in IE 6 but not in IE 5.5. You can get the horizontal scroll bar for the window by increasing the size of the image wider than the display area of the window. Assumes 600x800 default display size. Thanks...

Javascript

1519

relative positioning of the elements

by: abhishek11 | last post by:

Hi all i have two image tags and when i try to render them using dive tag, lot of space remains between two images. To position them correctly , i used relative positiong for the second div tag. But then next whatever i write starts from the position it would have startde without relative positioning. In a way then i need to relatively position all other elements which is not possible in my case as the same css has to be used for number of...

HTML / CSS

8979

relative positioning inside absolute positioned element - who is right?

by: mikewse | last post by:

I have a strange problem where it seems IE is doing the correct layout but Firefox and Safari isn't. I think I'm probably wrong, and there is something in the standards that say behaviour should be like Firefox does, but could someone tell me what is right? In the below code I have element trees with three DIVs; the outer DIV establishes a positioning context and the "middle" DIV uses absolute positioning to put its top left corner in the...

HTML / CSS

3624

Relative Positioning and Browser Compatibility

by: LayneMitch | last post by:

Hello everyone. I'm designing a site for a friend of mine and I'm having a few issues. First off, I'm noticing that there is a difference between the default line- heights of IE and Mozilla/Firefox. I've tried different things like setting every line-height to zero 'px' by * {line-height: 0px;}, and it just messed things up even further as you will see if you click on the link below. Before the adjustments this morning, everything was...

HTML / CSS

3315

how to collapse reserved space with relative positioning

by: redsasquatch | last post by:

I am working on a site where I've used relative positioning to place some pictures and frame boxes. However with relative spacing there is the reserve space where the object would naturally appear. I am looking for help to find out how to collapse this reserved space as to not create a blank area on my web page.

HTML / CSS

8946

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9447

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9307

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9235

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8186

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6735

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6031

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4809

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2180

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General