Well, I just got finished spending a couple hours looking for a solution to an issue concerning the background image. Originally, I was not able to get it even close to the manner I wanted it to work. However I have made it to a decent point. The original idea was to get a background image centered and fixed. Fair enough. CSS:
body {margin:0px; padding:0px; width:100%; background: #000 url(bgNew.png) fixed center center no-repeat;}
h1 {margin:0px;font-size:26px;}
#head {width:100%; text-align:center; color:#f58; font-size: 26px}
.darken {background-image: url(pixBgBlk.png); background-repeat:repeat}
.autoM {margin-left:auto; margin-right:auto}
.black {color:#000;}
.centerTxt {text-align:center}
.darkP {color:#ff5588}
.inline {display:inline}
.justP {color:#ffb0c8}
.left {text-align:left}
.right {text-align:right}
.rosen {background-image: url(pixBg.png); background-repeat:repeat}
.round10 {border-radius: 10px;}
.round15 {border-radius: 15px;}
.round25 {border-radius: 25px;}
.w15 {width:15px}
.w200 {width:200px}
.w250 {width:250px}Ok, now, I set the margins and padding to 0 and width to 100%. Now the layout was made in divs and this is the barebones html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Custom Couture</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="./main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div id="container">
<div id="head"><img src="title.png" alt="Custom Couture" /></div>
<div id="body">
<div class="w250 autoM centerTxt inline">
<form id="updateItem" method="post" class="w200 autoM" action="index.php">
<div class="w200 autoM centerTxt">
<h1 class="rosen black round15">Update Item</h1>
</div>
<div class="w200 autoM centerTxt">
<input type="submit" value="Update Item" />
</div>
</form>
</div>
</div>
<div id="foot">
</div>
</div>
</div>
</body>
</html>Now this shows decent in Chrome 5.0.375.127 and IE8.0.6001.18702 because I cant squeeze the toolbars??? any more I suppose but Firefox 3.6.9 will let me thin it out all the way to the title bar of the window and show properly centered as long as the window is wider than the img element (284px wide). In any case on my computer, the image in the background is a heart with wings(800px wide), and it keeps centered with the window, and the body div keeps centered with the window as well in Chrome and IE. It is 800px wide, so as long as the window is wide 800+ px, the background will show completely and all will be centered. Introducing the min-width property anywhere will break the center sync between the bg pic and the #container in Chrome, FF and IE, so my question to anyone out there is, is there a way to get the min-width across all major browsers without breaking the "centereness" or DTD? Or is there a better way to get the bg image center in sync with the #container element? PS, I am trying to stick to using tables only for tabular representation and also I am avoiding display:table as it didn't work well arriving this far as I am more than happy to stick with what I got because it at least stays centered properly with the window wider than the widest #container element which is what I was aiming for. I could always use javascript to resize the window to 800px when it changes, but that would be annoying to me. Anyhow, a big thank you to anyone who gives this a minute of there time.
