Problem with my HTML code working fine in IE and not in Firefox

[purbeast0]

Below is the snippet of code...

Code

It is centering just fine and displaying properly whenever I view it in IE, but when I go to view it in firefox, it is not centering at the top of the screen, but instead it is stuck in the top left corner.

Anyone know how to fix this so it'll work in both? thanks!

EDIT:

example of problem in action.

 

[igowerf]

My guess would be the elements with "position: absolute" are being placed at their absolute coordinates, which seems to be the top left.

What's with all the CSS positioning? You're already using a table for structure. Also, it'd be a lot easier to help you with this if we could actually see the page. All the CSS positioning in the table code makes it a little harder to visualize.

 

[purbeast0]

Originally posted by: igowerf
My guess would be the elements with "position: absolute" are being placed at their absolute coordinates, which seems to be the top left.

What's with all the CSS positioning? You're already using a table for structure. Also, it'd be a lot easier to help you with this if we could actually see the page. All the CSS positioning in the table code makes it a little harder to visualize.

Here you go

Open it in IE and Open it in Firefox and you'll see what I mean.

I agree its the "absolute" as well, however it still should work because its in the container, which is why it's working in IE.

I am pretty new to all this webpage stuff so thats why my style is not the best. however, my site is done and this is the only little problem I'm having. I don't really wanna redo it all heh. (if i dont have to)

Also if your resolution is only 1024, it won't look THAT off centered (only 8 pixels) but if you up your resolution to 1280, you will see the problem big time.

 

[igowerf]

Originally posted by: purbeast0

Originally posted by: igowerf
My guess would be the elements with "position: absolute" are being placed at their absolute coordinates, which seems to be the top left.

What's with all the CSS positioning? You're already using a table for structure. Also, it'd be a lot easier to help you with this if we could actually see the page. All the CSS positioning in the table code makes it a little harder to visualize.

Here you go

Open it in IE and Open it in Firefox and you'll see what I mean.

I agree its the "absolute" as well, however it still should work because its in the container, which is why it's working in IE.

I am pretty new to all this webpage stuff so thats why my style is not the best. however, my site is done and this is the only little problem I'm having. I don't really wanna redo it all heh. (if i dont have to)

Also if your resolution is only 1024, it won't look THAT off centered (only 8 pixels) but if you up your resolution to 1280, you will see the problem big time.

Absolute positoning puts it at the ABSOLUTE coordinates with 0, 0 being the top left corner. Try changing it to relative and adjusting the coordinates a bit.

 

[CTho9305]

absolute positioning puts it at absolute coordinates relative to the next containing absolutely positioned element up the tree. Consider http://ctho.ath.cx/tmp/deleteme.html - I just made the table absolutely positioned, and now the pink thing does have the vertical position purbeast0 seems to want. I didn't bother to fix the horizontal positioning. MSIE is definitely rendering purbeast0's original page incorrectly. You really shouldn't mix absolute positioning and tables anyway. If you just want the inner table to have a gap of 3px above it, just use margin-top: 3px for the nested table.

 

[igowerf]

Originally posted by: CTho9305
absolute positioning puts it at absolute coordinates relative to the next containing absolutely positioned element up the tree. Consider http://ctho.ath.cx/tmp/deleteme.html - I just made the table absolutely positioned, and now the pink thing does have the vertical position purbeast0 seems to want. I didn't bother to fix the horizontal positioning. MSIE is definitely rendering purbeast0's original page incorrectly. You really shouldn't mix absolute positioning and tables anyway. If you just want the inner table to have a gap of 3px above it, just use margin-top: 3px for the nested table.

So if a child and parent element both had absolute positioning, the child would actually be relative to the parent?

 

[CTho9305]

Yes, see http://ctho.ath.cx/tmp/deleteme2.html for an example.

<html>
<body>
<div style="position: absolute; top: 40px; left: 40px; background-color: blue; width: 400px; height: 400px;">
<div style="position: absolute; top: -5px; left: -5px; background-color: green; width: 200px; height:200px;">
fdsa
</div>
</div>
</body>
</html>