I just happened as my 'dynamic header' (what I call it) was nearing completion, happened to visit the site using IE and not FireFox. What I saw was a disaster.
Could someone please point me to a guide for making it cross-browser compatible. I only would like to support IE6+ and Opera's latest(whatever that is).
For those of you who are really good at this stuff and are just in the mood of finding obvious errors...
Code:
<style type="text/css">
img.logo{
position:absolute;
z-index:2;
}
div.holder{
position: relative;
}
div.notice{
z-index:10;
position:absolute;
}
td.hbrows{
padding-bottom: 4px;
text-align: center;
}
</style>
<center>
<table id="Table_01" width=99% height="159" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<!-- Buttons -->
<td width="230">
<table border="0" cellspacing="0">
<tr>
<td class="hbrows">
<a href=""><img id="homeb" onMouseover="switchheader('logo')" src="/styles/7M-v1/new/hb_home.png" alt="home" border="0" /></a>
<a href="/"><img id="projectsb" onMouseover="switchheader('projects')" src="/styles/7M-v1/new/hb_projects.png" alt="projects" border="0" /></a>
</td>
</tr><tr>
<td class="hbrows">
<a href="/forums.php"><img id="forumsb" onMouseover="switchheader('logo')" src="/styles/7M-v1/new/hb_forums.png" alt="forums" border="0" /></a>
<a href="/"><img id="clansb" onMouseover="switchheader('clans')" src="/styles/7M-v1/new/hb_clans.png" alt="clans" border="0" /></a>
<!-- <img src="/styles/7M-v1/new/hb_files.gif" border="0" /> -->
</td>
</tr><tr>
<td class="hbrows">
<a href="/members/list/"><img id="membersb" src="/styles/7M-v1/new/hb_members.png" alt="members" border="0" /></a>
<a href="/"><img id="talkb" onMouseover="switchheader('talk')" src="/styles/7M-v1/new/hb_talk.png" alt="talk" border="0" /></a>
</td>
</tr><tr>
<td class="hbrows">
<if condition="!$show['member']"><a href="/register.php"><img id="joinb" src="/styles/7M-v1/new/hb_joinred.png" alt="join" border="0" /></a>
<else /><a href="/usercp.php"><img id="cpb" src="/styles/7M-v1/new/hb_cpred.png" alt="cp" border="0" /></a></if>
<a href="/"><img id="stuffb" onMouseover="switchheader('stuff')" src="/styles/7M-v1/new/hb_stuff.png" alt="stuff" border="0" /></a>
</tr><tr>
<td class="hbrows">
<a href="/faq.php"><img id="faqb" src="/styles/7M-v1/new/hb_faq.png" alt="faq" border="0" /></a>
<a href="/"><img id="customb" onMouseover="switchheader('custom')" src="/styles/7M-v1/new/hb_custom.png" alt="custom" border="0" /></a>
</td>
</tr></if>
</table>
</td>
<!-- Header (empty) -->
<td width="524" height="159">
<div width="100%" class="holder">
<img class="logo" id="logo" style="left: 0;" src="/styles/7M-v1/new/defleft.png" alt="">
<div id="projects"></div>
<div id="clans"></div>
<div id="talk"></div>
<div id="stuff"></div>
<div id="custom"></div>
<div class="notice" id="nojs"><noscript><b>This header requires JAVASCRIPT in-order to function properly. JS is browser-side scripting, and it lets us make the site cooler and easier to navigate. Chances are you disabled it, or an ad-blocker is killing it. If not, your browser sucks; upgrade. Please make an exception for this site, we won't give you pop-ups or any other crap. In fact our ads display to GUESTS (people not logged-in) only!<br /><br /><center><a href="http://www.google.com/support/bin/answer.py?answer=23852">! JavaScript Help !</a></b></center></div></noscript>
</div>
<img src="/styles/7M-v1/new/emptyleft.png" />
</td>
<td height="159">
<img width="100%" height="159" src="/styles/7M-v1/new/emptymidnew.png" />
</td>
<td width="307" height="159">
<div width="100%" class="holder" id="logo2">
<img class="logo" style="right: 0;" src="/styles/7M-v1/new/defright.png" alt="">
</div>
<img src="/styles/7M-v1/new/emptyright.png" />
</td>
</tr>
</table>
</center>
<script type="text/javascript">
hcur='logo';
headerinit();
</script>