473,326 Members | 2,438 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,326 software developers and data experts.

CSS problem

I am having a wierd problem with IE in CSS... I have a footer that is locked
to the bottom of the page with the bottom attribute set to 0px so it is 0px
from the bottom. but when you view the page in a new IE window the footer
div bar starts ABOVE the bottom, and when you refresh it, then it moves to
the bottom... has anyone ever seen this before and how do you fix it? I have
seen it once before in HTML with tabels on the right side of the screen once
in the past but CSS is new to me now.. here is my HTML and CSS code for this

<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<html>

<body>

<div id="container">
<div id="banner">
<h1>Site name</h1>
</div>
<div id="nav">
<p>Lorem ipsum.. </p>
</div>
<div id="content">
<h2>Page heading </h2>
<p>Ut wisi enim.. </p>
</div>
<div id="footer">
Footer stuff here </div>
</div>

</body>

</html>
body {
padding:0px; font-size : 0.9em;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin : 0px
}

#header { position: absolute; left: 0px; top: 0px; height: 45px;
background-color: #2F4571; width:100%; right:1 }

#left{position: absolute; float: left; left: 0px; top: 0px; width: 200px;
background-color: #222222; height:100%}
#footer{position: absolute; bottom: 0px; height: 20px; color: #FFFFFF;
background-color: #000000; left:0px; width:100%}
#right{}

#shaddow {position: absolute; float: left; left: 200px; width: 6px;
background-image:
url('images/shadrightdrop2.gif'); background-repeat:
repeat-y;
background-attachment: fixed; background-position: left top;
height:100%}
#content {background-color: #FFCCFF}
#banner {background-color: #99CCFF}
Nov 18 '05 #1
3 1534
the footer is rendered before the body is resized, so its at the old
position. for this to work correctly, you need to set an absolute size to
body, or catch the body resize event, and reset the position of the footer -
you would need to do this to correctly handle page resizes anyway. you could
also switch to computed styles.

-- bruce (sqlwork.com)
"Brian Henry" <br**********@newsgroups.nospam> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
| I am having a wierd problem with IE in CSS... I have a footer that is
locked
| to the bottom of the page with the bottom attribute set to 0px so it is
0px
| from the bottom. but when you view the page in a new IE window the footer
| div bar starts ABOVE the bottom, and when you refresh it, then it moves to
| the bottom... has anyone ever seen this before and how do you fix it? I
have
| seen it once before in HTML with tabels on the right side of the screen
once
| in the past but CSS is new to me now.. here is my HTML and CSS code for
this
|
|
|
| <head>
| <link rel="stylesheet" type="text/css" href="main.css">
| </head>
|
| <html>
|
| <body>
|
| <div id="container">
| <div id="banner">
| <h1>Site name</h1>
| </div>
| <div id="nav">
| <p>Lorem ipsum.. </p>
| </div>
| <div id="content">
| <h2>Page heading </h2>
| <p>Ut wisi enim.. </p>
| </div>
| <div id="footer">
| Footer stuff here </div>
| </div>
|
| </body>
|
| </html>
|
|
| body {
| padding:0px; font-size : 0.9em;
| font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
| margin : 0px
| }
|
| #header { position: absolute; left: 0px; top: 0px; height: 45px;
| background-color: #2F4571; width:100%; right:1 }
|
| #left{position: absolute; float: left; left: 0px; top: 0px; width: 200px;
| background-color: #222222; height:100%}
| #footer{position: absolute; bottom: 0px; height: 20px; color: #FFFFFF;
| background-color: #000000; left:0px; width:100%}
| #right{}
|
| #shaddow {position: absolute; float: left; left: 200px; width: 6px;
| background-image:
| url('images/shadrightdrop2.gif'); background-repeat:
| repeat-y;
| background-attachment: fixed; background-position: left
top;
| height:100%}
| #content {background-color: #FFCCFF}
| #banner {background-color: #99CCFF}
|
|
Nov 18 '05 #2
Could you give me an example of how to do this? I am having trouble finding
anything that describes it

"bruce barker" <no***********@safeco.com> wrote in message
news:uz**************@TK2MSFTNGP11.phx.gbl...
the footer is rendered before the body is resized, so its at the old
position. for this to work correctly, you need to set an absolute size to
body, or catch the body resize event, and reset the position of the
footer -
you would need to do this to correctly handle page resizes anyway. you
could
also switch to computed styles.

-- bruce (sqlwork.com)
"Brian Henry" <br**********@newsgroups.nospam> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
| I am having a wierd problem with IE in CSS... I have a footer that is
locked
| to the bottom of the page with the bottom attribute set to 0px so it is
0px
| from the bottom. but when you view the page in a new IE window the
footer
| div bar starts ABOVE the bottom, and when you refresh it, then it moves
to
| the bottom... has anyone ever seen this before and how do you fix it? I
have
| seen it once before in HTML with tabels on the right side of the screen
once
| in the past but CSS is new to me now.. here is my HTML and CSS code for
this
|
|
|
| <head>
| <link rel="stylesheet" type="text/css" href="main.css">
| </head>
|
| <html>
|
| <body>
|
| <div id="container">
| <div id="banner">
| <h1>Site name</h1>
| </div>
| <div id="nav">
| <p>Lorem ipsum.. </p>
| </div>
| <div id="content">
| <h2>Page heading </h2>
| <p>Ut wisi enim.. </p>
| </div>
| <div id="footer">
| Footer stuff here </div>
| </div>
|
| </body>
|
| </html>
|
|
| body {
| padding:0px; font-size : 0.9em;
| font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
| margin : 0px
| }
|
| #header { position: absolute; left: 0px; top: 0px; height: 45px;
| background-color: #2F4571; width:100%; right:1 }
|
| #left{position: absolute; float: left; left: 0px; top: 0px; width:
200px;
| background-color: #222222; height:100%}
| #footer{position: absolute; bottom: 0px; height: 20px; color: #FFFFFF;
| background-color: #000000; left:0px; width:100%}
| #right{}
|
| #shaddow {position: absolute; float: left; left: 200px; width: 6px;
| background-image:
| url('images/shadrightdrop2.gif'); background-repeat:
| repeat-y;
| background-attachment: fixed; background-position: left
top;
| height:100%}
| #content {background-color: #FFCCFF}
| #banner {background-color: #99CCFF}
|
|

Nov 18 '05 #3
Hi Brian,

I've tested the page you provided and did find the problem. Also, I think
bruce's suggestion is reasonable. Since the problem seems occur everytime
the page is first time loaded, and after that , the footer's position will
be ok. I've done some tests on my side and you may have a try on the
following code:

====================
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script language="javascript">
function bodyLoad()
{
document.getElementById("footer").className="#foot er";
}
</script>
</head>
<body onload="bodyLoad()">
<div id="container">
<div id="banner">
..............
=====================================

That manually reset the css classname for the footer <div> when the page's
body is loaded.

BTW, as for web form page, I think it'll be better to use relative position
mode rather than absolute position. Also, if possible, I suggest you
consider using html <table> element to structure the page's layout, that'll
be more flexible.

Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Nov 18 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Kostatus | last post by:
I have a virtual function in a base class, which is then overwritten by a function of the same name in a publically derived class. When I call the function using a pointer to the derived class...
117
by: Peter Olcott | last post by:
www.halting-problem.com
18
by: Ian Stanley | last post by:
Hi, Continuing my strcat segmentation fault posting- I have a problem which occurs when appending two sting literals using strcat. I have tried to fix it by writing my own function that does the...
28
by: Jon Davis | last post by:
If I have a class with a virtual method, and a child class that overrides the virtual method, and then I create an instance of the child class AS A base class... BaseClass bc = new ChildClass();...
6
by: Ammar | last post by:
Dear All, I'm facing a small problem. I have a portal web site, that contains articles, for each article, the end user can send a comment about the article. The problem is: I the comment length...
16
by: Dany | last post by:
Our web service was working fine until we installed .net Framework 1.1 service pack 1. Uninstalling SP1 is not an option because our largest customer says service packs marked as "critical" by...
2
by: Mike Collins | last post by:
I cannot get the correct drop down list value from a drop down I have on my web form. I get the initial value that was loaded in the list. It was asked by someone else what the autopostback was...
0
by: =?Utf-8?B?am8uZWw=?= | last post by:
Hello All, I am developing an Input Methop (IM) for PocketPC / Windows Mobile (PPC/WM). On some devices the IM will not start. The IM appears in the IM-List but when it is selected from the...
1
by: sherifbk | last post by:
Problem description ============== - I have 4 clients and 1 server (SQL server) - 3 clients are Monitoring console 1 client is operation console - Monitoring console collects some data from...
9
by: AceKnocks | last post by:
I am working on a framework design problem in which I have to design a C++ based framework capable of solving three puzzles for now but actually it should work with a general puzzle of any kind and I...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.