473,390 Members | 1,686 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,390 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 3067

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

Similar topics

10
by: riki | last post by:
Hi, i have a big problem...i'm using one jscript for resizing of all of my pics in popUp...in main html i'm having many little pics and clicking on them they open in popUp and resize to larger...
8
by: Freek te Water | last post by:
Hi, Hope no-one is offended by my probably noob question... Context: I have a web page design, which always centres in the middle of the screen (using a 100%*100% HTML-table). Now I also use...
0
by: TJ Talluto | last post by:
<facts> I have a "month calendar" that always displays exactly 42 days... and alongside is a vertical box that displays the detail (form fields) of any particular select event that appears on the...
23
by: Markus | last post by:
Hi, i have this problem: Sometimes, i can't reproduce, if i click on an small image on the website, the popup _AND_ an other Tab in firefox open. Here are the linkcode: <div...
4
by: Thomas Richter | last post by:
Hi, I can't get of the black flicker when I resize my form. this = Mainform : System.Windows.Forms.Form If I set the size from 300 to 500 I see for ca 500ms some black areas. I try to solve it...
5
by: Maxi | last post by:
I have a 30X16 cells table in my html page. Table height and width are set to 100%. I have set size of every cell inside the table to 24 pixel. When I open the html page in maximize state in...
14
by: Seige | last post by:
Ever had headache when you can't resize the background width using CSS: body{ background: url(/images/bg.jpg) ; background-width: 800px; } It won't work, would it? Of course not, it's not even...
1
by: Captain Nemo | last post by:
Hi I've written some javascript code for a pop-up window which presents a series of images. These images are of various dimensions, so that when each picture is loaded, the window is resized...
3
by: reachmano | last post by:
Hello everyone: When I view my web-page on different computers, I am having trouble with re-sizing the screen on some of them. Was wondering what should be done differently to take care of the...
0
by: =?Utf-8?B?QHdpbg==?= | last post by:
Hi there, I've written an MDI app that resizes its pages to the current screen size (minimum 1024x768). This resizing works fine on any western language. But now I have a problem with a...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.