View Full Version : Help: IE absolute positioning working bad

03-22-2005, 05:16 PM
here is the link to the page: http://www.charazay.com/new/
here is the link to css: http://www.charazay.com/new/style/style.css

Now here is the problem:
I am using top box as plain, right box as plain and left(menu) as absolute boxes.
It worked fine all along with(all for win) firefox1.0.1 and N8beta. There was problems with menu box positioning for opera, but i defined margins and paddings everywhere i could and it seemed to help for opera... not for IE6... Absolute menu box is placed on plain main box.. and even plain main box doesnt seem to listen for margin and padding settings... I am really starting to hate IE. could anyone point out the problem or any fix for that?

btw some of the borders are added temporarily to see where the boxes are really

03-22-2005, 05:28 PM
ok so i changed place of code for absolute menu boxes and put it at bottom of source and now it seems like the absolute box is put in correct place for IE. Acting really strange :) it shouldnt have any influence on where the abolute box code is put in source..

And the server seems to have crashed temporarily now..

03-23-2005, 09:23 AM
If you would enclose the left side bar and the main content in a container (div) and give this container "position: relative" with no offsets, you could position the sidebar in relation to the container. This would ensure correct alignment in respect to the main content no matter what height the header would be. A sufficient left margin on the main content area would do nicely to create room for the side bar.

Do go over your markup: validate it, and you'll discover some nasty errors.
Using a p as a container for the main content is a bad idea; a div would be far more appropriate and would allow you to use an actual heading element (h1, h2, h3, ... h6) instead of:

<font class="title">Welcome!</font> (man, that's ugly...) and actual paragraphs instead of repeated line breaks.

Also, the side bar contains two lists with quasi headings (font again... :rolleyes: ) inside the list, which is a definite no-no, and the second one even has a form interwoven in it, which is even worse.

03-23-2005, 07:38 PM
ok did some things and left boxes seems to be in correct place now. Changed font class... to h1. Still there is something bad with IE. the #top div seems to be 2x height in IE while it is normal in other browsers. Could it have something to do with display: inline setting for image and ad in top div? About lists i want header to be inside box and thats why i need h1 to be inside ul element. And what is wrong with form inside list? well moved the form itself outside it, but left inputs inside list, because i need it inside box too.. And is it possible to remove the gaps between each li element in IE (no gaps in other browsers), because that really makes it look not nice.