hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of pics is bigger then fixed space. SO I put them in a position:absolu te div and I gave a position:relati ve to the container td.
This seems to work in IE but in Firefox position is relative to the browser window, not the cell. I need a compatible solution to anchor this vertical set of pics relatively to a specific area of the layout not the general browser window sigh...
Here is the complete html code (the bold code is for what I'm referring to) and also some of the css style coding, just in case. - <style>
-
body {
-
margin: 0px 60px 0px 60px;
-
color: #000000;
-
font-size: 11 px;
-
font-family: arial ;
-
line-height:12px;
-
text-align:justify
-
}
-
-
td {
-
font-size: 11px;
-
font-family: arial ;
-
line-height:12px;
-
color:#000000;
-
font-size:11px;
-
text-align:justify;}
-
</style>
19  60359 
hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of pics is bigger then fixed space. SO I put them in a position:absolu te div and I gave a position:relati ve to the container td.
This seems to work in IE but in Firefox position is relative to the browser window, not the cell. I need a compatible solution to anchor this vertical set of pics relatively to a specific area of the layout not the general browser window sigh...
...
I too have the same bug. I tried on a simpler code and it worked in IE but not in firefox. - <html>
-
<body>
-
asdf<br>
-
asdf<br>
-
asdf<br>
-
asdf<br>
-
<table cellpadding='0' cellspacing='0'><tr><td style='position:relative;'>asdf<div style='position:absolute;left:0%;top:0%;'>qwer</div></td></tr></table>
-
</body>
-
</html>
According to http://www.w3.org/TR/2006/WD-CSS21-2...-block-details
,
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'...
I am extremely busy right now so I apologize for not being able to look at the code in depth. The problem is probably IE. IE expands containers to contain floated and absolutely positioned elements. This is incorrect behavior. But to get modern browsers to do what you want, try adding overflow:auto; to the containing element and see if that fixes it.
I'll try and look into this again later.
I am extremely busy right now so I apologize for not being able to look at the code in depth. The problem is probably IE. IE expands containers to contain floated and absolutely positioned elements. This is incorrect behavior. But to get modern browsers to do what you want, try adding overflow:auto; to the containing element and see if that fixes it.
I'll try and look into this again later.
I have similar code which Safari & IE have no trouble with - it seems to be FireFox out of line. In mine, a table with relative position contains a table with absolute postion; if you apply "top: 0px" to the latter, FireFox takes this - wrongly - to mean the top of the browser window, not the top of the containing element.
Firefox does not take it wrong but the definition from the W3C is this:
The effect of 'position:relat ive' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I think this may be because tables are not to be used for layout and positioning is a layout attribute.
I have similar code which Safari & IE have no trouble with - it seems to be FireFox out of line. In mine, a table with relative position contains a table with absolute postion; if you apply "top: 0px" to the latter, FireFox takes this - wrongly - to mean the top of the browser window, not the top of the containing element.
I have also hit this bug with firefox 2.0. An absolute div within a relative div gets the correct left but top is from the top of page? Do you know of any workaround?
Again, this is NOT a bug. This is correct behavior. If any other browser (that is, IE) does it differently, it is due to a bug in IE. Firefox is performing correctly.
Absolutely positioned elements are removed from the document flow. They position themselves relative to their parent. If a containing div is positioned relative, then the contained absolutely positioned div will position itself within that parent. HOWEVER, because the absolutely positioned element is removed from the flow, the parent div will collapse because, as far as it is concerned, it does not contain anything.
If the containing div is not positioned, then the absolutely positioned div will use the next level up parent which could be the body, in your case.
Again, this is NOT a bug. This is correct behavior. If any other browser (that is, IE) does it differently, it is due to a bug in IE. Firefox is performing correctly.
Absolutely positioned elements are removed from the document flow. They position themselves relative to their parent. If a containing div is positioned relative, then the contained absolutely positioned div will position itself within that parent. HOWEVER, because the absolutely positioned element is removed from the flow, the parent div will collapse because, as far as it is concerned, it does not contain anything.
If the containing div is not positioned, then the absolutely positioned div will use the next level up parent which could be the body, in your case.
Many thanks. Firefox may be strictly correct, but what is needed is a workaround that all browsers will accept.
The brief from my client is to position the 'Content' table (their term) in the centre of the browser window, which I have done by making a 100% w/h table with one cell set to align centre/middle. Therefore the position of the 'Content' table is undetermined by CSS.
'Content' table is set to position relative. It contains a 'Blurb' table set to position absolute.
This works (as it happens) in all browsers apart from FF, & (of course) as long as I don't try to position 'Blurb' relative to 'Content', all is well in FF too.
But what if I needed to position it (e.g.) 150 pixels from top? I did in fact try this using divs instead of tables, but this wouldn't work in IE. Since my client insists on tables I may need to have a viable method at some time in the future, & as others seem to have similar problems it might be of more than academic interest to find a fix.
Many thanks. Firefox may be strictly correct, but what is needed is a workaround that all browsers will accept.
The brief from my client is to position the 'Content' table (their term) in the centre of the browser window, which I have done by making a 100% w/h table with one cell set to align centre/middle. Therefore the position of the 'Content' table is undetermined by CSS.
'Content' table is set to position relative. It contains a 'Blurb' table set to position absolute.
This works (as it happens) in all browsers apart from FF, & (of course) as long as I don't try to position 'Blurb' relative to 'Content', all is well in FF too.
But what if I needed to position it (e.g.) 150 pixels from top? I did in fact try this using divs instead of tables, but this wouldn't work in IE. Since my client insists on tables I may need to have a viable method at some time in the future, & as others seem to have similar problems it might be of more than academic interest to find a fix.
Quick clarification: a surrounding table contains the 'Content' table (position relative) which contains the 'Blurb' table (position absolute). The question is how to position 'Blurb' in relation to 'Content', since "top=howeve r many pixels" is not dependable.
Well, there is IE and there is everyone else. It is always better to code to standards compliance than to IE because you can always adjust for IE but you can't adjust invalid code for everyone else. The problem you mention is not just Firefox but all modern browsers.
I don't recall if the table issue is still true in IE7 which brings up another point. IE7 has made a half-hearted attempt to be more standards compliant so it now performs closer to Firefox and other modern browsers but less like IE6. So now there are further 'hacks' that must be made to bring IE6 and IE7 into line.
I can't give more examples and help right now because I reformatted my computer to swap with my wife and I don't have my dev tools or other browsers available to test in. Hope to have it all back by tonight.
This is why we should never use tables for layout. You said you couldn't get divs to work in IE but there are known ways to hack IE.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Mike |
last post by:
I've been working on a pop-up menu, one of those where you mouse over
a button and a submenu pops up. Because the client wanted the menu
centered, I gave the starting point of the submenu an absolute
position, then used relative position to place the menu where I want
it beneath the buttons. The code for the menu is posted below (in
Javascript).
Although I can't get this to happen on my computer (using IE5.0, 5.5,
and Netscape 7.0), the...
|
by: Alexander Fischer |
last post by:
Hello everybody,
can someone help me with this problem:
I'm creating a page with a sidebar, and I wanted to create the sidebar as a div
which gets a "position:absolute". The problem: if the sidebar's content is
longer than the main content, my IE6 will not create a vertical scrollbar for
the page, which makes the lower part of the sidebar unreadable.
Take this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
|
by: Harald Kirsch |
last post by:
In the W3C document about CSS2, I read at
http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position
the following:
absolute
The box's position (and possibly size) is specified with the
'left', 'right', 'top', and 'bottom' properties. These properties
|
by: Peter Pfannenschmid |
last post by:
Hello experts,
I would be very grateful if you would have a look at the following
URL:
http://www.omeganet.de/test.html
The html file and the associated style have been validated
successfully by the online validators of w3.org.
|
by: Gert Brinkmann |
last post by:
Hello,
as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
absolute positioned block element is positioned relative to its parent
element. This is told in the german selfhtml reference, too:
http://de.selfhtml.org/navigation/css.htm#positionierung
In fact firefox and konqueror do position the block relativ to the window
border. This is explained here, too:
http://www.w3schools.com/dhtml/dhtml_css.asp
| | |
by: alex |
last post by:
I'm playing around with css popups a la
http://www.meyerweb.com/eric/css/edge/popups/demo.html
for here:
http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html
(css)
http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
|
by: axlq |
last post by:
I've spent most of the day struggling with what I thought would be a
trivial problem.
I have a hidden element that appears, outside of the normal flow,
when the mouse hovers over an inline element. HOWEVER, I want the
hidden element positioned at a location of my choosing relative to
that inline element.
Is this possible?
|
by: ThunderMusic |
last post by:
Hi,
I think the subject says it all...
thanks
ThunderMusic
|
by: oranoos3000 |
last post by:
hi
would you please compare while position is relative and relate that with it's ancestor position and the other sibling position , and too for while position is absolute and relate that with position it's acestor and position it's sibling?
thanks alot for your help.
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
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...
| | |
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...
|
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...
|
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...
|
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();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
