I am working on a layout for a website and have been at a stand still for almost a week now! I think I'm about to lose it! I have a header bar with my navigation links in it and a background image behind it all. It looks perfectly in every browser (using Adobe's Browserlabs to test this) except IE7. I don't know what else to do!
My header template is:
Code: Select all
<div>
<div class="navigation-all">
<div class="header-logo">{cms_selflink dir="start" text="$sitename"}</div>
<div class="site-navigation"><table><tr><td>{menu template='vofmenutemplate'} </td></tr></table></div>
</div>
<div class="header-filler"></div>
<div class="background-image"></div>
<div>
<div class="facebook"><a href="http://www.facebook.com">VOF Facebook Page</a></div>
<div class="twitter"><a href="http://www.twitter.com">VOF Twitter Page</a></div>
</div>
</div>Code: Select all
.navigation-all {
width:100%;
height:100px;
position:absolute;
margin:0;
}
.background-image {
background-color:red;
width:100%;
height:175px;
z-index:1;
}
.header-logo a{
background-image:url('uploads/NCleanBlue/voflogo.png');
background-repeat:no-repeat;
text-indent:-9999px;
display:block;
width:340px;
height:100px;
float:left;
z-index:350;
}
.site-navigation{
background-image:url('uploads/NCleanBlue/vofnavbkg.png');
background-repeat:repeat-x;
margin-left:340px;
padding:8px 30px 0 15px;
display:inline;
width:400px;
height:35px;
position:absolute;
text-align:left;
float:left;
z-index:140;
}
.header-filler{
background-image:url('uploads/NCleanBlue/vofnavbkg.png');
background-repeat:repeat-x;
padding:8px 30px 0 30px;
display:block;
width:50%;
height:35px;
float:right;
z-index:140;
}
.facebook a{
background-image:url('uploads/NCleanBlue/voffb.png');
background-repeat:no-repeat;
text-indent:-9999px;
display:block;
width:55px;
height:55px;
float:right;
z-index:50;
}
.facebook a:hover{
background-image:url('uploads/NCleanBlue/voffb.png');
background-repeat:no-repeat;
text-indent:-9999px;
display:block;
width:55px;
height:55px;
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
float:right;
z-index:50;
}
.twitter a{
background-image:url('uploads/NCleanBlue/voftwitter.png');
background-repeat:no-repeat;
text-indent:-9999px;
display:block;
width:55px;
height:55px;
float:right;
z-index:50;
}
.twitter a:hover{
background-image:url('uploads/NCleanBlue/voftwitter.png');
background-repeat:no-repeat;
text-indent:-9999px;
display:block;
width:55px;
height:55px;
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
float:right;
z-index:50;
}
I attached a screen shot of what the error appears to be. It is making the navigation text become center and it is putting a random space after the logo box.
Does anyone have any ideas on how to fix this? I can't seem to move forward to the rest of the website until I get this figured out!
Thanks in advance!
