interaction prob. b/w div items using css

Hi there,

I am building a site using CSS :

http://www.kohlrdesigns.com/inform/

I am getting a bad interaction between two div items and I don't know how to fix it. When the site is first viewed it is fine. However, once the submenu is opened under products, the entire black background moves down with it. I have tried setting the background to absolute, but then I was getting a scroll bar at the bottom. So it is currently set to relative. However I can see that it is interacting with the nav bar in some way. I have tried moving the <div class="black></div> to different areas in the html but this only seems to mess up things. So I'm at a dead end in trying to figure out how to fix it even though I can see the problem.

The black background is created using the following code:

DIV.black{
position:relative;
top: -228;
height:100%;
left:148;
width:100%;
background-color: #000000;

}

I'm hoping somebody might be able to tell me how I can stop this interaction. I hope I have included enough info. I even read the "how to post for newbies" section please let me know if there is more info needed to give me some suggestions!

Thanks so much!!!
Jill

no problem, use absolute instead of relative in your css( this requires positioning). relative is relative to an object, it can move but, absolute cant.

thanks for the suggestion of changing it to absolute. Unfortunately when I do that, I then get a scroll bar across the bottom of the screen even though width is set at 100% and shouldn't be causing a scroll bar.....so not sure how to fix that if I change it to absolute...
Thanks,
Jill

the scroll bar should behave normally eventhough absolute positioning was used? i dont know why that would happen?

Ok guys,, give me some good reasons why I should use css for page layout as against tables, which is rigid, but predictable across the board.

No flame wars.. just solid reasons.

?????? what doo you mean????

That was an interesting comment webmasta though maybe off topic slightly.

I am interested to see the response. I have been trying to do layouts with CSS instead of tables, and it drives me nuts.

Browsers handle styles (divs for example) for differently. At least with tables, you know what you are getting

BTW, I write XHTML 1.0 complaint html

Jamie

Youre right.. off topic .. Ill start a new thread and lets see what happens

Here it is.
http://forums.devshed.com/t87293/s2...8b116ac92e.html

I understand that the absolute should work, but it isn't. Any other ideas? I have included my .css if that might help.

Pleeeeeaaaaassssee Its making me crazy!

There are several opportunities for improvement.

Relative positioning holds open the vacated space, which can cause surprises. What is "top: -228;" Do you want the div moved up 228 px? in? mm? ems? %? The same applies to "left: 148;" Since height and width are set to 100%, the held open space means that more than 100% of each is rendered, thus scroll bars.

I can't seem to get the site (404), so am unable to see how it's applied. But likely, as a previous poster has suggested, absolute positioning should be used.

cheers,

gary

Yes, use absolute with your code, but you will need to re-position the div.

DIV.black{
position:relative;
top: -228;
height:100%;
left:148;
width:100%;
background-color: #000000;

}

P.S. kk5st can you please, please add this to your sig:

----------
cheers,

gary
----------

It drives me up the wall seeing that you have typed it in each time :P

Well, sometimes I sign differently. But, the real reason is that I don't know I'm through with my post 'til I type it.

thwwwp

gary