467,915 Members | 1,280 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

CSS Height problem

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?
Apr 6 '07 #1
  • viewed: 2464
Share:
10 Replies
drhowarddrfine
Expert 4TB
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%;
}
Apr 6 '07 #2
Expert 1GB
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
Expand|Select|Wrap|Line Numbers
  1. body
  2. background-image: url('somepicture.jpg');
  3. background-repeat: repeat
  4. }
  5.  
Apr 6 '07 #3
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.
Apr 6 '07 #4
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.
Apr 6 '07 #5
Expert 1GB
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.
Apr 6 '07 #6
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.
Apr 6 '07 #7
Expert 1GB
Hughie,
The first thing you need is a Doc Type. See the post at the top of this forum.
Apr 6 '07 #8
drhowarddrfine
Expert 4TB
And then, after adding the doctype, validate your html and css for your list of errors to fix.
Apr 6 '07 #9
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
Apr 7 '07 #10
drhowarddrfine
Expert 4TB
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.
Apr 7 '07 #11

Post your reply

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

Similar topics

12 posts views Thread by Kepler | last post: by
7 posts views Thread by Just Dummy | last post: by
4 posts views Thread by reycri | last post: by
2 posts views Thread by ziycon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.