Ok I have been tortured for hours with this design, its been killing me inside! Here is the problem: I want to center this image, but I want to center it using liquid layout, so none of that left: 20px; crap, I want it to be a complete center. I have tried the margin: 0px auto; and I cant tell why its working for everybody else but not me! Im so mad right now lol. Problem #2: When doing text in CSS (liquid layouts) if you look on different browsers it shows up in slightly different places, but noticable if your on chrome and it can be way outside your proposed box.... HERE IS MY CODE: <!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>Ball Bushing Warehouse - eBushing.com</title> <style type="text/css"> body { background-color: #FFFFFF; background-repeat: no-repeat; font: Tahoma, Geneva, sans-serif; font-family: Tahoma, Geneva, sans-serif; } .top { position: absolute; background-image: url(images/top_stretch.png); background-repeat: repeat-x; background-position: center; top: 0px; width: 100%; height: 170px; left: 0px; } .logo { background-image: url(images/logo.png); background-repeat: no-repeat; background-position: center; position: absolute; width: 100%; height: 137px; top: 0px; } .navigation { background-image: url(images/navigation_bar.png); background-repeat: no-repeat; background-position: center; position: absolute; width: 100%; height: 46px; top: 137px; } .info { background-image: url(images/info.png); background-repeat: no-repeat; background-position: center; position: absolute; width: 100%; height: 140px; top: 180px; } .body { background-image: url(images/main_body.png); background-repeat: no-repeat; position: absolute; width: 712px; height: 829px; top: 321px; text-align: left; } </style> </head> <body> <div class="top"></div> <div class="logo"> </div> <div class="navigation"> </div> <div class="info"> </div> <div class="body" id="container"> <b><font size="+1">Welcome To eBushing.com!</font></b><br /><br /><font size="-1">Thank you for visiting the Ball Bushing Warhouse website. We offer a variety of products to suit all needs.</font> </div> </body> </html> Code (markup): If anybody figures these 2 problems out, they will probably be my hero forever
problem can be your absolute positioning. can you attach main_body.png image. or is the page online. vineet
Image: http://i48.tinypic.com/142ebzp.png When I do margin it also is like 10px off of the rest of the design... How do you place text in css? containers or what?
I wonder if you are trying to make a background image center or an image. but perhaps this is the answer you are looking: the following css not only makes the background center but put the image inside the div and it would be center to: .info { background-image: url("http://i48.tinypic.com/142ebzp.png"); background-repeat: no-repeat; background-position: center; position: absolute; width: 100%; height: 140px; top: 180px; text-align:center; margin:0px auto; } PHP: By the way, I think the image url needs to be quoted.
Well, I have my image centered just like the rest of mine now and it matches to everybody else but can anybody explain how to make sure the text is in the same exact place in every browser using liquid css?
I think I had this problem and then instead of having like .logo, make it #logo then have the div id's in each other if you know what I mean? Hope this helped.