An IE problem with my header menu - Rep will be given

Hi,

Here is my website: Poker Eagles.

The header menu (Home, Forum, Blog, Pictures, Directory) seems to be a different position when looking at it in FF or IE. I want it to be the place that looks in FF, but I can't figure out why it is doing what is doing in IE...

Here is a part of my CSS that positions the menu:

.main-menu {
	position: absolute;
	left: 270px;
	top: 60px;
	color: #FFFFFF;
}

Code (markup):

Thanks

Nima

 

Oi, it's a huge mess up there. It's really do with the absolute positioning which IE cannot render properly. There really is only 2 possible solutions to this problem, theres most a quick fix, and then theres a 'real fix' to this problem.

The quick fix is quite simple, just stick this in above your </head> tag:

<!--[if lte IE 7]>
<style type="text/css">
.main-menu {left: 230px;top: 72px;}
.main-menu-pic {left: 230px;top: 42px;}
</style>
<![endif]-->

Code (markup):

This will apply to IE7 and Lower and essentially correct the poor positioning. This is however something that I can assure you will be frowned upon since it's not considered a 'real fix'. A real fix essentially would entail completely recoding that section, by ridding yourself of the absolute positioning. This would take a bit more time, but would solve things for you. In any case, the lesson here is try to stay away from absolute positioning in areas such as these were it's really not necessery.

 

Thanks a lot. that fixed it perfectly... Rep given