Well I think I found part of the problem but it still does not explain the larger issue...
After doing some code validation on multiple browsers I realized that both IE7 and IE6 where showing a blank ASCII character as the first part of the code before the doctype tag. I'm not sure how that got in there but I tried filtering my code through notepad then repackaged the whole style and and overwrote the existing version on my server. That seems to have solved some of the issues. The style is now properly aligned in all browsers.
However, all is not perfect. When you login and logout PHPBB bounces through ucp.php which waits for 5secs before doing a redirect. That page is still aligned to the left in IE browsers. Why? I have no idea. I have only edited the files I mentioned before which should have no baring on those pages. As requested here is the edits I made:
overall_header.html - I replaced the code inside of the headerbar div which included moving a few dynamic elements into a different position.
Code: Select all
<div class="headerbar">
<div id="wrap">
<div class="aoa_logo">
<div id="aoa_header_top"></div>
<div id="aoa_header_middle">
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<form action="{U_SEARCH}" method="post" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" style="width:150px" value="" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}" class="advsearch">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
<!-- ENDIF -->
</div>
<div id="aoa_header_bottom">
<div style="float:left;width:550px;text-align:left;">
<strong><a href="{U_INDEX}" accesskey="h">Return to {L_INDEX}</a></strong> |
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> •
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- IF U_RESTORE_PERMISSIONS --> •
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
<!-- ENDIF -->
</div>
<div style="float:right;width:210px;text-align:right;"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></div>
</div>
</div>
</div>
</div>
colours.css - I modified the header classes and add a few of my own to organize the layout.
Code: Select all
.headerbar {
background-color: #ffffff;
background-image: url("{T_THEME_PATH}/images/aoa_header.png");
color: #FFFFFF;
height:101px;
}
.aoa_logo {
background-image: url("{T_THEME_PATH}/images/aoa_logo.png");
height:101px;
text-align:right;
color:#ffffff;
}
#aoa_header_top{
height:20px;
color: #484847;
}
#aoa_header_middle{
height:50px;
padding: 10px 0 0 0;
}
#aoa_header_middle a.advsearch{
color:#ffffff;
padding: 15px 0 0 0;
}
#aoa_header_bottom{
height:31px;
color:#ffffff;
}
#aoa_header_bottom a{
color:#ffffff;
}
These are the only changes I have made to the layout.
