CSS: Absolute Positioning Challenge

ResaleBroker · 03:51 PM

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:

The "navlist" background appears offset in Mozilla but not IE.
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 · 03-28-2005, 11:35 AM

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.

Code:

}
.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 · 03-28-2005, 02:15 PM

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 · 03-28-2005, 02:17 PM

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

ResaleBroker · 03-28-2005, 03:15 PM

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

Any ideas?

kyle422 · 03-28-2005, 03:22 PM

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 · 03-28-2005, 03:24 PM

Thanks Kyle!

kyle422 · 03-28-2005, 03:55 PM

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

Vlado Tovarnak · 03-28-2005, 03:56 PM

Jeffrey,

Quote:

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

I do not understand clear this point...

Quote:

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 · 03-28-2005, 03:59 PM

Quote:

Originally Posted by kyle422

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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Real Estate Forums

REW Conference

For our members

Main Sections

IDX Coverage Areas

Spiders Welcome