CSS positioning issue with IE 6

[ciobulus]

Ok, first of all sorry for being lazy by asking for help on this matter but this issue is really bugging me and i cant seem to figure it out, im a noob with css and html but i got the hang of it for what i needed to do. I wanted to make a menu with images and text under it heres a button example :
<div style="width: 150px; height: 130px; position: relative; left: 311px; top: -252px;"><a href="http://example.com/Download" title="Download"><img style="width: 93px; height: 93px;" src="/sites/default/files/download.png" alt="Download" /><br />
<p style="text-decoration: none; position: relative; bottom: 1px; padding-left: 7px; height: 30px;">Download</p>
</a></div>

i used the css inside the html code and everything is absolutely perfect with firefox Chrome ie 8 etc, the only issue i have is with IE 6 wich gets the CSS code but for some reason the TOP property is ignored or something the result is a menu that has the buttons in a stair kind of way the first button is ok the second lower third lower fourth lower and so on.
Theres prolly better ways to do this but this was my noobish way to make it work :) so dont flame me for my uber skills help me and il be greatfull for ever :). Thank you

[edited by: swa66 at 6:50 pm (utc) on Nov. 11, 2009]
[edit reason] language [/edit]

[xclamationdesign]

You should really look at using external CSS stylesheets as they are much better to work with and will save you a lot of time in the long run.

IE6 can barely render anything correctly without the use of hacks or work-arounds. IE6 also, does not like .png images especially transparent ones.

It looks like your problem is stemming from your relative postitioning properties (eg. left: 311px; top: -252px;) there are much better ways of using CSS stylesheets to position elements on the page.

Have a read up on "CSS positioning using container divs", that might help. I must also stress again the importance of using external CSS stylesheets.

[ciobulus]

Thank you for the info, i'l have a look at other ways to set that up any tips are welcome since i tried to educate myself in css enough to solve this issue and havent come up with anything yet :(

[ciobulus]

ok, i managed to fix allmost everything, but i ran into a problem, it seems that i wrote so much html code that i cant size the box that contains it, so in firefox everything is fine if i size it to 168px its perfect but in IE 6 only, it wont accept the height of 168px; it just keeps the size of the box that the code is in, if you know what i mean even in dreamweaver when i hover over the imaginary box it displays the css value of 168px but next to it (648px) its amazing and i tried everything switching DOCTYPES its no use i really need help with this one, to bad i cant post screenshots to show you guys what i'm talking about. its like i wrote 2 pages of code to generate a 16x16 px icon but the scrol goes down for 2 pages like the code was there somehow and i cant resize it useing css i can use height: 10000px and it will make it bigger but if i want to make it smaller i cant it just gets stuck at 468 px please help