Different positioning in ie and FF/Opera

[Reddox]

First things first. Yes I have validated my CSS.
My problem is, that my site show slightly different in IE6 vs Opera/FF.
To illustrate my problem I have a screenshot here:
Picture (http://www.famweb.rddox.com/wtf.png)
The left one is IE, the right one is FF/Opera

Source (http://www.famweb.rddox.com/index.php)
CSS (http://www.famweb.rddox.com/style.css)

[ray326]

These dupes might be interfering with the selectors.
line 64 column 25 - Warning: <img> escaping malformed URI reference
line 69 column 7 - Warning: <div> anchor "news" already defined
line 70 column 1 - Warning: <div> anchor "news2" already defined
line 71 column 1 - Warning: <h4> anchor "title" already defined
line 79 column 25 - Warning: <img> escaping malformed URI reference
line 81 column 1 - Warning: <p> anchor "lesmer" already defined

[Reddox]

So, if I clear up the warnings in the CSS validator, it might work?

[drhowarddrfine]

You are only allowed one id per page. Those are actually errors. Also, you are missing end tags according to the CSS validator. But you could have found this yourself had you validated the code yourself.

[Reddox]

Hmm, I validated the CSS. And it was approved. That's really weird.
What do you mean by one id per page. That I can't use the same ID twice on a page?
thanks for the quick replies :)

[drhowarddrfine]

I don't know what validator you are using but the W3C validator fails your html and css. Yes, I do mean you can only use one id per page. ids are unique to one element only. If you wish to use the same name for multiple elements, use 'class' instead.

[Reddox]

Ok. Thanks, I'll fix the IDs.
I checked my CSS again in the W3 validator, and it passed. Just as it did when I checked it yesterday. I got some warnings, but it passed.
I know the xhtml doesn't pass, it's because of the blog system I use.

[drhowarddrfine]

It doesn't pass, it just can't get check thoroughly until you fix the html.

[Reddox]

I've validated the css separately, and it passed. I know of the problem you are talking about, but if you go to the W3 CSS validator and type in the adress of my CSS (www.famweb.rddox.com/style.css) it will approve it.

[Reddox]

ok it's fixed now. The css should validate any way you try it

[Reddox]

Ok, both the xhtml and the css is approved. But the site still has the same faults in FF and Opera

[drhowarddrfine]

Thank you. It's hard enough debugging working code than trying to figure out code with errors.

Remember that absolutely positioned elements are removed from the normal flow. IE is NOT honoring this for some reason.

Also, you positioned:relative #logo which FF is properly relocating but you are expecting your navigation to move down also. That won't happen. I would just remove position:relative from that to properly line up your nav buttons. Then you can widen menylinje2 and decrease the top value to position it in the center but you'll have to work on the divs above and below that to make room for it.

[Reddox]

Thank you so much. Sorry about the code errors. Although the CSS was ok the whole time. I'll try out your tips

[drhowarddrfine]

I edited this line above:
IE is NOT honoring this for some reason.