274
I am struck in layout of my site. Im using 1024 fixed width layout. I have a site layout designed in psd files. Bisically I have to stick with that design tightly and I am asked not to chnage even a pixel. As I am not too good so I though why not ask you. I am using dreameweaver for my ease in design. The problem is "expanding box problem and cruel appearance in IE and site looks better in FFox".
I am not usinf any image bigger than the size of DIV(I am using Div for layout purposes). I do see error saying expanding box problem in one division. But I assure you none of the images is bigger than size of DIV at all. Still I get this error. I don't have any borders etc. Pelase help me it is very urgent to fix.
here is my code and css file.:
Css file:
Expand|Select|Wrap|Line Numbers
- body{
- font-size: 12px;
- text-align:center;/* for ie5.+*/
- background:#97999c;
- margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
- height: 738px;
- border:0;
- }
- .outer{
- background-color:#1c2e5d;
- width:1024px;
- margin:0px;
- border:0px;
- padding:0px;
- }
- .outer_left{
- background-color:#97999c;
- background-image:url(../images/outer_left_bgr.jpg); /* image size 30*5 */
- border:0px;
- background-repeat:repeat-y;
- width: 32px;
- float: left;
- height: 770px;
- margin:0;
- padding:0;
- }
- .outer_right{
- background-color:#97999c;
- background-image:url(../images/outer_right_bgr.jpg); /* image size 30*5 */
- background-repeat:repeat-y;
- width: 32px;
- float:left;
- height: 770px;
- margin:0;
- padding:0;
- border:0px;
- }
- .outer_middle{
- background-color:#1c2e5d;
- border:0px;
- width: 960px;
- float: left;
- height: 738px;
- margin:0;
- padding:0;
- }
- .header{
- background-image:url(../images/header.jpg);
- background-color:#1c2e5d;
- background-position:center;
- background-repeat:no-repeat;
- height:107px;
- width:960px;
- margin:0;
- padding:0;
- border:0px;
- }
- .nav{
- background-color:#FFFFFF;
- background-image:url(../images/nav_bar.jpg);
- background-repeat:no-repeat;
- background-position:center;
- height:37px;
- width:960px;
- font: Tahoma, Arial, Helvetica, sans-serif;
- margin:0;
- padding-left:0px;
- text-align:left;
- }
- .main{
- background-color:#1c2e5d;
- width:960px;
- height:500px;
- margin:0;
- padding:0;
- }
- .main_left{
- background-color:#1c2e5d;
- width:580px;
- float:left;
- height: 510px;
- margin:0;
- padding:0;
- }
- .main_right{
- background-color:#1c2e5d;
- width:380px;
- float:left;
- height: 500px;
- margin:0;
- padding:0;
- }
- .main_right_top{
- background-color:#1c2e5d;
- height: 200px;
- margin:0;
- padding:0;
- }
- .main_right_bottom{
- background-color:#1c2e5d;
- height: 300px;
- margin:0;
- padding:0;
- }
- .footer{
- background-image:url(../images/footer.jpg);
- margin:0;
- padding:0;
- width:960px;
- height:94px;
- }
- .clearfloat {
- /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
- clear:both;
- height:0;
- font-size: 1px;
- line-height: 0px;
- }
Expand|Select|Wrap|Line Numbers
- <!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">
- <script language="javascript">
- services_on = new Image ( 99, 37 );
- services_off = new Image ( 99, 37 );
- services_on.src = "../public_html/images/navbar/services_on.gif";
- services_off.src = "../public_html/images/navbar/services_off.gif";
- faq_on = new Image ( 80, 37 );
- faq_off = new Image ( 80, 37 );
- faq_on.src = "../public_html/images/navbar/faq_on.gif";
- faq_off.src = "../public_html/images/navbar/faq_off.gif";
- </script>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>Trend Auto Group</title>
- <link href="../public_html/css/main.css" rel="stylesheet" media="screen, projection" type="text/css" />
- <link href="../public_html/css/print.css" rel="stylesheet" media="print" type="text/css" />
- <!--[if IE ]>
- <link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css" />
- <![endif]-->
- </head>
- <body id="home">
- <div class="outer">
- <div class="outer_left"></div><!-- End of div[outer_left] -->
- <div class="outer_middle">
- <div class="header"> </div> <!-- End of div[header] -->
- <div class="nav" >
- <!-- TemplateBeginEditable name="Nav_bar_editable" -->
- <!-- <img src="../public_html/images/navbar/nav_bar_left_space.gif" /> -->
- <a href="services.html"
- onmouseout="button_off('services');"
- onmouseover="button_on('services');"> <img src="../public_html/images/navbar/services_off.gif"
- style="border: none;" width="99" height="37" name="Services"/>
- </a>
- <!-- TemplateEndEditable -->
- </div>
- <!-- End of div[nav] -->
- <div class="main">
- <div class="main_left"><!-- TemplateBeginEditable name="left_editable" -->
- <p>Content for class "main_left" Goes Here</p>
- <!-- TemplateEndEditable -->
- <p> </p></div><!-- End of div[main_left] -->
- <div class="main_right">
- <div class="main_right_top"><!-- TemplateBeginEditable name="Right_top_edirable" -->
- <p>Content for class "main_right_top" Goes Here</p>
- <!-- TemplateEndEditable --></div>
- <!-- End of div[main_right_top] -->
- <div class="main_right_bottom"><!-- TemplateBeginEditable name="right_bottom_editable" -->
- <p>Content for class "main_right_bottom" Goes Here</p>
- <!-- TemplateEndEditable --></div>
- <!-- End of div[main_right_bottom] -->
- </div> <!-- End of div[main_right] -->
- </div>
- <!-- End of div[main] -->
- <br><br>
- <div class="footer" ></div>
- </div>
- </div> <!-- End of div[outer] -->
- <div class="outer_right"></div>
- </div>
- </body></html>
