Date: 12/09/07 (WebDesign)    Keywords: browser, css, html

I am attempting to create my very first TABLELESS layout (YAY!)
It's about time.

So, I've run into a snag. Already.
The background image will fit wonderfully into the top left corner of the layout, which is great. I wanted to try the same background image as the background of the image I'm using.
There is a gap. No matter what options I set, there is always this stupid gap between the top of the div and the top of the window.

To show what I'm talking about, see this image:
http://shikkaba.deviantart.com/art/blarg-71714027

You'll see a bit of the finger in the background, repeated.
That's the one set as the body background. The one I wanted to use was the one overtop of it, the one in the menu div. I'll be getting rid of the body one afterwards if I get this to work.
This shows up this way in all browsers on my system, and I have 6 different ones so far, so hey.

The numbers are to be ignored. I know what I'm doing with those. They're just already in place for what I'm doing and just so happen to be in the div I'm talking about.



Here's the html:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

body

{

margin: 0px;

z-index: 0;

background-color: #ffffff;

background: url(../images/side-film.gif);

background-repeat: no-repeat;

}

#bottom_fade {

width: 1000px;

height: 200px;

z-index: 99;

position: fixed;

bottom: 0%;

background-image: url("../images/bottom-fade.png");

background-repeat: repeat-y;

}

#menu {

list-style: none;

padding: 0;

margin: 0;

width: 220px;

height: 1670px;

background: url(../images/side-film.gif);

background-repeat: no-repeat;

position: relative;

}

#menu span {

display: none;

position: absolute;

}

Source: http://community.livejournal.com/webdesign/1338504.html