Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    Hi, I am creating a practice 3-column design and I decided to insert a table into the second column. However when that happens part of the div's background disappears in FF, while it looks okay in IE 8. Then I changed my doctype to strict and now it looks similar in both browsers except that the table STILL overlaps. Thanks for your advice!

    Here's the HTML code:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="pastlayout1.css">
    
    </head>
    <body>
    <div id="container">
    
        <div id="header">Header Div</div>
    
        <div id="menu">Menu</div>
    
        <div id="content">
            <div id="left"><p>Left Column</p></div>
            <div id="right"><p>Right Column</p>
    
            <table class="box">
    
        <thead>
        <tr>
        <th>Image name</th>
        <th>Image description</th>
        <th>Image location</th>
        </tr>
        </thead>
        <tr>
        <td>petunias.jpg</td>
        <td>A picture of petunias located in the yard.</td>
        <td>-------------</td>
        </tr>
        <tr>
        <td>2_Tabby_Cats.jpg</td>
        <td>My two cats, Patches and Hairy</td>
        <td>-------------</td>
        </tr>
    
        </table>
    
            </div>
            <div id="right"><p>Right Column</p></div>
    
        </div>
    
        <div id="footer">Footer Div <br /><br /></div>
    </div>
    </body>
    </html>
    Here's the CSS code:
    Code:
    /*TABLE */
        .box {
        position: relative;
        width: 100%;
        background: AppWorkspace;
        float: left;
        margin: 1em auto;
        border: 2px solid black;
        }
    
        .box th {
        background: white;
        text-align: center;
        }
    
    /*TABLE IS LOCATED INSIDE RIGHT COLUMN */
    #right {
        float: left;
        width: 102px;
        background: #cccc33;
    
    }
    
    #left {
        float: left;
        width: 103px;
        background: #cccc33;
    }
    
    body, html {
        margin:0;
        padding:0;
    }
    
    body {
        text-align: center;
    }
    
    
    
    #container {
        width: 800px;
        margin:0 auto;
    }
    
    #header {
        width: 100%;
        height: 150px;
        background: gray;
    }
    
    #menu {
        float: left;
        width: 186px;
        margin-top: 12px;
        background: #666633;
    }
    
    #content {
        float: right;
        width: 610px;
        margin-top: 12px;
        background: #cc6633;
    }
    
    #footer {
        clear: both;
        width: 100%;
        background: #343434;
    }
    
    * html #footer {
             height:1px;
         }

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Try setting the the table's background to background-color:transparent;

    I would add that you could use an unordered list similar to the one I did here for what you're trying to do instead of a table.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    What's "AppWorkspace"? That might also be your problem. I've never seen that value before for anything.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    @Ronald Okay I set the table background to transparent as well as the cells. The table still overlaps its div in Firefox. I am using the FF 4.0.1.

    I have seen tables being used inside divs. I need to try this out but I will take unordered lists as a suggestion.

    @TheGAME1264 - Appworkspace was from my editor, it was a pre-designed color.

    Code:
    /*TABLE */
        .box {
        position: relative;
        width: 100%;
        background: transparent;
        float: left;
        margin: 1em auto;
        border: 2px solid black;
        }
    
        .box th {
        background: transparent;
        text-align: center;
        }
    
    /*TABLE IS LOCATED INSIDE RIGHT COLUMN */
    #right {
        float: left;
        width: 102px;
        background: #cccc33;
    
    }
    
    #left {
        float: left;
        width: 103px;
        background: #cccc33;
    }

  6. #5
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    I figured it out.

    The I decided to cancel out the width for the div that contains the table.

  7. #6
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Hi samsoner,

    Good idea with the width fix. I believe the culprit to your issue is this:
    HTML Code:
    position:relative;
    As soon as you set an element to be "relative" or even "absolute" of a page, the element becomes individual of all other elements. Therefore when set relative, your element is no longer contained within class "content", rather positioned "relatively". This means that where the element would have been positioned to start, remains it's position, but becomes non-static.

    gawd, that probably just made it more confusing... lol Hope it helps!
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by phillihp, post: 206234
    Hi samsoner,

    Good idea with the width fix. I believe the culprit to your issue is this:
    HTML Code:
    position:relative;
    As soon as you set an element to be "relative" or even "absolute" of a page, the element becomes individual of all other elements. Therefore when set relative, your element is no longer contained within class "content", rather positioned "relatively". This means that where the element would have been positioned to start, remains it's position, but becomes non-static.

    gawd, that probably just made it more confusing... lol Hope it helps!
    Maybe I can make it a bit clearer:

    [COLOR=rgb(51, 51, 51)]When using CSS to lay out Web pages, there are actually four states to the position property:[/COLOR]
    [COLOR=rgb(51, 51, 51)][/COLOR][COLOR=rgb(51, 51, 51)]static[/COLOR]
    [COLOR=rgb(51, 51, 51)][/COLOR][COLOR=rgb(51, 51, 51)]absolute[/COLOR]
    [COLOR=rgb(51, 51, 51)][/COLOR][COLOR=rgb(51, 51, 51)]relative[/COLOR]
    [COLOR=rgb(51, 51, 51)][/COLOR][COLOR=rgb(51, 51, 51)]fixed[/COLOR]
    [COLOR=rgb(51, 51, 51)]
    [/COLOR]

    Static is the default position for any element on a Web page. If you don't define the positioning of an element, it will be static and will display on the screen based on where it is in the HTML document and how it would display inside the normal flow of the document. If positioning rules like top or left are applied to an element that has a static position, those rules will be ignored.
    [COLOR=rgb(51, 51, 51)]An abosolutely positioned element is placed in an exact location on the page. The position of the element is calculated from the sides of the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the page.[/COLOR]
    A relatively positioned element will be positioned relative to where it would normally occur in the document. In other words, you are modifying its position from where it would have been if you hadnít changed anything.
    [COLOR=rgb(68, 68, 68)]Fixed positioning is used when you want to keep an element in the same spot in the viewport no matter where on the page the user is. (This can be handy for things such as floating menus.)[/COLOR]

    [COLOR=rgb(68, 68, 68)]Hope this helps, [/COLOR]
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Remove Ads

Posting Permissions

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

Search tags for this page

css div olverlaps table

,

css table overlapping div

,

div overlapping table

,

div overlapping table cell

,

html code css3div image overlapping div table

Click on a term to search for related topics.
All times are GMT -6. The time now is 01:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com