Vertical gradient body background glitch - ideas?

HTML & CSS
21

I explained that in the second sentence. He wouldn’t be able to have a min-height:100% wrapper then.

22

I’m sorry, did she need one? Maybe I missed that: I thought the body was holding the background image.

23

Stomme - I just tried min height in both the body and html. It did not work.

You are correct that the absolute is causing a lot of the issues here, but, sadly, was the only way I could get items to position where I want and also be able to overlap each other (z-index alone was not allowing items to overlap each other). The header and the text box both overlap the image on the right. And the menu bar overlaps everything. Normally I would not have everything absolute. I have no background issues on my ‘geek’ site *****-of-rome.com since I don’t use absolute everywhere. :wink:

But, this look is what my friends wants, and I’m trying to meet her desires.

Ryan - She. :wink:

24

Dunno, that’s why I said she COULD use min-height:100% on the body if she didn’t want a min-height:100% wrapper :slight_smile:

25

http://stommepoes.nl/Tests/backgroundimg.html

werks 4 me, dunno if it’s what she wants.

I just tried min height in both the body and html. It did not work.

If they’re BOTH min-height then it doesn’t work, no. One of them needs to be 100% high, and after doing the page above it seems a stated height on the html element wasn’t needed. Not sure how stable that is, though.

(z-index alone was not allowing items to overlap each other)

Nah, only “positioned” elements can do that… which can be either pos:abso or pos:rel, but they each work a bit differently.

BUT!
Often you can take advantage of the default (which is, elements who come later can has a higher stacking context) and anyone who comes later in source can be pulled up with negative top margins, and they will indeed overlap the sibling before them.

Depends on which elements need to do what, of course.

26

Yeah, positioning items later helped, but in the end I had to use that with a combo of z-index to get all the items to sit where and how I wanted.

It’s the absolute positioning that’s messing with the background, for sure. I just can’t begin to guess how to fix it - but you guys have been a HUGE help - the biggest issue (cropping gradient) is resolved (I THINK - I am still searching for an IE7 tester. It’s crap in IE6, but oh well to them, and fine in IE8. Honestly, if it’s broken in IE7, I might say MEH! to them too. LOL!).

This new issue I CAN fix by upping the height % on bigger pages, if I must, but I prefer to not have to use that solution as it will be more maintaince in the long run. Which doesn’t bother me too much, but I’m not on the only webmaster for my friend’s site.

27

I personally would recommend IEtester which serves me well in testing IE6/7/8 reliably :).

28

I have never heard of E tester. Where can I find that?

29

Google is your friend :slight_smile:

30

Did you try the exact code, including the overflow?

html{
  background:#000;
  overflow:hidden; /* essential */
}
  body {
  position:absolute; /* essential for IE6 */
  margin:0;
  width:100%; /* essential for IE6 */
  height:100%; /* essential */
  overflow:auto; /* essential */
  background:url(newline.jpg) repeat-y center;
}

But if you don’t want the AP on body. Still, position and width on body is necessary for IE to scroll the page:


html{
  height:100%; /* others than IE */
  overflow:hidden;
  background:#000;
}
  body {
  position:relative;
  margin:0;  
  width:100%;
  height:100%;
  overflow:auto;
  background:url(newline.jpg) repeat-y center;
}

… I had to use that with a combo of z-index to get all the items to sit where and how I wanted.

I think the only places you really need the z-index set is on the “mainimage” the value “0” and on the siblings the value “1” to rise above. The sibling’s children don’t need the stacking level set.

It’s the absolute positioning that’s messing with the background, for sure.
…

Not sure what you mean, but the textbox is covered by the menu.


.dropmenu2 {
  position: absolute;
  width: 800px;
/*  [COLOR="Red"]height: 500px;[/COLOR] /* remove or set to auto, the fixed height is covering the content */
  top: 135px;
  left: 100px;
  background-color: transparent;
  z-index: 99;
}

I have your code locally but haven’t had any opportunity to look closer yet.