Css Positioning

[ShadowPaktu]

First off, heres the link:

www.paktu.com/project/index.html

 

Now the backstorey.

This design is going ot be used for a student job database that may go nationall over herei n blighty if its a sucsess, i belive this is being backed by our local council and education athorities.

 

The problem.

Well, it's the compatabilit issues between css standards and IE/netsacpe (firefox).

 

For starters, IE likes to use the float command in an absolute position, yet it doesnt pull the element out of the normall flow of things, which is incorrect, as firfox does this ok, its pull it out so the next element stacks on top of the previous anchor. This is my main problem.

 

If you view the file though IE and FF, at present it displayes pretty much how i want it to in FF. Look at it again through IE and you will see my problem. I used a wuick and dirty hack to make the centerpane position properly in IE by using ths:

 

<!--[if gte IE 5]>

<style type="text/css">

#centerpane {position:absolute; width:480px; background: white}

</style>

<![endif]-->

 

and now it's coming back to haunt me. For some reason, if i dont use this, the pane either gets bumpbed down to the edge of the right pane, or if i make it smaller it fits in, but i get an invisible gap on either side that looks messy, which is why i did this.

 

Now FF get it right, as it's using the relative position command this time, and of course, anything below this will position according to the bottem edge of the contenpane, which is where the footer appears (or submain2) so thats all dandy.

 

In IS, as im using a different rule, and as its now positioned using the absolute command, the next element (submain2) ignors the contentpain (technically as it should) and just positions itself after the last anchor point, with is either the left or right panes (great for adjustable heights)

 

Both browsers interrpret the two rulles correctly, and with no fault, but if IE wasnt so darn stupid in the first place i wouldnt need to use the other css command in the firstplace.

 

Some othersmall issues. I have created another div element that spans accross the entire screen (the green background) however, i have to set a height for this otherwise, you guessed it, the backgound stops at the last anchoers point (usually the left or right side panes).

 

The css driven links all work fine, swapping out images, the roll overs work fine (had to use a get around by using line-height not just height, as this would cuase the bg and link to wrap around the text, not the entire area.

 

This goes out to anyone who has experiacne in css design, and if anyone has had this problem before and have workarounds for it ,i would be so greatfull.

 

And please, no reply's stated IE sucks, dont use it, 90% of the online community dont know this.

 

 

[EDIT]

 

Ok post part two. Having worked on it some more this is what i have come up with:

http://www.paktu.com/project/second/index.html

 

Hooray for me, i fixed 90% of the major problem. Now the floats see mto behave in both FF and IE, im using no if statments for browsers, it's all rolling off one style sheet, and it's doing it fine. I have one more problem.

 

The green bar across the middle of the page is a div, with a backgrounf color of green, this then centers the main content which in turn, houses the left center and right panes. The gree bar will display down to the submain2 bar (the brown bar lowest of the screen) in IE fine, the green fills the page to a point (the lowest point) But, in FF, i HAVE to set a height. At current i set it to 200px just to show you what i mean. Obviously this is no good, as any changing content (95% of this will be DB driven) will cuase the bar to move again. If i set this to a higher value, the lowest bar seems to acknowlege this and adjusts accordingly (down).

 

Can someone please help with this, i need to find a way to make the backgrounf div, expand to down to the lowest element thats positioned relatavily (in this case, the brown bar) It does it in IE with no height tag, but not in FF.

Edited March 5, 2005 by ShadowPaktu