CSS positioning problem IE 6.0/7 // FF 1.5

[Alexander Nagelmann]

Hi everybody!

I'm redesigning a website for an organisation of our church.
I'm using CSS for positioning and layouting the page. But there's
one problem which makes trouble. On Firefox the website looks
good, but on IE one column with dates (Mein Alter etc.) overlaps
with the headline, so that it looks stupid. I've already tried to
solve this problem but no attempt helped. (it only got more worse)
Is there anybody outthere who might solve this problem?

Url: http://minipage.nagelmann.info/index.php


Thanks for your help


Alex

 

[Martin Jay]

Hi everybody!

I'm redesigning a website for an organisation of our church.
I'm using CSS for positioning and layouting the page. But there's
one problem which makes trouble. On Firefox the website looks
good, but on IE one column with dates (Mein Alter etc.) overlaps
with the headline, so that it looks stupid. I've already tried to
solve this problem but no attempt helped. (it only got more worse)
Is there anybody outthere who might solve this problem?

Url: http://minipage.nagelmann.info/index.php

I think you're doing far too much absolute positioning. You should try
to let your document flow more freely.

I removed most, if not all, the 'Position: absolute' settings and
replaced many for them with 'Float: left' or 'Float: right.'

I've uploaded all the changes I've made to:
<http://www.spam-free.org.uk/pages/1/WWW.htm>

I think the padding/margins on ul and li needs to been slightly changed
to get it looking like your original.

Anyway, I took a sleeping pill about an hour ago, so I'm falling asleep
at my keyboard now. So, I'm going to bed...

 

[Jim Moe]

I'm redesigning a website for an organisation of our church.
I'm using CSS for positioning and layouting the page. But there's
one problem which makes trouble. On Firefox the website looks
good, but on IE one column with dates (Mein Alter etc.) overlaps
with the headline, so that it looks stupid. I've already tried to
solve this problem but no attempt helped. (it only got more worse)
Is there anybody outthere who might solve this problem?

Url: http://minipage.nagelmann.info/index.php

I do not see the problem you describe, e.g. there is no "Mein Alter" on
that page, or dates.

In other Do not use a Transitional DTD for new work. Use Strict.
Correct the HTML validation error.
View the page with different font sizes. It falls apart when the font
size is increased.
Use % or ems for font-size, not px. Font sizes in px are not resizeable
in IE.
Also consider ems for specifying widths and heights to allow the
containers to adapt to font size changes.
Avoid position:absolute wherever possible. Its use almost universally
produces brittle layouts.
The image in the header should be much more narrow, and applied as a
background-image with a repeat-x; it repeats every three characters
anyway. As it is, it just sticks way out the right side.