hi,
i am trying to make a div based layout for an application. Everything is fine except for the page, where there are crystal reports. It generates the pixel-width tables (1200px) and its tearing the wrapper div. I tried with simple html page then and here is the code:
#wrapper {background:#CFC ;}even in this case the wrapper is not expanding 100% of the body. The width of the wrapper is obviously auto, and ideally it should expand 100% with the table nested in it. Any idea, how to do this? I am checking in IE6, IE7, IE8, Mozilla.
Regards,
ssjogus
Shaun
November 2, 2009, 2:10pm
2
[FONT=“Georgia”]Well that 1200px is going to have to go somewhere!
Without knowing what your design looks like; I’m thinking either you take your table out the wrapper altogether, or a quick fix could be to set the overflow of the wrapper to scroll or auto.
[/FONT]
PaulOB
November 2, 2009, 4:13pm
3
The wrapper will extend with the table unless your table is sticking out of the right side of the viewport and then forcing a scrollbar. In that case the wrapper will stop at the viewport because that is effectively the 100% width. If you scroll to the table then the wrapper background won’t be there.
You could float the wrapper and then the background will stick to the table in all but ie7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
background:#CFC;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<table width="1200px" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>test</td>
</tr>
</table>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
Not sure if that is what you meant though
Erik_J
November 2, 2009, 6:13pm
4
ssjogus:
…
It is expanding to the width of the body, and the body is expanding to the width of the html/viewport.
But if you float the #wrapper it will shrink-wrap the table no matter size. The #wrapper can have a 100% min-width set.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
body {
margin:0;
padding:0;
}
#wrapper {
float:left;
background:#cfc;
min-width:100%;
}
table{
border:1px solid #f00;
margin:1.2em auto;
width:2000px;
}
</style>
</head><body>
<div id="wrapper" >
<table>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</body></html>
A difficulty is IE6 that does not support min-width if you want the #wrapper to have the same width as the body when there is no table.
A solution for IE6 would be to AP the body, so it will contain the wide table if present and otherwise adapt to the html/viewport. For good browsers the body can have a 100% min-width, otherwise the AP body would shrink-wrap to content when there is no table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
body {
position: absolute;
margin:0;
padding:0;
min-width:100%;
height:100%;
}
#wrapper {
width:100%;
background: #cfc;
}
table{
border:1px solid #f00;
margin:1.2em auto;
width:2000px;
}
</style>
</head><body>
<div id="wrapper" >
<table>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</body></html>
Hope I understood right the original problem.
@Paul , obviously I was AFK too long before posting.
no, the actual code is pretty complexer:
<!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>Untitled Document</title>
<style>
html{ font-size:100%;height:100%; }
body{
font-family:Arial, Helvetica, sans-serif;
text-align: center;
color: #444;
padding: 0;
margin: 0;
height:100%;
background:#aca899 url(../images/bg-inner.gif) left top repeat-x;
}
#container{ margin:0px auto 0px auto; border-left:1px solid #000000; border-right:1px solid #000000; width:90%; min-width:970px; min-height:100%; padding:0; margin-bottom:-30px; background:#0CC ; }
#header{ padding:0; margin:0; height:106px; background:#ffffff url(../images/inner-banner.jpg) top left no-repeat; text-align:right }
#body{ background:#fff url(../images/bg-menu.gif) top left repeat-y; width:100%; padding:0; margin:0; border-top:1px solid #6fb3dd;
min-height: 580px;
height:auto!important;
height: 335px; }
#body p{ padding:0; margin:0;}
#menu{ float:left; background:#f1f3e6 url(../images/bg-welcome.png) top left no-repeat; width:173px; padding:0; margin:0;}
#content{ background:#fff; margin-left:173px; }
#navigation{ background:#C3DFF0 url(../images/bg-content-area.gif) top left no-repeat; text-align:right; padding-right:8px; padding-top:7px; height:23px; vertical-align:middle; }
#work-area{
margin-left:0px;
padding:0 10px 0 10px; background:#FFF;
}
#spacer-bottom{ height:1px; clear:both; width:100%}
#footer{ width:100%; background:#d8dacd; height:21px; border-top:1px solid #71724E ; padding:0; margin:0; }
/* secondary structure */
.tbl-reports{ background:#FFCCFF; width:1200px;}
#header span#logo{background: #fff url(../images/logo.gif) top left no-repeat; width:196px; height:86px; margin: 5px 20px 0 0; float:right;}
.welcome-message{ padding:15px; display:block; text-align:left;line-height:16px; }
.welcome-message{}
.welcome-message:first-line {color: #af3404; font-weight:bold; margin-bottom:35px; padding-bottom:35px ; }
.welcome-message br{ line-height:18px;}
.option-divider{ display:block; text-align:left; height:25px; background:#d8dacd; vertical-align:middle; padding-top:10px; padding-left:10px; color:#88300d; margin:0;}
#menustrip{ text-align:left; margin-left:0;}
#menustrip ul{ list-style:none; line-height:25px; text-align:left; padding:0px; margin:0px; margin-right:15px;margin-left:15px;}
#menustrip ul li{ background:url(../images/bullet2.gif) left top no-repeat; border-bottom:1px solid #b9bca9; padding-left:25px; padding-top:5px; padding-bottom:5px; line-height:18px;}
#menustrip ul li a{ color:#393636; text-decoration:none}
#menustrip ul li a:hover{ text-decoration:underline; }
#toolbar{ text-align:right; padding-right:8px; padding-top:7px; height:23px; vertical-align:middle }
#toolbar a{ color:#2f4859; text-decoration:none;}
#toolbar a:hover{ color:#2f4859; text-decoration:underline;}
h2{color:#393636; font-size:15px; border-bottom:2px solid #dbddd1; padding-bottom:8px; width:95%; margin:auto; margin-top:20px;margin-bottom:20px; text-align:left;}
h2 span{color:#0171bd; }
h2.long{color:#393636; font-size:15px; border-bottom:2px solid #dbddd1; padding-bottom:8px; width:98%; margin:auto; margin-top:20px;margin-bottom:20px; text-align:left;}
.flLeft{float:left;}
.flRight{float:right;}
.clrBoth{clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<asp:Image ID="imglogo" runat="server" ImageUrl="../images/logo-nhs-inner.png" AlternateText="NHS: Institute for Innovation and Improvement" />
<img src="../images/logo-nhs-inner.png"
alt="NHS: Institute for Innovation and Improvement" />
</div>
<div id="body">
<div id="menu">
<img src="images/spacer.gif" height="1" width="173" alt="" border="0" />
<ul>
<li><a href="Search_User.htm">Manage User </a></li>
<li><a href="Search_SHA.htm">Manage SHAs </a></li>
<li><a href="Search_PCT.htm">Manage PCTs </a></li>
<li><a href="Search_NHSTrust.htm">Manage NHS Trust </a></li>
</ul>
</div>
<div id="content">
<div id="navigation">
<a href="#">My Home Page</a>
|
<a href="#">Contact</a>
|
<a href="#">Change Password</a>
|
<a href="#">Help</a>
|
<a href="#">Logout</a>
</div>
<div id="work-area">
<table border="0" cellspacing="0" cellpadding="0" class="tbl-reports">
<tr>
<td>Panel chrystal reports</td>
</tr>
</table>
</div>
</div>
</div>
<div id="spacer-bottom">
</div>
<!-- div spacer-bottom" ends here-->
<div id="footer">Copyright © 2008 Safer Nursing Care Tool. All rights reserved.</div>
<!--div footer ends here-->
</div>
<!-- div container ends here-->
</body>
</html>
PaulOB
November 3, 2009, 9:56am
6
Hi,
For IE8, Firefox and Safari you oculd simply ad display;table to the container.
#container {
margin:0px auto 0px auto;
border-left:1px solid #000000;
border-right:1px solid #000000;
width:90%;
min-width:970px;
min-height:100%;
padding:0;
margin-bottom:-30px;
background:#0CC;
[B] display:table;[/B]
}
IE6 will stretch the container anyway but IE7 won’t. You can’t use the float method and maintain the 90% width when the table isn’t present and I guess the only thing that would work for IE7 (without getting overly complicated) is to change your main container to a real table instead. It would then stretch if required.
Or for IE7 just set the div that holds the table to overflow:auto so that IE7 usres have to scroll to see the table while everyone else gets a full width.
