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

Problem resizing screen in IE7

P: 1
Could someone help me and telling me how to get my 3 column web page to resize correctly in IE7. When trying to reside my my web page I can only get it to resize to a point before the 2 and 3 columns wrap below the 1 column. I am using a mixer of fliud and liquid layout.

Following is my css code that I am using in laying my page out and the HTML program only consist of div statement.

Expand|Select|Wrap|Line Numbers
  1.  
  2. html, body 
  3. {
  4.   padding: 0;
  5.   margin: 0;
  6.   height: 100%;
  7.   font-size: xx-small;
  8.   font-family: arial, helvetica, sans-serif;
  9.  
  10. body 
  11.   margin: 0;
  12.   padding: 0;
  13.   margin: 175px auto;
  14.   background-color: #3399fe;
  15. }
  16.  
  17. /*
  18.   The normal size is 1 em or 100% We set the text that is twice the size by specifying 
  19.   2em or 200%. In this way the size will be relevant to the screen size and font 
  20.   size that is used and therefore should be consistent among compliant browsers.
  21.  
  22. */
  23.  
  24. .emsize 
  25. {
  26.  font-size: 2em;
  27.  color: #0000FF;
  28. }
  29.  
  30.  
  31.  
  32. .menu
  33. {
  34.     list-style-type: none;
  35.     font-size: 1.5em;
  36.     margin: 5px;
  37.     padding: 5px;
  38. }
  39.  
  40. #facelogo 
  41. {
  42.  position: absolute;
  43.  top: 3%;
  44.  left: 40px;
  45.  background-image: url(../images/new-face-logo.png);
  46.  background-position: left;
  47.  background-repeat: no-repeat;
  48.  height: 150px;
  49.  width: 175px;
  50.  
  51. #scroller 
  52. {
  53.  position: absolute; 
  54.  width: 100%; 
  55.  height: 100%; 
  56.  top: 0; 
  57.  left: 0; 
  58.  overflow: auto;
  59. }
  60.  
  61.  
  62. #content 
  63. {
  64.  padding-top: 5px;
  65.  padding-right: 20px;
  66.  padding-bottom: 10px;
  67.  padding-left: 20px;
  68. }
  69.  
  70. /* 
  71.    The following section is setting up parameters use for setting up a 3 column 
  72.    Web page using pecentage. An attribute "display: inline" was added to the first 
  73.    column to eliminate a bug that occurs in IE 5, 5.5, and 6. These browsers have 
  74.    some quirks when it comes to margins and floats, and sometimes will cause the
  75.    column to slip down past the others. This fix should do the trick.
  76. */
  77.  
  78. #column1 
  79.   float: left;
  80.   margin-left: 2%;
  81.   width: 126px;
  82.   height: 480px;
  83.   background-color: #d0f3ef;
  84.   text-align: center;
  85. }
  86.  
  87. #column2 
  88.   position: relative; 
  89.   float: left; 
  90.   width: 61%; 
  91.   margin-left: 2%;  
  92.   height: 480px;
  93.   background-image: url(../images/lb-logo-chara-large480x435.png);
  94.   background-position: 45px 75%;
  95.   background-repeat: no-repeat;
  96.   background-color: #FEF2D8;
  97.   display: inline;              /* Fixs double float which occurs in Internet 
  98.                                    Explorer 5, 5.5 and 6. */
  99.  
  100. #column3 
  101.  
  102.   position: absolute;
  103.   float: left; 
  104.   width: 14em; 
  105.   margin-left: 2%;
  106.   height: 480px;
  107.   background-color: #d0f3ef;
  108.   text-align: center;
  109. }
  110.  
  111.  
  112. #bottom-left 
  113.       background-image: url('../Image/corners/Stdcorners/bottom-left.gif'); /* CHANGE: path and name of your image */
  114.       height: 9px;               /* CHANGE: height of your image */
  115.       background-repeat: no-repeat;
  116.       font-size: 2px;          /* DNC: correction IE for height of the <div>'s */
  117.     margin-right: 9px;
  118. }
  119.  
  120.  
  121.  
  122. /* 
  123.    In the footer is an attribute "clear: both". This is used so the Liquid Layout 
  124.    will stay above the footer, and the footer will be below the 
  125.    layout design. 
  126. */
  127.  
  128. .clearfooter
  129.  
  130. {
  131.   height: 0;
  132.   clear: both;
  133. }
  134.  
  135. #footer 
  136.   position: relative;
  137.   clear: both;
  138.   height: 45px;
  139.   margin-top: 20px;
  140.   font-size: 12px;
  141.   text-align: center;
  142. }
  143.  
  144.  
  145. h1
  146. {
  147.   font-size: 2em; 
  148.   font-family: Arial
  149. }
  150.  
  151. p
  152. {
  153.   font-size: 1.5em; 
  154.   font-family: Arial
  155. }
  156.  
Secondly, is there a way which I can also get the background image to resize with the windows too. I really would appreciate any help or direction to were I can find information on how I can do this.
Oct 13 '07 #1
Share this question for a faster answer!
Share on Google+

Post your reply

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