Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Child TABLE, width:100%

Reply
Thread Tools

Child TABLE, width:100%

 
 
Oli Filth
Guest
Posts: n/a
 
      06-11-2005
Hi,

I know this is a common problem (I've been looking at Google results for
an hour!!), but in this case I can't find a solution.

Please have a look at this test page: http://olifilth.co.uk/01.html

There are three DIVs (blue) with absolute positioning. The central DIV
contains a TABLE (pink) with CSS styling of width: 100%.

In Firefox, it does what one would expect, i.e. the central DIV falls
between the ones on either side according to the CSS positioning, and
the child TABLE expands to fill 100% of this DIV's width.

However in IE (6), the central DIV flows off the right-hand side of the
page, because IE decides to (incorrectly) use the viewport as its
reference for TABLE percentage measurements.

I've read various things saying that to fix this, one should wrap the
TABLE in a <DIV width="100%"> or <DIV style="width: 100%">, however in
this case, neither seems to solve it.

Any ideas?


--
Oli
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      06-11-2005
Oli Filth wrote:

> Please have a look at this test page: http://olifilth.co.uk/01.html


> In Firefox, it does what one would expect, i.e. the central DIV falls
> between the ones on either side according to the CSS positioning, and
> the child TABLE expands to fill 100% of this DIV's width.
>
> However in IE (6), the central DIV flows off the right-hand side of the
> page, because IE decides to (incorrectly) use the viewport as its
> reference for TABLE percentage measurements.


> Any ideas?


Don't use position:absolute for the middle container, but use margins
instead:

#listing
{
margin-left: 250px;
margin-right: 250px;
}

tested in IE6, Opera8 and FF1.0.4.
IE5.0 needs a width:100% on the div#listing.
Can't have that in the other browsers though, so:

#listing
{
margin-left: 250px;
margin-right: 250px;
width:100%;
w\idth:auto; /* sets width back to auto for modern browsers */
}



--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: The Rolling Stones - Emotional Rescue
 
Reply With Quote
 
 
 
 
Oli Filth
Guest
Posts: n/a
 
      06-11-2005
Els said the following on 11/06/2005 20:52:
> Oli Filth wrote:
>
>
>>Please have a look at this test page: http://olifilth.co.uk/01.html

>
>
>>In Firefox, it does what one would expect, i.e. the central DIV falls
>>between the ones on either side according to the CSS positioning, and
>>the child TABLE expands to fill 100% of this DIV's width.
>>
>>However in IE (6), the central DIV flows off the right-hand side of the
>>page, because IE decides to (incorrectly) use the viewport as its
>>reference for TABLE percentage measurements.

>
>
>>Any ideas?

>
>
> Don't use position:absolute for the middle container, but use margins
> instead:
>
> #listing
> {
> margin-left: 250px;
> margin-right: 250px;
> }
>
> tested in IE6, Opera8 and FF1.0.4.


Excellent, that does fix it! Cheers.


--
Oli
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-11-2005
>http://olifilth.co.uk/01.html
>
> There are three DIVs (blue) with absolute positioning. The central DIV
> contains a TABLE (pink) with CSS styling of width: 100%.
>
> In Firefox, it does what one would expect, i.e. the central DIV falls
> between the ones on either side according to the CSS positioning, and
> the child TABLE expands to fill 100% of this DIV's width.
>
> However in IE (6), the central DIV flows off the right-hand side of the
> page, because IE decides to (incorrectly) use the viewport as its
> reference for TABLE percentage measurements.
>
> I've read various things saying that to fix this, one should wrap the
> TABLE in a <DIV width="100%"> or <DIV style="width: 100%">, however in
> this case, neither seems to solve it.
>
> Any ideas?
>


In my best browser for css, Mozilla, the child table falls outside (on the
right) of the central div (it has to really) when the window is reduced in
width to about 60% of a 20" 1024x870 screen (a width not that small). Plus,
there is all sorts of overlap trouble when the fonts are enlarged in
everything *but* from within the table itself (good old tables, their strong
point, a little world of their own, keeping their dignity and integrity in
any rough sea).

FYI

dorayme

 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      06-11-2005
dorayme said the following on 12/06/2005 00:43:
>>http://olifilth.co.uk/01.html
>>

>
> In my best browser for css, Mozilla, the child table falls outside (on the
> right) of the central div (it has to really) when the window is reduced in
> width to about 60% of a 20" 1024x870 screen (a width not that small). Plus,
> there is all sorts of overlap trouble when the fonts are enlarged in
> everything *but* from within the table itself (good old tables, their strong
> point, a little world of their own, keeping their dignity and integrity in
> any rough sea).
>


You are right about the table overflowing when the window size is
reduced, thanks for noticing that! However, I'm willing to live with
that; most people using this site (it's for a private intranet) will be
on big screens.

--
Oli
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem with child text node when constraining other child node types Bryan Ax XML 6 05-17-2006 09:08 PM
restrict the value of one child based on value from another child leon XML 0 09-27-2005 03:32 PM
EJB: How to delete child entries from a parent-child CMR one-to-many relationship? davout Java 0 04-18-2004 07:02 PM
[HELP] Why the child window reopen a new child window ? bhchng ASP .Net 0 01-13-2004 07:17 AM
How do I: Main thread spawn child threads, which child processes...control those child processes? Jeff Rodriguez C Programming 23 12-09-2003 11:06 PM



Advertisments