471,881 Members | 1,626 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,881 software developers and data experts.

Problem resizing screen in IE7

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
0 3006

Post your reply

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

Similar topics

10 posts views Thread by riki | last post: by
23 posts views Thread by Markus | last post: by
4 posts views Thread by Thomas Richter | last post: by
5 posts views Thread by Maxi | last post: by
1 post views Thread by Captain Nemo | last post: by
3 posts views Thread by reachmano | last post: by
reply views Thread by =?Utf-8?B?QHdpbg==?= | last post: by
reply views Thread by YellowAndGreen | last post: by
reply views Thread by zermasroor | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.