Я в полном проигрыше, у меня есть два списка, плавающих в заголовке моего сайта рядом с логотипом, которые отображают информацию и статистику текущего пользователя, вошедшего в систему.
Masthead ______________________________________________________
| Navbar_________________________________________ |
| logo | | |
| |linklist leftside linklist rightside | |
| | | |
| |_______________________________________________| |
| |
|_______________________________________________________________|
Мои Html и CSS смиренны, однако по какой-то причине списки не будут отображаться в IE9. Они отлично показывают в Firefox и Chrome. Я вырывал свои волосы, пытаясь заставить их появиться. Я вижу самый верх нескольких слов в моих списках, но потом они обрезаются. Я не уверен, что это как-то связано с проблемой переполнения или, может быть, мои операторы if немного не в порядке, но я не вижу, в чем проблема, если они хорошо отображаются в других браузерах.
HTML:
<div class="masthead">
<div class="inner">
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
</div>
<div class="navbar">
<div class="inner">
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
<fieldset class="quick-login">
<label for="username">{L_USERNAME}:</label> <input type="text"
name="username" id="username" size="10" class="inputbox" title="
{L_USERNAME}" />
<br/>
<label for="password">{L_PASSWORD}:</label> <input type="password"
name="password" id="password" size="10" class="inputbox" title="
{L_PASSWORD}" />
<br/>
<!-- IF S_AUTOLOGIN_ENABLED -->
<label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin"
id="autologin" /></label>
<!-- ENDIF -->
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
{S_LOGIN_REDIRECT}
</fieldset>
</form>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="logout">
<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">
{L_LOGIN_LOGOUT}</a>
</li>
<li class="ucp">
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
</li>
<li class="pm">
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}
</a>)<!-- ENDIF -->
</li>
<li class="posts">
<!-- IF S_DISPLAY_SEARCH -->
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- ENDIF -->
</li>
<li class="permissions">
<!-- IF U_RESTORE_PERMISSIONS -->
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->
<ul class="linklist rightside">
<li class="visit">
<!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF -->
</li>
<li class="time">
<!-- IF U_MCP -->{CURRENT_TIME} [ <a href="{U_MCP}">{L_MCP}
</a> ]<!--
ELSEIF S_USER_LOGGED_IN -->{CURRENT_TIME}<!-- ENDIF-->
</li>
<li class="faq">
<a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a>
</li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST -->
<li class="members"><a href="{U_MEMBERLIST}" title="
{L_MEMBERLIST_EXPLAIN}">
{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
</div>
</div>
</div>
</div>
CSS:
#logo {
float: left;
width: auto;
margin-top: -60px;
margin-left: 20px;
}
.masthead {
color: #FFFFFF;
margin-bottom: 0px;
margin-top: 25px;
width: 96%;
min-width: 650px;
margin-right: auto;
margin-left: auto;
height: 130px;
background-repeat: repeat-x;
background-position: 0 0;
}
.navbar {
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: auto;
margin-left: 480px;
margin-right: 20px;
height: 86px;
}
.linklist.leftside {
float:left;
text-align: left;
list-style-type: none;
display: inline;
}
.linklist.rightside {
float:right;
text-align: right;
list-style-type: none;
margin-left: 20px;
display: inline;
}
Я больше сосредоточен на CSS, я не думаю, что проблема с моим Html, хотя я могу ошибаться. Любые предложения будут высоко оценены, спасибо!