Popup width shows scroll in IE and Chorme

HTML & CSS
21

Hi,

You have .wrap set to 400px height yet it is inside .popup which is only 326px high.

Hide the overflow or change all the dimensions to be correct.


.popup{border:12px solid #fdb813; height:326px; width:576px[B];overflow:hidden[/B]}

BTW the popup isn’t working for me at all in IE and I get a page error.

22

well i m using compat mode to check between compatibility, i m using IE 8 it has compatibility mode so i am getting my table headers out of alignment when in compat mode

23

If you want a scrolling table in the popup then you need to do something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin</title>
<link href="../stylesheets/admin.css" rel="stylesheet" type="text/css" />
<style>
@charset "utf-8";
/* CSS Document */

html, body {
    height:100&#37;;
}
* {
    margin:0px;
    padding:0px;
}
*html #wrapper {
    height:100%;
}
/**html.bluebg{display:inline;}*//*for testing purpose*/
#tabholder, #tabholder-light a {
    display:block;
}
a {
    color:#0066a4;
    text-decoration:none;
}
a:hover {
    color:0066a4;
    text-decoration:underline;
}
body {
    margin:auto;
    width:auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px
}
#wrapper {
    margin:auto;
    width:1255px;
    margin-top:-10px;
    min-height:100%;
    overflow:hidden
}/*height removed */
#header {
    width:1255px;
    height:34px;
    background:url(http://pixelndots.org/admin/images/header.png) repeat-x;
    border-top:10px solid #fff;
}
.outer {
    width:1064px;
    float:right;
}
.MainNav {
    color:#FFFFFF;
    padding:0px;
    margin:0px;
    padding-top:5px;
    text-decoration:none;
    width:500px;
    padding-left:150px;
    float:left;
}
.MainNav a {
    color:#c9c8c5;
    padding:0px;
    margin:0px;
    padding-top:5px;
    text-decoration:none;
}
.MainNav a:hover {
    color:#c9c8c5;
    padding:0px;
    margin:0px;
    padding-top:5px;
    text-decoration:underline;
}
.SubNav a {
    float:right;
    padding-right:20px;
    width:100px;
    color:#FFF;
    text-decoration:none;
    padding-top:5px
}
.container {
    width:100%;
    height:523px;/*border: 1px dotted #FF0000;*/
}
.bodycontent {
    float:right;
    width:1040px;
    height:570px;
    border:12px solid #3ca2d3;
    padding-bottom:0px;
    position:relative;
    margin-top:24px;
}
.logo {
    background:url(http://pixelndots.org/admin/images/Logo.png);
    width:162px;
    height:35px;
    position:relative;
    margin-top:580px;
    left:15px;
top:0 float:left
}
.buttons {
    background:url(http://pixelndots.org/admin/images/button.png) no-repeat;
    width:79px;
    height:24px;
    color:#FFFFFF;
    font-weight:900;
    border:none;
}
.submenu {
    width:50px;
    float:left;
    clear:left;
    padding-top:12px;
    display:inline;
}
#sidemenu {
    float: left;
    clear: left;
    margin-top:5px;
    padding-top: 13px;
}
#sidemenu li {
    list-style:none;
    float: left;
    clear: left;
    margin-top: 5px;
    border-top: 1px solid #999;
    padding: 0 0 13px 30px;
    line-height: 25px;
}
#sidemenu li a {
    float: left;
    position:relative;
    margin-top: -13px;
    padding-left: 5px;
    width:150px;
    height: 25px;
    background: #999;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}
#sidemenu a:hover {
    background:#06a;
}
#sidemenu #active a {
    background: #0066a4;
}
#active a {
    background-color:#0066a4;
    color:#FFFFFF;
    text-decoration:none;
    width:150px;
    height:25px;
    margin-top:5px;
    display:block
}
#sidemenu {
    margin-left:0!important;
    width:auto!important;
    padding-left:0!important;
}
.submenu {
    margin:0!important;
    padding-left:0!important;
    width:10px!important;
}
fieldset {
    background-color:#d5e6f0;
    border:1px #0064a2 solid;
    width:500px;
    float:left;
    margin:5px;
    height:100px;
    position:relative;
}
legend {
    color:#f38526;
    font-weight:bolder;
    margin-left:15px;
}
.popup {
    border:12px solid #fdb813;
    height:326px;
    width:576px;
}
.headings {
    color:#f38526;
    font-weight:bolder;
}
td {
    margin:5px;
    text-align:center;
}
.footer {
    clear:both;
    background-color:#0164a5;
    background:url(http://pixelndots.org/admin/images/footer.png) repeat-x;
    width:1255px;
    height:10px;
    margin:auto;
}
/*for popup*/
.popup {
    border:12px solid #fdb813;
    height:326px;
    width:576px;
}
.wrap {
    width:100%;
    height:300px;
    position:relative;
    overflow:hidden;
    padding-top:25px;
    float:left;
}
.inner {
    width:100%;
    height:200px;
    overflow:auto;
    margin:0 0 20px;
}
table.popbox {
    width:100%;
    border-collapse:collapse;
    margin:0 0 0 -1px;
}
table.index {
    width:300;
    margin:auto;
}
td {
    text-align:center;
    padding:2px;
}
th {
    color:#f38526;
    font-weight:bolder;
}
thead tr p {
    position:absolute;
    top:0px;
    margin-left:70px;
}
.last {
    padding-right:15px!important;
}
.popbox td, popbox th {
    width:33%;
}
* html .popbox thead tr p {
    margin-left:-20px
}
*+ html .popbox thead tr p {
    margin-left:-20px
}
.addclose input {
    display:block;
    margin:0 0 10px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.inner {overflow-x:hidden}

</style>
<![endif]-->
</head>
<body>
<div class="popup">
    <div class="wrap">
        <div class="inner">
            <table class="popbox">
                <thead>
                    <tr>
                        <th><p>Priority</p></th>
                        <th><p>Active</p></th>
                        <th><p>Action</p></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td><p>Priority</p></td>
                        <td><p>Active</p></td>
                        <td><p>Action</p></td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="" id="" /></td>
                        <td><input type="checkbox" name="" id="" /></td>
                        <td class="last">Save/Edit</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <table>
            <tr>
                <td width="25"></td>
                <td width="50"><input type="text" name="" id="" /></td>
                <td width="200"></td>
                <td class="addclose" width="100"><input type="button" class="buttons" value="Add" />
                    <input type="button" class="buttons" value="Close" />
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

As I said before IE doesn’t like the absolutely placed header being text-align:center so you just have to add a manual margin for IE as shown above.