Nsryjdtyk

I have made a table of which does not fill the full width of the parent div in CHROME & SAFARI.

This works fine in Firefox but I would like to get working in all browsers.

After some views on here I found that in some chrome cases can be fixed with setting parent div to...

display: block; width: 100%;

.. but the issue persists.

Also found another couple cases where specifying no margin & padding so gave that a shot and still there are issues with displaying in Chrome & Safari.

THE HTML

<div class='player_box info_pic_2'> 

    <div style='display: block; width: 100%;'>

        <table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; top: 0; right: 0px; height: 30px;'>

                <tr class='border_bottom'>

                    <td>CELL A</td>

                    <td>CELL B</td>

                </tr>

        </table>

        <table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; right: 0px; top: 30px;'>

            <tr class='border_bottom'>

                <td>ROW A </td>

            </tr>

            <tr class='border_bottom'>

                <td>ROW B </td>

            </tr>

            <tr class='border_bottom'>

                <td>ROW C </td>

            </tr>

            <tr class='border_bottom'>

                <td>ROW D </td>

            </tr>

            <tr class='border_bottom'>

                <td>ROW E </td>

            </tr>

            <tr class='border_bottom'>

                <td>ROW F </td>

            </tr>

        </table>

    </div>

</div>

THE CSS

tr.border_bottom td {

    border-bottom:1pt solid black;

}

.info_pic_2 {

    position: absolute;;

    height: 250px;

    top: 130px;

    right: 70px;

    width: 350px;

    max-width: 100%;

    display: block;

    border-style:solid;

    border-width:5px;

    color: black;

}

.player_box {

    border:solid 4px #000000;

    -moz-border-radius-topleft: 33px;

    -moz-border-radius-topright:32px;

    -moz-border-radius-bottomleft:32px;

    -moz-border-radius-bottomright:32px;

    -webkit-border-top-left-radius:33px;

    -webkit-border-top-right-radius:32px;

    -webkit-border-bottom-left-radius:32px;

    -webkit-border-bottom-right-radius:32px;

    border-top-left-radius:33px;

    border-top-right-radius:32px;

    border-bottom-left-radius:32px;

    border-bottom-right-radius:32px;

    text-align:center; background:#575757;

    padding:100px 50px 100px 50px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    opacity: 0.8;

}

Your issue appears to be the padding values in your .player_box selector (Second to last line on your CSS. Remove the padding and it will fill correctly.

I can make it behave better by changing this CSS:

.info_pic_2 {

    position: absolute;

    height: 250px;

    top: 130px;

    right: 70px;

    width: 350px;

    max-width: 100%;

    display: block;

    border-style: solid;

    border-width: 5px;

    color: black;

}

to:

.info_pic_2 {

    height: 250px;

    top: 130px;

    right: 70px;

    max-width: 100%;

    display: block;

    border-style: solid;

    border-width: 5px;

    color: black;

}

I've found that mixing absolute positioning and percentage widths is a nightmare.

Edit: The padding doesn't help either, but see my updated version here:

http://jsfiddle.net/rcQmW/2/