CSS Height problem

[hughie]

Hi,

I am having trouble with height (as you may have guessed from the title).

My original problem was the background did not align correctly in internet explorer but it did in firefox. To try and fix this i removed the body background and added a div positioned at 0,0 with a width and height of 100% behind everything. The problem is, 100% refers to the browsers height, not the pages height. Once the page goes beyond the height of the browser, the background stops. How could I prevent this? Or how else could I fix the background aligning?

[drhowarddrfine]

It depends. Without the complete code or a link, we can only guess. But try this in your CSS:

html,body{
height:100%;
width:100%;
}

[AricC]

Hi,

I am having trouble with height (as you may have guessed from the title).

My original problem was the background did not align correctly in internet explorer but it did in firefox. To try and fix this i removed the body background and added a div positioned at 0,0 with a width and height of 100% behind everything. The problem is, 100% refers to the browsers height, not the pages height. Once the page goes beyond the height of the browser, the background stops. How could I prevent this? Or how else could I fix the background aligning?

You can use CSS to have a repeating background

body
{ 
background-image: url('somepicture.jpg');
background-repeat: repeat
}
 

[hughie]

Yes i have a repeating background, thats easy stuff but it isnt inline with any other elements on the page in IE 6. For example, I have a center aligned background image which is 960x32px. I use <img> to draw that image at postion 50%, 0px with a margin-left of -480px so it centers the image. This works in FF but in IE, it appears to be a pixel out. Then when i resize the IE window, it goes way out. It appears that the elements are centered to the window, the background is centered to something else =S. A seemingly obvious solution is to move the body to 50% but whats the width to subtract from the margin? 50%? that just cancels out.

[hughie]

Sorry for double posting but I can no longer edit my previous post =S. Latest update is they stay in the middle but its still not right. In IE, certain window widths work, others dont. If it works, shrinking/increasing the width by 1px makes it out of line. a further shrink/increase puts it back inline and so on. When maximised, it is out of line. Any ideas on how to solve this? And also, how would I position a div at the bottom of the page? top:100%; doesnt work, thats at the bottom of the window, the same as bottom:0%;. I want it at the bottom of the page, not the window.

[AricC]

Sorry for double posting but I can no longer edit my previous post =S. Latest update is they stay in the middle but its still not right. In IE, certain window widths work, others dont. If it works, shrinking/increasing the width by 1px makes it out of line. a further shrink/increase puts it back inline and so on. When maximised, it is out of line. Any ideas on how to solve this? And also, how would I position a div at the bottom of the page? top:100%; doesnt work, thats at the bottom of the window, the same as bottom:0%;. I want it at the bottom of the page, not the window.

Can you provide a link to the page? This would be a lot easier if we could see the problem.

[hughie]

Yeah the page is currently at http://www.hughierocks.com/randomgames/index.php
I pretty much got the aligning thing sorted (firefox rounds up, IE rounds down, or vice versa, cant remember which). The problem i have now is the little banner at the bottom. i want it at the bottom of the content, not the browser window. Visit the guestbook page to see the problem.

[AricC]

Hughie,
The first thing you need is a Doc Type. See the post at the top of this forum.

[drhowarddrfine]

And then, after adding the doctype, validate your html and css for your list of errors to fix.

[hughie]

Ok I added a 'strict' doctype and then edited my css (html seemed fine) accordingly.

EDIT: Ok now it seems to work fine in both. Hurrah. Anyone got any ideas on moving the 'layout created by' banner to the bottom of the page rather than the browser window? =S

[drhowarddrfine]

The problem is caused by using absolute positioning. Doing so removes the elements from the normal flow which is why the footer 'rises up' to the first block element, the <p> I think. I don't see why the main content or footer should be absolutely positioned.