By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,508 Members | 1,823 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,508 IT Pros & Developers. It's quick & easy.

Problem in layout of website

100+
P: 274
hi everyone,
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
  1. body{
  2.     font-size: 12px; 
  3.     text-align:center;/* for ie5.+*/
  4.     background:#97999c;
  5.     margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  6.     height: 738px;
  7.     border:0;
  8. }
  9.  
  10. .outer{
  11. background-color:#1c2e5d;
  12. width:1024px;
  13. margin:0px;
  14. border:0px;
  15. padding:0px;
  16. }
  17.  
  18. .outer_left{
  19. background-color:#97999c;
  20. background-image:url(../images/outer_left_bgr.jpg); /* image size 30*5 */
  21. border:0px;
  22. background-repeat:repeat-y;
  23. width: 32px;
  24. float: left;
  25. height: 770px;
  26. margin:0;
  27. padding:0;
  28.  
  29. }
  30. .outer_right{
  31. background-color:#97999c;
  32. background-image:url(../images/outer_right_bgr.jpg); /* image size 30*5 */
  33. background-repeat:repeat-y;
  34. width: 32px;
  35. float:left;
  36. height: 770px;
  37. margin:0;
  38. padding:0;
  39. border:0px;
  40.  
  41. }
  42. .outer_middle{
  43. background-color:#1c2e5d;
  44. border:0px;
  45. width: 960px;
  46. float: left;
  47. height: 738px;
  48. margin:0;
  49. padding:0;
  50. }
  51.  
  52. .header{
  53. background-image:url(../images/header.jpg);
  54. background-color:#1c2e5d;
  55. background-position:center;
  56. background-repeat:no-repeat;
  57. height:107px;
  58. width:960px;
  59. margin:0;
  60. padding:0;
  61. border:0px;
  62. }
  63.  
  64. .nav{
  65. background-color:#FFFFFF;
  66. background-image:url(../images/nav_bar.jpg);
  67. background-repeat:no-repeat;
  68. background-position:center;
  69. height:37px;
  70. width:960px;
  71. font: Tahoma, Arial, Helvetica, sans-serif;
  72. margin:0;
  73. padding-left:0px;
  74. text-align:left;
  75. }
  76.  
  77. .main{
  78.  
  79. background-color:#1c2e5d;
  80. width:960px;
  81. height:500px;
  82. margin:0;
  83. padding:0;
  84.  
  85. }
  86.  
  87. .main_left{
  88.  
  89. background-color:#1c2e5d;
  90. width:580px;
  91. float:left;
  92. height: 510px;
  93. margin:0;
  94. padding:0;
  95. }
  96.  
  97. .main_right{
  98.  
  99. background-color:#1c2e5d;
  100. width:380px;
  101. float:left;
  102. height: 500px;
  103. margin:0;
  104. padding:0;
  105. }
  106.  
  107. .main_right_top{
  108.  
  109. background-color:#1c2e5d;
  110. height: 200px;
  111. margin:0;
  112. padding:0;
  113. }
  114. .main_right_bottom{
  115.  
  116. background-color:#1c2e5d;
  117. height: 300px;
  118. margin:0;
  119. padding:0;
  120. }
  121.  
  122.  
  123.  
  124.  
  125. .footer{
  126. background-image:url(../images/footer.jpg);
  127. margin:0;
  128. padding:0;
  129. width:960px;
  130. height:94px;
  131. }
  132.  
  133.  
  134. .clearfloat {
  135.  /* 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 */
  136.     clear:both;
  137.     height:0;
  138.     font-size: 1px;
  139.     line-height: 0px;
  140. }
code fo rone the pages:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <script language="javascript">
  4. services_on = new Image ( 99, 37 );
  5. services_off = new Image ( 99, 37 );
  6. services_on.src = "../public_html/images/navbar/services_on.gif";
  7. services_off.src = "../public_html/images/navbar/services_off.gif";
  8.  
  9. faq_on = new Image ( 80, 37 );
  10. faq_off = new Image ( 80, 37 );
  11. faq_on.src = "../public_html/images/navbar/faq_on.gif";
  12. faq_off.src = "../public_html/images/navbar/faq_off.gif";
  13.  
  14.  
  15. </script>
  16. <head>
  17.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  18.     <title>Trend Auto Group</title>
  19.     <link href="../public_html/css/main.css" rel="stylesheet" media="screen, projection" type="text/css" />
  20.     <link href="../public_html/css/print.css" rel="stylesheet" media="print" type="text/css" />
  21. <!--[if IE ]>
  22. <link href="iecss.css" rel="stylesheet"  media="screen,projection" type="text/css" />
  23. <![endif]-->
  24. </head>
  25.  
  26. <body id="home">
  27. <div class="outer">
  28.  
  29.           <div class="outer_left"></div><!-- End of div[outer_left] -->
  30.   <div class="outer_middle">
  31.                <div class="header"> </div> <!-- End of div[header] -->
  32.                    <div class="nav" >
  33.                    <!-- TemplateBeginEditable name="Nav_bar_editable" -->
  34.                            <!--    <img src="../public_html/images/navbar/nav_bar_left_space.gif"  /> -->
  35.                                     <a href="services.html" 
  36.                                            onmouseout="button_off('services');"
  37.                                         onmouseover="button_on('services');"> <img src="../public_html/images/navbar/services_off.gif" 
  38.                                         style="border: none;" width="99" height="37" name="Services"/>
  39.                                     </a>
  40.  
  41.  
  42.                  <!-- TemplateEndEditable -->
  43.                   </div>
  44. <!-- End of div[nav] -->
  45.                         <div class="main">
  46.                             <div class="main_left"><!-- TemplateBeginEditable name="left_editable" -->
  47.                               <p>Content for  class "main_left" Goes Here</p>
  48.                               <!-- TemplateEndEditable -->
  49. <p>&nbsp;</p></div><!-- End of div[main_left] -->
  50.                                    <div class="main_right">
  51.                                              <div class="main_right_top"><!-- TemplateBeginEditable name="Right_top_edirable" -->
  52.                                                <p>Content for  class "main_right_top" Goes Here</p>
  53.                                              <!-- TemplateEndEditable --></div> 
  54.                                   <!-- End of div[main_right_top] -->
  55.                                              <div class="main_right_bottom"><!-- TemplateBeginEditable name="right_bottom_editable" -->
  56.                                                <p>Content for  class "main_right_bottom" Goes Here</p>
  57.                                              <!-- TemplateEndEditable --></div> 
  58.                                        <!-- End of div[main_right_bottom] -->
  59.                                 </div> <!-- End of div[main_right] -->
  60.  
  61.                         </div> 
  62.               <!-- End of div[main] -->
  63.                <br><br>
  64.           <div class="footer" ></div>
  65.   </div>
  66.  </div> <!-- End of div[outer] -->
  67.  
  68.  
  69.   <div class="outer_right"></div>  
  70.  
  71. </div>
  72.  
  73.  
  74. </body></html>
I get error in outer_middle DIV. As a result it splits the border of outer_right to the next line. If I leave extra pixels around each DIV by increasing the sizes that would look ugly.
Nov 17 '08 #1
Share this Question
Share on Google+
5 Replies


Death Slaught
100+
P: 1,137
I would start with the obvious. You have your script tags outside of your head tags (which is one of the two places you can place script elements, and the other being within the body tags).

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Nov 17 '08 #2

100+
P: 274
but that is not a problem, at all should I stick to table format?
Nov 17 '08 #3

100+
P: 274
Ahh.......
I chnaged layout in table and that worked. But why DIV did this with me.
Nov 18 '08 #4

Death Slaught
100+
P: 1,137
See what happens after you validate your page.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Nov 19 '08 #5

100+
P: 274
Thanks for the link.
Nov 24 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.