CSS: Absolute Positioning Challenge

[ResaleBroker]

I've put together this page. What I'm trying to do is use "Absolute Positioning" for the "Header" and "Navlist" DIVs.

Here are the two (2) challenges I am currently encoutering:

1. The "navlist" background appears offset in Mozilla but not IE.
2. I would like the "header"DIV to be horizontally centered so that the page looks ok regarless of screen resolution settings [800x600, 1024x768, etc.]

Can anyone show the way?

[kyle422]

I was having the same problem. Damn internet explorer is the real problem. I think if you ad the code below to your .css you should be alright. Do a search for "diplay: block" in Google for an explaination of what that code does. You may see some unexpected white spaces in IE after you ad the code. Check out my blog for a solution I found, or do a search for "white spaces in IE" for a couple of more complex solutions.

}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

This code does make your .css w3c non-complient. Hope that helps.

[kyle422]

I didn't check your page in IE until now and see that you are having problems in IE as well. I don't know if my code will help. I'll try messing around with it and see what happens.

[ResaleBroker]

I'm working on it right now so it might look a little ugly.

[ResaleBroker]

Kyle, I believe I've installed the code properly that you posted. Unfortunately, I'm still experiencing the same problem.

Any ideas?

[kyle422]

Yeah I'm looking at it right now. Let me try to mess with it now. I'm going to throw it up on my server and mess with it.
Kyle

[ResaleBroker]

Thanks Kyle!

[kyle422]

I can't figure out. Why not use just use a container instead of absolute positioning?

[Vlado Tovarnak]

Jeffrey,

The "navlist" background appears offset in Mozilla but not IE.

I do not understand clear this point...

I would like the "header"DIV to be horizontally centered so that the page looks ok regarless of screen resolution settings [800x600, 1024x768, etc.] Can anyone show the way?

... but in my opinion this point is not possible due to position:absolute; Let me explain:

you can cover header with another <div> which will be set to some width and with attribute margin:auto; you can center header in box created by additional "cover <div>" and with position:absolute; you can position "cover div"...

But if you want elastic design independent to resolution of screen this solution is not applicable.

[ResaleBroker]

I can't figure out. Why not use just use a container instead of absolute positioning?

With a little help I've got the "navlist" to finally display properly. Whew, that was a drag. Thanks for looking into it.

As for a container, I'm wanting to use the "Absolute Positioning" so that the page content is higher on the page than the navigation.