I am at a total loss here, I have two lists floating in the masthead of my site next to the logo that display information and stats of the current user logged in.
Masthead ______________________________________________________
| Navbar_________________________________________ |
| logo | | |
| |linklist leftside linklist rightside | |
| | | |
| |_______________________________________________| |
| |
|_______________________________________________________________|
My Html and CSS are straitforward, however for some reason, the lists will not show in IE9. They show perfectly in Firefox and Chrome. I have been pulling my hair out trying to get them to show up. I can see the very top of a few of the words in my lists but they cut off afterwards. I'm not sure if it has something to do with an overflow problem or maybe my if statements are a bit off, but I don't see how there's a problem if they show up fine in other browsers.
The 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>
The 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;
}
I'm more focused on the CSS, I don't think the problem is with my Html although I could be dead wrong. Any suggestions would be highly appreciated, thanks!
Have you declared your doc type at the top of the page? IE needs this...
Not Sure but try this update
.navbar { float:right; padding:0px 10px; margin: 0px 20px 0 0; background:blue;
width:60%; overflow:hidden;}
/**/
}
Adjust the required width.
Try to avoid using height it might clip the extended data + avoid playing with margin, it worsen the job with browser compatibility, even with non conventional browsers
It should work...
精彩评论