Hello everyone. I have a problem with the "Position: Absolute" CSS property. When I try to align a certain HTML element, it would look perfect on one browser, but in other browsers, and alternatively screen dimensions, the alignment is incorrect. The element will also move around the screen when the user adjusts his/her browser dimensions. For instance, just today I had a TABLE that I wanted to use for my website's navigation. In Google Chrome, the navigation was perfectly set within the background graphic's navigation bar. But in Internet Explorer, the bar was off by approximately 10 or 20 pixels. I deleted the coding out of frustration, so I can't give you the exact HTML structure. But it was similar to this: <table border="1" width="500px" height="50px" style="position: absolute; left: 100px; top: 200px;"><tr> <td>(Insert Navigation Links Here</td> </tr></table> HTML: I am also forced to use Inline Styles because the website I'm designing it on only allows Inline; they are trying to prevent harmful code viruses. Thank you for taking the time to read this. If you have any solutions please tell me. I will be eternally grateful.
Never, ever trust IE to do anything right. Without a link or the complete markup, anything we would say would only be a wild guess.
1) You probably shouldn't be using tables for layout. 2) You probably shouldn't be using outdated and deprecated in strict attributes like border, width, height... 3) You probably shouldn't be absolute positioning a flow element like your menu. 4) When IE is incorrectly positioning an absolute positioned element, the answer is USUALLY to throw a haslayout trigger at it's parent. (though it's often laughable when people instead waste time coding a separate stylesheet for each version of IE with that conditional comment bullshit)
Try to change table tags with divs. With tables you are limited in position. Take a look at w3cschools for more info.