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:absolute div and I gave a position:relative 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  60291 
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:absolute div and I gave a position:relative 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:relative' 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=however 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.
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.
Actually, it is just FF (I use Safari by default & of course test in many others), but that doesn't really matter. My client is adamant r.e. tables, but if they were not I would avoid this trouble by using a method such as this:
http://www.w3.org/Style/Examples/007/center.html
...hopefully that may help others with similar troubles, but it would still be nice to have a workaround (esp. since tables are probably about to make a spectacular come-back!).
Maybe you can leave this link on their desktop "by accident".
Always remember this: Firefox and Opera are the two most standards compliant browsers in the world right now. Microsoft has "stated" they want to be more standards compliant (as IEs market share is slowly dwindling). Those who designed with IE6 in mind are now screwed when IE7 came out because it is more like Firefox and Opera.
The whole point of that is, design for standards in a better standards compliant browser and your code will more likely work everywhere with fewer tweaks for bad browsers, ie, Internet Explorer.
...and never, ever use tables for layout.
Maybe you can leave this link on their desktop "by accident".
Always remember this: Firefox and Opera are the two most standards compliant browsers in the world right now. Microsoft has "stated" they want to be more standards compliant (as IEs market share is slowly dwindling). Those who designed with IE6 in mind are now screwed when IE7 came out because it is more like Firefox and Opera.
The whole point of that is, design for standards in a better standards compliant browser and your code will more likely work everywhere with fewer tweaks for bad browsers, ie, Internet Explorer.
...and never, ever use tables for layout.
You seem to think I prefer IE... nothing could be further from the truth! I am also keen to force compliance upon recalcitrant companies, but sometimes one has to respect one's clients' wishes - & if they want to be able to 're-use' their website design for email use (or at any rate, believe that they could do so if they wished), then in the light of recent developments you can understand their concern.
So if by any chance you should happen to think of a workaround for tables, please LMK... in the meantime, I am trying to convince them that they need two solutions, not one. Which is no less than the truth, albeit inconvenient (especially when they got the idea from other people seemingly doing what they want done for themselves).
Try to add float:left or display:block to td. Then you should be able to use position:relative.
<TD style="position:relative" COLSPAN=2 ROWSPAN=6 background="images/_02.jpg" WIDTH=191> <div style="position:absolute;width:100px;left:60px;top :-20px;z-index:1"> <img src="images/r.jpg"><br><br> <img src="images/e.jpg"><bR><br> <img src="images/e.jpg"><br><br> <img src="images/n.jpg" height=90 width=76>
imo you should make one main table, put the table into the div's make the div relative and the rest u want to position make absolute for example:
<div style="position:relative; the rest of style"><centre><table style="your style"><tr><td><img style="position: absolute; the rest of style" bla bla></td></tr></table></center> and the rest of your page</div>
try this.
imo you should make one main table, put the table into the div's make the div relative and the rest u want to position make absolute for example:
<div style="position:relative; the rest of style"><centre><table style="your style"><tr><td><img style="position: absolute; the rest of style" bla bla></td></tr></table></center> and the rest of your page</div>
try this.
Not only is your solution antiquated, it's on a post from almost 2 years ago. Never use tables for layout.
I know this post is quite old. or may be too old. But it helped me. So thanks to everyone who posted any solution.
Here is my problem + solution:
I had a div as my outer panel. and there were 4 divs, which i placed with absolute positioning. I was implementing something like silverlight drag dock panel, so i needed to place my divs with absolute position only. In all browsers, my 4 inner divs were placed inside the main outer div, I mean my top:0 and left:0 was top left corner of my outer div. But in firefox it was top left corner of my main whole page. [And it was only in firefox, in chrome opera and IE, it was working as i needed].
So after reading a comment
"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."
I just added "display: block;position:relative;" to my outer div. And now in all browsers it is working as required top:0,left:0 is outer div top left corner.
It helped me too..
I was migrating my page from <table> based layout to div/css based one. Now with IE8 supporting display:table it was easy replace <tr> with a div with style display: table-cell; and <td> with another div with display: table-row;.
But I faced the problem in this page in a cell where I have to place two elements, one text anchored to left side, one text box anchored to right. I used position:absolute;right/left=0, but it was not working in Firefox, but working in IE. FInally I saw majik's
Try to add float:left or display:block to td.
response, and it worked.. I removed position:absolute now, works fine in both IE8 and FF
Brilliant thanks! This was still relevant for me and your solution worked a treat. @Saeed Akhtar
Thanks
Was worth it to read all until the end
Help me to I also added "display: block;position:relative;" to my outer containter.
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...
|
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...
|
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...
|
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...
|
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...
|
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)...
|
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...
|
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...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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,...
|
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...
| |
