Okay, I have fully working code (In IE6 and 7) but it has positioning issues in FF.
Here is my code:
CODE
<style>
body{
background: url(cut/main_bg_01.png) top left repeat-x #ffffff;
margin: 0px;
padding: 0px;
}
.main_container{
background: transparent;
width: 880px;
margin: 0px;
padding: 0px;
border: 0px;
font-align: left;
}
.logo_hold{
height: 60px;
width: 120px;
}
.top_nav_section{
height: 30px;
}
.nav_main{
height: 30px;
}
.nav_active_link{
color: #000099;
text-decoration: none;
height: 30px;
margin: 0px 2px 0px 2px;
cursor: hand;
}
.nav_active_link span.left{
min-width: 7px;
width: 7px;
height: 30px;
background: url(cut/nav_bar_link_bg_l_01.png) bottom right no-repeat transparent;
}
.nav_active_link span.middle{
padding: 10px 4px 0px 4px;
height: 30px;
margin-right: -4px;
background: url(cut/nav_bar_link_bg_01.png) bottom center repeat-x transparent;
}
.nav_active_link span.right{
min-width: 7px;
width: 7px;
height: 30px;
background: url(cut/nav_bar_link_bg_r_01.png) bottom left no-repeat transparent;
}
.nav_inactive_out, .nav_inactive_over{
color: #6262ff;
text-decoration: none;
height: 30px;
margin: 0px 2px 0px 2px;
cursor: hand;
}
.nav_inactive_out span.left{
min-width: 7px;
width: 7px;
height: 30px;
background: url(cut/nav_bar_link_bg_03.png) bottom left no-repeat transparent;
}
.nav_inactive_out span.middle{
padding: 10px 4px 0px 4px;
height: 30px;
margin-right: -4px;
background: url(cut/nav_bar_link_bg_03.png) bottom left no-repeat transparent;
}
.nav_inactive_out span.right{
min-width: 7px;
width: 7px;
height: 30px;
background: url(cut/nav_bar_link_bg_03.png) bottom left no-repeat transparent;
}
.nav_inactive_over span.left{
min-width: 7px;
width: 7px;
height: 30px;
background: url(cut/nav_bar_link_bg_l_02.png) bottom right no-repeat transparent;
}
.nav_inactive_over span.middle{
padding: 10px 4px 0px 4px;
height: 30px;
margin-right: -4px;
background: url(cut/nav_bar_link_bg_02.png) bottom center repeat-x transparent;
}
.nav_inactive_over span.right{
min-width: 7px;
width: 7px;
height: 30px;
background: url(cut/nav_bar_link_bg_r_02.png) bottom left no-repeat transparent;
}
</style>
<script>
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
function init_function(){
active_navb script:nav_select_new(this)" onmouseover="nav_hover(this)" onmouseout="nav_out(this)" class="nav_active_link" id="home_link">
<span class="left"></span>
<span class="middle">Home</span>
<span class="right"></span>
</span>
<span onclick="java script:nav_select_new(this)" class="nav_inactive_out" onmouseover="nav_hover(this)" onmouseout="nav_out(this)">
<span class="left"></span>
<span class="middle">About Us</span>
<span class="right"></span>
</span>
<span onclick="java script:nav_select_new(this)" class="nav_inactive_out" onmouseover="nav_hover(this)" onmouseout="nav_out(this)">
<span class="left"></span>
<span class="middle">Products/ Subscriptions</span>
<span class="right"></span>
</span>
<span onclick="java script:nav_select_new(this)" class="nav_inactive_out" onmouseover="nav_hover(this)" onmouseout="nav_out(this)">
<span class="left"></span>
<span class="middle">Support Forums</span>
<span class="right"></span>
</span>
<span onclick="java script:nav_select_new(this)" class="nav_inactive_out" onmouseover="nav_hover(this)" onmouseout="nav_out(this)">
<span class="left"></span>
<span class="middle">Login/ Register</span>
<span class="right"></span>
</span>
</td>
</tr>
</table>
</center>
The javascript will eventually be a nice little ajax loader (saves time hopefully for the server and loading).
Here is a screenshot of what it looks like in IE (6 adn 7) working perfectly:
It should all be positioned inline and be nicely placed. I may decide to not make the site compatible with FF if I can't figure out how to get this working right. I just need it to look the same in FF as it does in IE; but as I have spent around an hour working on it to no avail I will let others take a look at the code an tell me the nice simple answer I have been missing for all this time
Here are all the source files:
Attachment RemovedThanks for any and all help in advance, I have been trying this for a while and haven't come up with a solution (yet). I will keep trying... hopefully I will still have hair when this is done...
Again, thanks.
This post has been edited by BetaWar: 16 Jun, 2008 - 12:07 AM
14 Jun, 2008 - 07:58 PM
| 