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> |</li>
<li><a href="?to=flash_games">Flash Games</a> |</li>
<li><a href="?to=multiplayer">Multiplayer Games</a> |</li>
<li><a href="?to=chess_puzzle">Daily Puzzles</a> |</li>
<li><a href="?to=top_players">Top Players</a> |</li>
<li><a href="?to=search_players">Our Members</a> |</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
not a problem. after all the CTR for technically inclined visitors is general very low
I’m so bad at games, and not familiar with bebo at all : )
Glad it worked out for you : )
are u using IE7 right? ok thanks a lot.
That is native IE7 on WinXP.
Stomme_poes:
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.
ok many thank you to you!
i think it is solved. how about play a game or two there? (just kidding…)
#hmenu {
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.
Stomme_poes:
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.
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.
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.
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.
Stomme_poes:
#hmenu {
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.
did u have IE7? i added left:0; after top:50px, don’t know if it works…
how about left:auto ??
