Help! IE7 CSS layout problem again

HTML & CSS
1

one of the member of my site show me weirded IE7 layout issue, see the pic at the bottom.

the CSS part goes like this


#header {
	width:100%;
	height:40px;
	background-color:#3274D0;
	text-align:center;
	margin-bottom:39px
}
#hcontent {
	width:950px;
	margin: 0 auto; 
	position:relative
}
#hlogo {
	height:65px;
	width:250px; 
	border:1px #3274D0 solid; 
	position:absolute;
	right:0;
	top:5px;
	background:#fff url('logo.gif') center center no-repeat
}
#hmenu {
    position:absolute;
    padding-left:15px;
    top:50px;
    list-style:none
}
#hmenu li{
font:bold 14px Arial, Helvetica, sans-serif;
display:inline
}
#hmenu li a:visited{
	text-decoration: none;
	color:#0066A7;
	display:inline
}
#hmenu li a:hover{
	text-decoration: none;color:#478D22;
	background:#fff url('lin.gif') center center repeat-x;
	display:inline
}

and header part:–


<div id="header" >
  <div id="hcontent">
      <div style="width:auto;float:left; margin-top:10px;color:#ffffff;font:bold 14px georgia,arial,sans-serif;"><b>Play Games! Make Friends!! Make Fun!!! Make Money!!!!</b></div>
      <div id="hlogo"></div>
      <ul id="hmenu" >
       <li><a href="index.php">HOME</a>&nbsp;|</li>
       <li><a href="?to=flash_games">Flash Games</a>&nbsp;|</li> 
       <li><a href="?to=multiplayer">Multiplayer Games</a>&nbsp;|</li>
       <li><a href="?to=chess_puzzle">Daily Puzzles</a>&nbsp;|</li>
       <li><a href="?to=top_players">Top Players</a>&nbsp;|</li>
       <li><a href="?to=search_players">Our Members</a>&nbsp;|</li>
       <li><a href="?to=email_support">CONTACT</a></li>
     </ul>
  </div>
</div>

works fine on IE8, but i hv no IE7. Any idea what caused the IE7 issue???

if u use firefox, the correct layout is here http://bebogame.com

2

not a problem. after all the CTR for technically inclined visitors is general very low :stuck_out_tongue:

3

I’m so bad at games, and not familiar with bebo at all : )

Glad it worked out for you : )

4

are u using IE7 right? ok thanks a lot.

5

That is native IE7 on WinXP.

6

: )

http://stommepoes.nl/beboie7.jpg

Looks great.

7

ok many thank you to you!

8

i think it is solved. how about play a game or two there? (just kidding…)

9

#hmenu {
position:absolute;
padding-left:15px;
top:50px;
list-style:none
}

you have this. Notice you say “top: 50px;” but you don’t say anything about left or right. Smart browsers know that if you only say one direction, the other direction must default back to 0 (top left corner is default).

I think maybe IE is not defaulting. Maybe it will work if you say "left: 0; on the menu.

10

could you please point out exactly which CSS part to add? the ‘#hmenu’ ?? i am more into server site script.

really appreciate if u could help more.

11

You has waaaay too much absolute position. Bleh.

I think maybe IE7 is only confused because on the menu you list top but not left/right. Other browsers maybe are assuming left: 0 (or whatever is correct). Try adding that.

12

I don’t have IE right now cause I’m not home. left: auto for smart browsers should be equal to the default… in IE, it’s sometimes not the same as the default (not a smart browser).

Lemme see if I can get on another machine and let you know if it worked.

13

did u have IE7? i added left:0; after top:50px, don’t know if it works…

how about left:auto ??