(code is written below) this code works fine in IE but it's messed in firefox... It's basically an image with text in the center of the page but in firefox half of it is cut off by the top of the page.. hard to explain anybody know how to make this code work in firefox? +rep and 2$ paypal to anybody who can make this work. Thanks - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Download Elite - It's Pretty Special.</title> <style type = "text/css"> body { background-color: #464d56; background-image: url('http://downloadelite.net/Splash/Main.PNG'); background-repeat: no-repeat; background-position: center; position: relative; top: 50%; left: 50%; margin-left: -320px; margin-top: -240px; } </style> </head> <body> </body> </html> Code (markup):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Download Elite - It's Pretty Special.</title> <style type = "text/css"> body { background:#464d56 url('http://downloadelite.net/Splash/Main.PNG') no-repeat 50%; height:500px; } </style> </head> <body> </body> </html> Code (markup): try this it should work
Or min-height, so it can grow. No reason to be doing all this mutilation on the body though-- it should be done on a block child of the body. Moving the body left and top with relative positioning... nasty. The body shouldn't be moved relative to anyone. Move the image itself instead.
I guess you are trying to make place centered background image. Use background position and set body element height to 100% instead. background-position:center center; min-height:100%; Hope that helps