Hi,
I am trying to add a background to a cell that contains multiple
horizontal coloured layers on top of eachother.
I managed to do this in IE, but firefox displays something very
different so I would like to know if my HTML is in error or firefox.
This is my HTML http://www.xs4all.nl/~rvanloen/example/table.html
There are two problem in firefox. The first is that the coloured divs
are not visible. The second is that the absolute div is taking 100%
width and height of the complete window, instead of the containing
block. I have set the cell to position relative so that the div would be
the containg clock. http://www.w3.org/TR/CSS21/visuren.h...opdef-position http://www.w3.org/TR/CSS21/visudet.h...-block-details
Hope that someone can tell me that my HTML/CSS is wrong and tell me why. 4 7403
Robert wrote: Hi,
I am trying to add a background to a cell that contains multiple horizontal coloured layers on top of eachother.
I managed to do this in IE, but firefox displays something very different so I would like to know if my HTML is in error or firefox.
This is my HTML
http://www.xs4all.nl/~rvanloen/example/table.html
There are two problem in firefox. The first is that the coloured divs are not visible.
That's because you have z-index:-1. Take the z-index off, and you'll
see the colours.
The second is that the absolute div is taking 100% width and height of the complete window, instead of the containing block.
That's because you gave it position:absolute, which takes it out of
the normal flow.
I have set the cell to position relative so that the div would be the containg clock.
No, it isn't the containing block, it's only the block to which it's
relatively positioned.
Why don't you just give the td a background image like so: http://locusmeus.com/test/robert.html
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Hi Els,
Els wrote: I am trying to add a background to a cell that contains multiple horizontal coloured layers on top of eachother.
There are two problem in firefox. The first is that the coloured divs are not visible.
That's because you have z-index:-1. Take the z-index off, and you'll see the colours.
Okay, but then I won't be able to see the text :)
I want to push the div's behind the text. The second is that the absolute div is taking 100% width and height of the complete window, instead of the containing block.
That's because you gave it position:absolute, which takes it out of the normal flow.
Yes, I wanted to take it out of the normal flow so I could overlay the
text on it. I have set the cell to position relative so that the div would be the containg clock.
No, it isn't the containing block, it's only the block to which it's relatively positioned.
But the W3C spec says that:
The containing block of an element is defined as follows:
(4)If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' of 'absolute',
'relative' or 'fixed', in the following way:
(4-2)not inline -> the containing block is formed by the padding edge of
the ancestor.
So the TD should be the containing block.
Right?
Why don't you just give the td a background image like so:
http://locusmeus.com/test/robert.html
Because the table is dynamically created and each cell may contain more
than 2 colours where each has a different percentage. We are actually
determining how far we can go in converting a Java swing application
into a HTML web application.
On Thu, 28 Apr 2005 16:04:49 +0200, in
comp.infosystems. www.authoring.stylesheets you wrote: Els wrote:I am trying to add a background to a cell that contains multiple horizontal coloured layers on top of eachother.
There are two problem in firefox. The first is that the coloured divs are not visible.
That's because you have z-index:-1. Take the z-index off, and you'll see the colours.
Okay, but then I won't be able to see the text :) I want to push the div's behind the text.
I guess you'll have to add z-index +1 to the text then, and give the
div's z-index 0. The second is that the absolute div is taking 100% width and height of the complete window, instead of the containing block.
That's because you gave it position:absolute, which takes it out of the normal flow.
Yes, I wanted to take it out of the normal flow so I could overlay the text on it.
I have set the cell to position relative so that the div would be the containg clock.
No, it isn't the containing block, it's only the block to which it's relatively positioned.
But the W3C spec says that: The containing block of an element is defined as follows: (4)If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way: (4-2)not inline -> the containing block is formed by the padding edge of the ancestor.
So the TD should be the containing block. Right?
Not sure - it may be called a containing block, but obviously, the
divs don't stay inside of it. Haven't done an in-depth study of it :-) Why don't you just give the td a background image like so:
http://locusmeus.com/test/robert.html
Because the table is dynamically created and each cell may contain more than 2 colours where each has a different percentage. We are actually determining how far we can go in converting a Java swing application into a HTML web application.
Okay, in that case it's more complicated.
Not impossible though - I've updated the same file: http://locusmeus.com/test/robert.html
The only drawback I can see so far is the positioning of the '333'
height wise. If the height of the cell would always be 50px, then
line-height:50px gives the number the right height. But when enlarging
the font, it doesn't stay on the same level compared to the rest of
the numbers in the cells.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
>>But the W3C spec says that: The containing block of an element is defined as follows: (4)If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way: (4-2)not inline -> the containing block is formed by the padding edge of the ancestor.
So the TD should be the containing block. Right?
Not sure - it may be called a containing block, but obviously, the divs don't stay inside of it. Haven't done an in-depth study of it :-)
They do stay inside with IE. Could it possibly be that Microsoft did
something right this time? :p
Okay, in that case it's more complicated. Not impossible though - I've updated the same file: http://locusmeus.com/test/robert.html
Ok interesting. You made the text absolute instead of the colours, so
that the text will be in front. And set the line-height so the span
would not go outside the cell. I don't see the problem when I make the
font bigger.
I don't like that I have to set the height in so many places, but it
does give some possibilities.
Thanks. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ken Kast |
last post by:
Here's my situation. I have a statically positioned table that has an image
in a cell. I also have some layers, defined by absolute-positioned DIVs for
some animation. Everything works until I...
|
by: Csaba2000 |
last post by:
Demo page at http://csaba.org/Demos/getRect.htm
One question I've seen come up multiple times is:
How can I find the abolute position of my favorite element
on the page? The standard answer is...
|
by: wls |
last post by:
I've got a problem that requires rendering DIVs at different offset
locations, and while I've got a solution that works, the absolute
positioning is working to the client window, not to the parent...
|
by: Pf |
last post by:
A piece of html code:
<table>
<tr>
<td>
<input type="text" name="myInput" onclick="myFunction(this)">
<td>
</tr>
</table>
|
by: Robert |
last post by:
Hi,
I am trying to add a background to a cell that contains multiple
horizontal coloured layers on top of eachother.
I managed to do this in IE, but firefox displays something very
different...
|
by: derelicten |
last post by:
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...
|
by: Samuel |
last post by:
Hi,
Is it possible to get absolute position of element with javascript?
e.g. I have textbox somewhere in table. Textbox relative to table cell
position is 0,0. How can I get Textbox absolute...
|
by: nino9stars |
last post by:
Hello,
I have just started messing with absolute positioning on webpages, and
it definitely let's you do some creative things. Well, after much
searching and help, I got the images I was using...
|
by: Fistro |
last post by:
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)
I've came across this CSS layout technique:...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
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: 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...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |