midorino
02-20-2006, 02:13 PM
I have uploaded my new layout and it's gone weird.
It looks ok on my PC, but something must have gone wrong with
1) margin or 2) padding.
Here's the link to my weird layout:
http://demon.mireene.com/try/daze.shtml
It's a table at the top of the page with imgs in its cells, a stretching BG, and three divs.
I don't know why the table's going down like this. It ought to be at the very top.
Here comes my CSS:
body { font-size: 11px; font-family: tahoma; margin: 0; padding: 0; background-image: url(images/bg.gif); color: #333333;}
H6 { font-size: 12px; font-weight: bold;}
td
{font-size: 11px;
font-family: tahoma;
vertical-align: top;
border-style: none;}
center { background-position: 50% 50%; background-repeat: no-repeat; font-size: 12px; font-weight: bold; line-height: 20px; }
center.left { background-image: url(images/leftbar.gif); color: #4e2c2c; }
center.right { background-image: url(images/rightbar.gif); color: #61603b; }
.img { border-style: solid; border-color: #000000; border-width: 1px; }
A.left { color: #4e2c2c; text-decoration: none;}
A.left:hover { color: #a65f5f; }
A.left:visited { color: #a65f5f; }
A:link { color: #666666; text-decoration: none;}
A:hover { color: #666666; text-decoration: underline;}
A:visited { color: #666666; }
A.right {color: #61603b; text-decoration: none;}
A.right:hover { color: #a6a466; }
A.right:visited { color: #a6a466;}
You see I have margin and padding both at 0.
Of course I could put all the images together in a div.
But I'm just curious why my layout won't work as it is. Please help!
Thanks!
It looks ok on my PC, but something must have gone wrong with
1) margin or 2) padding.
Here's the link to my weird layout:
http://demon.mireene.com/try/daze.shtml
It's a table at the top of the page with imgs in its cells, a stretching BG, and three divs.
I don't know why the table's going down like this. It ought to be at the very top.
Here comes my CSS:
body { font-size: 11px; font-family: tahoma; margin: 0; padding: 0; background-image: url(images/bg.gif); color: #333333;}
H6 { font-size: 12px; font-weight: bold;}
td
{font-size: 11px;
font-family: tahoma;
vertical-align: top;
border-style: none;}
center { background-position: 50% 50%; background-repeat: no-repeat; font-size: 12px; font-weight: bold; line-height: 20px; }
center.left { background-image: url(images/leftbar.gif); color: #4e2c2c; }
center.right { background-image: url(images/rightbar.gif); color: #61603b; }
.img { border-style: solid; border-color: #000000; border-width: 1px; }
A.left { color: #4e2c2c; text-decoration: none;}
A.left:hover { color: #a65f5f; }
A.left:visited { color: #a65f5f; }
A:link { color: #666666; text-decoration: none;}
A:hover { color: #666666; text-decoration: underline;}
A:visited { color: #666666; }
A.right {color: #61603b; text-decoration: none;}
A.right:hover { color: #a6a466; }
A.right:visited { color: #a6a466;}
You see I have margin and padding both at 0.
Of course I could put all the images together in a div.
But I'm just curious why my layout won't work as it is. Please help!
Thanks!