SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to know which one is the containing element here

    #menudescription{ height:40%; width:100%; position:absolute; top:340px; left:190px; }
    #menudescription2{ height:40%; width:100%; position:absolute; top:230px; left:190px; }



    <table width="100" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="menudescription">

    <table width="20" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" style=" position:relative; left:194px; top:200px;"><td></td>
    <td style="position:relative; width:auto; height:auto;"></td>
    </table></table>
    <table width="0" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="menudescription2"><td style="float:left; position:relative; left:0px; top:0px; height:2px;"><img src="../images/spacer.gif" alt="mn" height="8" width="800" /></td></table><table width="0" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="menudescription3"><td style="float:left; position:relative; left:155px; top:0px;"><img src="../images/CaridadKBBanner.gif" alt="bf" width="480" height="70" /></td></table>
    <table width="0" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="menudescription"><td height="104" style="float:left; position:relative; left:0px; top:0px; height:2px;"><img src="../images/spacer.gif" alt="re" height="10" width="800" /></td>

    Which one of this table is the Initial Containing element?

    In this case when does an element become a initial containing block?

    Help please..

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    The first table is the initial containing block because it encloses the children tables. It becomes an initial containing block when you nest element(s) inside of an element.

    Also the initial containing block of an AP element is the nearest ancestor (parent element) with a position set, normally position:relative; (though can sometimes be absolute).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is recommended to do? to set the containing block to absolute or to relative?

    The child tables should be position relative instead of absolute?

    what do you recommend?


    I am just trying to avoid the horizontal scroll bars to appear in the internet explorer windows...

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Normallly position:relative; is normally used for parents as normally it does nothing except set a noew stacking context for other positioned elements. Add up your widths/heights and if it is exceeding any height/width of hte parent then of course scrollbars will appear.

    Child tables are normally AP'd (well not tables, just children)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I will get you later on whenever I have the chance to add up all the widths/heights of the childs to see if they are overlapping their parents


    thank bro..

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Absolutely positioning children in tables is a problem. Tables don't have to follow the normal positioning model. They're free to do whatever the heck they want. Which sucks, and defeats the purpose of having a spec anyway. I though the point was consistent behaviour??

  7. #7
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't believe what was troubling the tables aww! look at this very simple:

    I have a table inside of a containing element table and the simple fact that I was this:

    HTML Code:
    <table style="float:left; position:relative; left:185; top:193px;" width="212" border="0" cellspacing="0" cellpadding="0"
    as suppose to this :
    HTML Code:
    <table width="212" border="0" cellspacing="0" cellpadding="0" style="float:left; position:relative; left:185; top:193px;"
    Was causing the horizontal scroll bar to appear.

    The above table is a children and its parent is set up the following way.

    HTML Code:
    <table border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="menudescription">
    
    <!-- and parent CSS styling is-->
    
    #menudescription{ width:100%; height:100%; position:relative; top:200px; left:190px; }
    
    Simple things can keep around for long.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •