CSS newbie having problems with IE vs Firefox

[codemonkey]

Hi, firstly, thank you for any assistance you can lend.

I'm trying to position a navigation menu using css absolute positioning and the menu shows up in the correct location in firefox, but shows up about 25px lower in IE! This is driving me crazy! Any help would be GREATLY Appreciated and repaid with very good thoughts about my savior and positive karma.

I am a css newbie, and I'm sure there are many other great ways to layout this page, but i'm working on a deadline and don't have time to rework everything, so a solution that fixes just the positioning of this menu would be wonderful.

--------------------------


table.ddm1 {position: absolute;
top: 60px;
left: 0px;
height: 15px;
width: 700px;
font-size: 10px;
background-color: transparent;
z-index: 3;
font-family: verdana, arial, helvetica;
border:0px; margin:0px; padding:0px;
}


--
Solution provided by jscheuer1. Thanks jscheuer1!


table.ddm1 {position: absolute;
top: 60px!important; ((What Firefox reads))
top: 42px; ((What IE reads))
left: 0px;
height: 15px;
width: 700px;
font-size: 10px;
background-color: transparent;
z-index: 3;
font-family: verdana, arial, helvetica;
border:0px; margin:0px; padding:0px;
}

[jscheuer1]

In all relevant style top declarations, you could use the !important hack. The way this works is to declare the style for FF with it and then the one for IE without it, ex:


#menu {
position:absolute;
top:300px!important;
top:275px;
}

In the above example FF will render the element with the id of 'menu' 25px lower than IE, if IE was already off by that amount, things would now line up well in both browsers.

A rewrite is a better idea, when you get the chance.

[4bidden]

I never knew that was what the !important was for...thank you for that post!

[codemonkey]

jscheuer1 <3,

Your suggestion worked beautifully. I modified the menu with:

#menu{
top: 60px!important;
top: 42px;
}

I can not thank you enough!
You mentioned a rewrite would be better, any suggestions on that?
Once again, thank you so very, very much!

(p.s. thinking good karma and good thoughts.)

[Martijn]

Ey y'all

I'm pretty new to CSS also and I'm dealing with a same kind of problem. FireFox displays my site exactly 10 pixels more to the right in comparison with IE.

It's called the 'Doubled Float-Margin Bug' of IE, if I'm right. I did some additional search for a solution but every solution is pointed on floats. My table is centered and I can't figure out how to modify the solution to a centered table.

Firefox also disforms my contactform. It makes the textarea's longer.

Does one of y'all know how to deal with these things; a solution or a hand in the right direction?


Thanks in advance,

Martijn (who really needs to learn something about cross-browser designs)

[Renmeleon]

I stumbled onto this thread while researching an issue I was having with a client site. I am self-taught, definitely still learning, and am pretty much a control freak when it comes to wanting something to look a certain way. LOL

The information I found in this thread fixed the issues I was having and I cannot thank you enough for that. I am happy to see all the wonderful support the original post's author received, you guys rock.

I am looking forward to utilizing these forums and would also like to thank, wholeheartedly, those who make the Dynamic Forums happen. Keep up the incredible work, you are much appreciated!

[genia]

kinda related to this topic-how do i make IE6 and IE7 to show the same?
or what is the best hack for margin:auto ?
currently i'm using a js hack maybe something better?

[Woody]

I also am having similar problems with IE.
I have a header that is being pushed about 10 px to the right in IE, looks fine in FF. I am also still learning CSS, but I have the header set to:
margin-left: auto;

Is there a solution/hack, and is there a website that has all these hacks in one place?

[nekko]

Thanks! Worked like a charm. :)

[nonpc]

That's just the info I was looking for. Thanks for the help!